
.ve-code {
  position: relative;
  font-size: 1em;
  font-weight: normal;
  background-color: rgb(var(--ve-theme-surface));
  color: rgb(var(--ve-theme-on-surface));
  /**
   * 颜色风格
   */
}
.ve-code--shape-rounded-sm {
  border-radius: 2px;
}
.ve-code--shape-rounded {
  border-radius: 4px;
}
.ve-code--shape-rounded-lg {
  border-radius: 8px;
}
.ve-code--shape-pill {
  border-radius: 9999px;
}
.ve-code--shape-circle {
  border-radius: 50%;
}
.ve-code--beautify-scrollbar::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  background: transparent;
}
.ve-code--beautify-scrollbar::-webkit-scrollbar-thumb {
  display: none;
  background: rgba(var(--ve-theme-on-surface), var(--ve-hover-opacity)) content-box;
  border: 2px solid transparent;
  border-radius: 5px;
}
.ve-code--beautify-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--ve-theme-on-surface), var(--ve-activated-opacity)) content-box;
}
.ve-code--beautify-scrollbar:hover::-webkit-scrollbar-thumb {
  display: block;
}
.ve-code--block {
  display: flex;
  line-height: 1.5;
}
.ve-code__language {
  position: absolute;
  top: 0.5em;
  right: 1em;
  font-size: 0.85em;
  font-weight: 500;
  user-select: none;
  opacity: var(--ve-medium-emphasis-opacity);
}
.ve-code__lines {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ve-code--show-line-numbers .ve-code__lines {
  padding: 0 16px;
  margin-right: 16px;
  border-right: 1px solid rgba(var(--ve-border-color), var(--ve-border-opacity));
}
.ve-code__line {
  display: flex;
  justify-content: end;
  width: 100%;
  font-size: 0.85em;
  line-height: 1.7647058824;
  user-select: none;
}
.ve-code__line-overlay {
  position: absolute;
  left: 0;
  width: 100%;
  line-height: inherit;
  background-color: rgba(0, 0, 0, var(--ve-medium-emphasis-opacity));
  border-radius: inherit;
  pointer-events: none;
}
.ve-code__line-number {
  position: relative;
  opacity: var(--ve-medium-emphasis-opacity);
}
.ve-code__preformatted {
  position: relative;
  flex: 1 1 auto;
  overflow: auto;
}
.ve-code .token.comment,
.ve-code .token.block-comment,
.ve-code .token.prolog,
.ve-code .token.doctype,
.ve-code .token.cdata {
  color: #999;
}
.ve-code .token.punctuation {
  color: #a8a9cc;
}
.ve-code .token.attr-name {
  color: #690;
}
.ve-code .token.tag,
.ve-code .token.namespace,
.ve-code .token.deleted {
  color: #dd4a68;
}
.ve-code .token.function-name {
  color: #6196cc;
}
.ve-code .token.boolean,
.ve-code .token.number,
.ve-code .token.function {
  color: #c25205;
}
.ve-code .token.property,
.ve-code .token.class-name,
.ve-code .token.constant,
.ve-code .token.symbol {
  color: #4078f2;
}
.ve-code .token.selector,
.ve-code .token.important,
.ve-code .token.atrule,
.ve-code .token.keyword,
.ve-code .token.builtin {
  color: #07a;
}
.ve-code .token.string,
.ve-code .token.char {
  color: #690;
}
.ve-code .token.regex,
.ve-code .token.attr-value,
.ve-code .token.variable {
  color: #07a;
}
.ve-code .token.operator,
.ve-code .token.entity,
.ve-code .token.url {
  color: #0b7e7d;
}
.ve-code .token.important,
.ve-code .token.bold {
  font-weight: bold;
}
.ve-code .token.italic {
  font-style: italic;
}
.ve-code .token.entity {
  cursor: help;
}
.ve-code .token.inserted {
  color: green;
}