ds-markdown/es/components/CodeComponent/index.css

> 🚀 React Markdown 打字动画组件，提供现代聊天界面效果

.md-code-block.md-code-block-dark code[class*='language-'],
.md-code-block.md-code-block-dark pre[class*='language-'] {
  color: #e3eaf2;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  -moz-tab-size: 4;
  tab-size: 4;
  -webkit-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
  background: 0 0;
  font-family: Consolas,
    Monaco,
    Andale Mono,
    Ubuntu Mono,
    monospace;
  line-height: 1.5;
}
.md-code-block.md-code-block-dark pre[class*='language-']::-moz-selection {
  background: #3c526d;
}
.md-code-block.md-code-block-dark pre[class*='language-'] ::-moz-selection {
  background: #3c526d;
}
.md-code-block.md-code-block-dark code[class*='language-']::-moz-selection {
  background: #3c526d;
}
.md-code-block.md-code-block-dark code[class*='language-'] ::-moz-selection {
  background: #3c526d;
}
.md-code-block.md-code-block-dark pre[class*='language-']::-moz-selection {
  background: #3c526d;
}
.md-code-block.md-code-block-dark pre[class*='language-'] ::-moz-selection {
  background: #3c526d;
}
.md-code-block.md-code-block-dark code[class*='language-']::-moz-selection {
  background: #3c526d;
}
.md-code-block.md-code-block-dark code[class*='language-'] ::-moz-selection {
  background: #3c526d;
}
.md-code-block.md-code-block-dark pre[class*='language-']::-moz-selection {
  background: #3c526d;
}
.md-code-block.md-code-block-dark pre[class*='language-']::selection {
  background: #3c526d;
}
.md-code-block.md-code-block-dark pre[class*='language-'] ::-moz-selection {
  background: #3c526d;
}
.md-code-block.md-code-block-dark pre[class*='language-'] ::selection {
  background: #3c526d;
}
.md-code-block.md-code-block-dark code[class*='language-']::-moz-selection {
  background: #3c526d;
}
.md-code-block.md-code-block-dark code[class*='language-']::selection {
  background: #3c526d;
}
.md-code-block.md-code-block-dark code[class*='language-'] ::-moz-selection {
  background: #3c526d;
}
.md-code-block.md-code-block-dark code[class*='language-'] ::selection {
  background: #3c526d;
}
.md-code-block.md-code-block-dark pre[class*='language-'] {
  margin: 0.5em 0;
  padding: 1em;
  overflow: auto;
}
.md-code-block.md-code-block-dark :not(pre) > code[class*='language-'],
.md-code-block.md-code-block-dark pre[class*='language-'] {
  background: #111b27;
}
.md-code-block.md-code-block-dark :not(pre) > code[class*='language-'] {
  white-space: normal;
  border-radius: 0.3em;
  padding: 0.1em 0.3em;
}
.md-code-block.md-code-block-dark .token.comment,
.md-code-block.md-code-block-dark .token.prolog,
.md-code-block.md-code-block-dark .token.doctype,
.md-code-block.md-code-block-dark .token.cdata {
  color: #8da1b9;
}
.md-code-block.md-code-block-dark .token.punctuation {
  color: #e3eaf2;
}
.md-code-block.md-code-block-dark .token.delimiter.important,
.md-code-block.md-code-block-dark .token.selector .parent,
.md-code-block.md-code-block-dark .token.tag,
.md-code-block.md-code-block-dark .token.tag .token.punctuation {
  color: #6cc;
}
.md-code-block.md-code-block-dark .token.attr-name,
.md-code-block.md-code-block-dark .token.boolean,
.md-code-block.md-code-block-dark .token.boolean.important,
.md-code-block.md-code-block-dark .token.number,
.md-code-block.md-code-block-dark .token.constant,
.md-code-block.md-code-block-dark .token.selector .token.attribute {
  color: #e6d37a;
}
.md-code-block.md-code-block-dark .token.class-name,
.md-code-block.md-code-block-dark .token.key,
.md-code-block.md-code-block-dark .token.parameter,
.md-code-block.md-code-block-dark .token.property,
.md-code-block.md-code-block-dark .token.property-access,
.md-code-block.md-code-block-dark .token.variable {
  color: #6cb8e6;
}
.md-code-block.md-code-block-dark .token.attr-value,
.md-code-block.md-code-block-dark .token.inserted,
.md-code-block.md-code-block-dark .token.color,
.md-code-block.md-code-block-dark .token.selector .token.value,
.md-code-block.md-code-block-dark .token.string,
.md-code-block.md-code-block-dark .token.string .token.url-link {
  color: #91d076;
}
.md-code-block.md-code-block-dark .token.builtin,
.md-code-block.md-code-block-dark .token.keyword-array,
.md-code-block.md-code-block-dark .token.package,
.md-code-block.md-code-block-dark .token.regex {
  color: #f4adf4;
}
.md-code-block.md-code-block-dark .token.function,
.md-code-block.md-code-block-dark .token.selector .token.class,
.md-code-block.md-code-block-dark .token.selector .token.id {
  color: #c699e3;
}
.md-code-block.md-code-block-dark .token.atrule .token.rule,
.md-code-block.md-code-block-dark .token.combinator,
.md-code-block.md-code-block-dark .token.keyword,
.md-code-block.md-code-block-dark .token.operator,
.md-code-block.md-code-block-dark .token.pseudo-class,
.md-code-block.md-code-block-dark .token.pseudo-element,
.md-code-block.md-code-block-dark .token.selector,
.md-code-block.md-code-block-dark .token.unit {
  color: #e9ae7e;
}
.md-code-block.md-code-block-dark .token.deleted,
.md-code-block.md-code-block-dark .token.important {
  color: #cd6660;
}
.md-code-block.md-code-block-dark .token.keyword-this,
.md-code-block.md-code-block-dark .token.this {
  color: #6cb8e6;
}
.md-code-block.md-code-block-dark .token.important,
.md-code-block.md-code-block-dark .token.keyword-this,
.md-code-block.md-code-block-dark .token.this,
.md-code-block.md-code-block-dark .token.bold {
  font-weight: 700;
}
.md-code-block.md-code-block-dark .token.delimiter.important {
  font-weight: inherit;
}
.md-code-block.md-code-block-dark .token.italic {
  font-style: italic;
}
.md-code-block.md-code-block-dark .token.entity {
  cursor: help;
}
.md-code-block.md-code-block-dark .language-markdown .token.title,
.md-code-block.md-code-block-dark .language-markdown .token.title .token.punctuation {
  color: #6cb8e6;
  font-weight: 700;
}
.md-code-block.md-code-block-dark .language-markdown .token.blockquote.punctuation {
  color: #f4adf4;
}
.md-code-block.md-code-block-dark .language-markdown .token.code {
  color: #6cc;
}
.md-code-block.md-code-block-dark .language-markdown .token.hr.punctuation {
  color: #6cb8e6;
}
.md-code-block.md-code-block-dark .language-markdown .token.url .token.content {
  color: #91d076;
}
.md-code-block.md-code-block-dark .language-markdown .token.url-link {
  color: #e6d37a;
}
.md-code-block.md-code-block-dark .language-markdown .token.list.punctuation {
  color: #f4adf4;
}
.md-code-block.md-code-block-dark .language-markdown .token.table-header,
.md-code-block.md-code-block-dark .language-json .token.operator {
  color: #e3eaf2;
}
.md-code-block.md-code-block-dark .language-scss .token.variable {
  color: #6cc;
}
.md-code-block.md-code-block-dark .token.token.tab:not(:empty):before,
.md-code-block.md-code-block-dark .token.token.cr:before,
.md-code-block.md-code-block-dark .token.token.lf:before,
.md-code-block.md-code-block-dark .token.token.space:before {
  color: #8da1b9;
}
.md-code-block.md-code-block-dark div.code-toolbar > .toolbar.toolbar > .toolbar-item > a,
.md-code-block.md-code-block-dark div.code-toolbar > .toolbar.toolbar > .toolbar-item > button {
  color: #111b27;
  background: #6cb8e6;
}
.md-code-block.md-code-block-dark div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:hover,
.md-code-block.md-code-block-dark div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:focus,
.md-code-block.md-code-block-dark div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:hover,
.md-code-block.md-code-block-dark div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:focus {
  color: #111b27;
  background: rgba(108, 184, 230, 0.855);
  text-decoration: none;
}
.md-code-block.md-code-block-dark div.code-toolbar > .toolbar.toolbar > .toolbar-item > span,
.md-code-block.md-code-block-dark div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:hover,
.md-code-block.md-code-block-dark div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:focus {
  color: #111b27;
  background: #8da1b9;
}
.md-code-block.md-code-block-dark .line-highlight.line-highlight {
  background: linear-gradient(90deg, rgba(60, 82, 109, 0.373) 70%, rgba(60, 82, 109, 0.333));
}
.md-code-block.md-code-block-dark .line-highlight.line-highlight:before,
.md-code-block.md-code-block-dark .line-highlight.line-highlight[data-end]:after {
  color: #111b27;
  background-color: #8da1b9;
  box-shadow: 0 1px #3c526d;
}
.md-code-block.md-code-block-dark pre[id].linkable-line-numbers.linkable-line-numbers span.line-numbers-rows > span:hover:before {
  background-color: rgba(141, 161, 185, 0.094);
}
.md-code-block.md-code-block-dark .line-numbers.line-numbers .line-numbers-rows {
  background: rgba(11, 18, 27, 0.48);
  border-right: 1px solid #0b121b;
}
.md-code-block.md-code-block-dark .line-numbers .line-numbers-rows > span:before {
  color: rgba(141, 161, 185, 0.855);
}
.md-code-block.md-code-block-dark .rainbow-braces .token.token.punctuation.brace-level-1,
.md-code-block.md-code-block-dark .rainbow-braces .token.token.punctuation.brace-level-5,
.md-code-block.md-code-block-dark .rainbow-braces .token.token.punctuation.brace-level-9 {
  color: #e6d37a;
}
.md-code-block.md-code-block-dark .rainbow-braces .token.token.punctuation.brace-level-2,
.md-code-block.md-code-block-dark .rainbow-braces .token.token.punctuation.brace-level-6,
.md-code-block.md-code-block-dark .rainbow-braces .token.token.punctuation.brace-level-10 {
  color: #f4adf4;
}
.md-code-block.md-code-block-dark .rainbow-braces .token.token.punctuation.brace-level-3,
.md-code-block.md-code-block-dark .rainbow-braces .token.token.punctuation.brace-level-7,
.md-code-block.md-code-block-dark .rainbow-braces .token.token.punctuation.brace-level-11 {
  color: #6cb8e6;
}
.md-code-block.md-code-block-dark .rainbow-braces .token.token.punctuation.brace-level-4,
.md-code-block.md-code-block-dark .rainbow-braces .token.token.punctuation.brace-level-8,
.md-code-block.md-code-block-dark .rainbow-braces .token.token.punctuation.brace-level-12 {
  color: #c699e3;
}
.md-code-block.md-code-block-dark pre.diff-highlight > code .token.token.deleted:not(.prefix),
.md-code-block.md-code-block-dark pre > code.diff-highlight .token.token.deleted:not(.prefix) {
  background-color: rgba(205, 102, 96, 0.12);
}
.md-code-block.md-code-block-dark pre.diff-highlight > code .token.token.inserted:not(.prefix),
.md-code-block.md-code-block-dark pre > code.diff-highlight .token.token.inserted:not(.prefix) {
  background-color: rgba(145, 208, 118, 0.12);
}
.md-code-block.md-code-block-dark .command-line .command-line-prompt {
  border-right: 1px solid #0b121b;
}
.md-code-block.md-code-block-dark .command-line .command-line-prompt > span:before {
  color: rgba(141, 161, 185, 0.855);
}
.md-code-block.md-code-block-light code[class*='language-'],
.md-code-block.md-code-block-light pre[class*='language-'] {
  color: #383a42;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  -moz-tab-size: 2;
  tab-size: 2;
  -webkit-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
  direction: ltr;
  background: #fafafa;
  font-family: Fira Code,
    Fira Mono,
    Menlo,
    Consolas,
    DejaVu Sans Mono,
    monospace;
  line-height: 1.5;
}
.md-code-block.md-code-block-light code[class*='language-']::-moz-selection {
  color: inherit;
  background: #e5e5e6;
}
.md-code-block.md-code-block-light code[class*='language-'] ::-moz-selection {
  color: inherit;
  background: #e5e5e6;
}
.md-code-block.md-code-block-light pre[class*='language-'] ::-moz-selection {
  color: inherit;
  background: #e5e5e6;
}
.md-code-block.md-code-block-light code[class*='language-']::-moz-selection {
  color: inherit;
  background: #e5e5e6;
}
.md-code-block.md-code-block-light code[class*='language-'] ::-moz-selection {
  color: inherit;
  background: #e5e5e6;
}
.md-code-block.md-code-block-light pre[class*='language-'] ::-moz-selection {
  color: inherit;
  background: #e5e5e6;
}
.md-code-block.md-code-block-light code[class*='language-']::-moz-selection {
  color: inherit;
  background: #e5e5e6;
}
.md-code-block.md-code-block-light code[class*='language-']::selection {
  color: inherit;
  background: #e5e5e6;
}
.md-code-block.md-code-block-light code[class*='language-'] ::-moz-selection {
  color: inherit;
  background: #e5e5e6;
}
.md-code-block.md-code-block-light code[class*='language-'] ::selection {
  color: inherit;
  background: #e5e5e6;
}
.md-code-block.md-code-block-light pre[class*='language-'] ::-moz-selection {
  color: inherit;
  background: #e5e5e6;
}
.md-code-block.md-code-block-light pre[class*='language-'] ::selection {
  color: inherit;
  background: #e5e5e6;
}
.md-code-block.md-code-block-light pre[class*='language-'] {
  border-radius: 0.3em;
  margin: 0.5em 0;
  padding: 1em;
  overflow: auto;
}
.md-code-block.md-code-block-light :not(pre) > code[class*='language-'] {
  white-space: normal;
  border-radius: 0.3em;
  padding: 0.2em 0.3em;
}
.md-code-block.md-code-block-light .token.comment,
.md-code-block.md-code-block-light .token.prolog,
.md-code-block.md-code-block-light .token.cdata {
  color: #a0a1a7;
}
.md-code-block.md-code-block-light .token.doctype,
.md-code-block.md-code-block-light .token.punctuation,
.md-code-block.md-code-block-light .token.entity {
  color: #383a42;
}
.md-code-block.md-code-block-light .token.attr-name,
.md-code-block.md-code-block-light .token.class-name,
.md-code-block.md-code-block-light .token.boolean,
.md-code-block.md-code-block-light .token.constant,
.md-code-block.md-code-block-light .token.number,
.md-code-block.md-code-block-light .token.atrule {
  color: #b76b01;
}
.md-code-block.md-code-block-light .token.keyword {
  color: #a626a4;
}
.md-code-block.md-code-block-light .token.property,
.md-code-block.md-code-block-light .token.tag,
.md-code-block.md-code-block-light .token.symbol,
.md-code-block.md-code-block-light .token.deleted,
.md-code-block.md-code-block-light .token.important {
  color: #e45649;
}
.md-code-block.md-code-block-light .token.selector,
.md-code-block.md-code-block-light .token.string,
.md-code-block.md-code-block-light .token.char,
.md-code-block.md-code-block-light .token.builtin,
.md-code-block.md-code-block-light .token.inserted,
.md-code-block.md-code-block-light .token.regex,
.md-code-block.md-code-block-light .token.attr-value,
.md-code-block.md-code-block-light .token.attr-value > .token.punctuation {
  color: #50a14f;
}
.md-code-block.md-code-block-light .token.variable,
.md-code-block.md-code-block-light .token.operator,
.md-code-block.md-code-block-light .token.function {
  color: #4078f2;
}
.md-code-block.md-code-block-light .token.url {
  color: #0184bc;
}
.md-code-block.md-code-block-light .token.attr-value > .token.punctuation.attr-equals,
.md-code-block.md-code-block-light .token.special-attr > .token.attr-value > .token.value.css {
  color: #383a42;
}
.md-code-block.md-code-block-light .language-css .token.selector {
  color: #e45649;
}
.md-code-block.md-code-block-light .language-css .token.property {
  color: #383a42;
}
.md-code-block.md-code-block-light .language-css .token.function,
.md-code-block.md-code-block-light .language-css .token.url > .token.function {
  color: #0184bc;
}
.md-code-block.md-code-block-light .language-css .token.url > .token.string.url {
  color: #50a14f;
}
.md-code-block.md-code-block-light .language-css .token.important,
.md-code-block.md-code-block-light .language-css .token.atrule .token.rule,
.md-code-block.md-code-block-light .language-javascript .token.operator {
  color: #a626a4;
}
.md-code-block.md-code-block-light .language-javascript .token.template-string > .token.interpolation > .token.interpolation-punctuation.punctuation {
  color: #ca1243;
}
.md-code-block.md-code-block-light .language-json .token.operator {
  color: #383a42;
}
.md-code-block.md-code-block-light .language-json .token.null.keyword {
  color: #b76b01;
}
.md-code-block.md-code-block-light .language-markdown .token.url,
.md-code-block.md-code-block-light .language-markdown .token.url > .token.operator,
.md-code-block.md-code-block-light .language-markdown .token.url-reference.url > .token.string {
  color: #383a42;
}
.md-code-block.md-code-block-light .language-markdown .token.url > .token.content {
  color: #4078f2;
}
.md-code-block.md-code-block-light .language-markdown .token.url > .token.url,
.md-code-block.md-code-block-light .language-markdown .token.url-reference.url {
  color: #0184bc;
}
.md-code-block.md-code-block-light .language-markdown .token.blockquote.punctuation,
.md-code-block.md-code-block-light .language-markdown .token.hr.punctuation {
  color: #a0a1a7;
  font-style: italic;
}
.md-code-block.md-code-block-light .language-markdown .token.code-snippet {
  color: #50a14f;
}
.md-code-block.md-code-block-light .language-markdown .token.bold .token.content {
  color: #b76b01;
}
.md-code-block.md-code-block-light .language-markdown .token.italic .token.content {
  color: #a626a4;
}
.md-code-block.md-code-block-light .language-markdown .token.strike .token.content,
.md-code-block.md-code-block-light .language-markdown .token.strike .token.punctuation,
.md-code-block.md-code-block-light .language-markdown .token.list.punctuation,
.md-code-block.md-code-block-light .language-markdown .token.title.important > .token.punctuation {
  color: #e45649;
}
.md-code-block.md-code-block-light .token.bold {
  font-weight: 700;
}
.md-code-block.md-code-block-light .token.comment,
.md-code-block.md-code-block-light .token.italic {
  font-style: italic;
}
.md-code-block.md-code-block-light .token.entity {
  cursor: help;
}
.md-code-block.md-code-block-light .token.namespace {
  opacity: 0.8;
}
.md-code-block.md-code-block-light .token.token.tab:not(:empty):before,
.md-code-block.md-code-block-light .token.token.cr:before,
.md-code-block.md-code-block-light .token.token.lf:before,
.md-code-block.md-code-block-light .token.token.space:before {
  color: rgba(56, 58, 66, 0.2);
}
.md-code-block-light {
  --ds-md-code-block-border-color: #e5e5e5;
  --ds-md-code-block-banner-wrap-background-color: white;
  --ds-md-code-banner-background-color: #f5f5f5;
  color: #494949;
  background: #fafafa;
}
.md-code-block-dark {
  --ds-md-code-block-border-color: var(--dsr-bg, transparent);
  --ds-md-code-block-banner-wrap-background-color: #292a2d;
  --ds-md-code-banner-background-color: #404045;
  color: #fff;
  background: #212327;
}
.md-code-block {
  --ds-md-code-block-border-radius: 12px;
  --ds-md-code-block-font-size: calc(var(--ds-md-zoom) * var(--ds-font-size-xsp));
  border-radius: var(--ds-md-code-block-border-radius);
  font-size: var(--ds-md-code-block-font-size);
  line-height: calc(var(--ds-md-code-block-font-size) * 1.6);
}
.md-code-block:not(:last-child) {
  margin-bottom: calc(var(--ds-md-zoom) * 10px);
}
.md-code-block-footer {
  background: var(--ds-md-code-banner-background-color);
  padding: calc(var(--ds-md-zoom) * 8px) calc(var(--ds-md-zoom) * 12px);
  font-size: var(--ds-md-code-block-font-size);
  line-height: var(--ds-md-code-block-font-size);
  border-bottom-left-radius: var(--ds-md-code-block-border-radius);
  border-bottom-right-radius: var(--ds-md-code-block-border-radius);
  justify-content: flex-end;
  display: flex;
}
.md-code-block-action {
  align-items: center;
  display: flex;
}
.md-code-block > pre {
  padding: calc(var(--ds-md-zoom) * 8px) calc(var(--ds-md-zoom) * 12px);
  white-space: pre-wrap;
  word-break: break-all;
  margin: 0 !important;
}