react-markdown-code-highlighter/dist/style.css

`react-markdown-code-highlighter` is a flexible [React](https://react.dev) component for rendering Markdown with syntax-highlighted code blocks using [highlight.js](https://highlightjs.org/). It is designed for use in chat systems and AI assistants like C

:root {
  --ds-rgb-neutral-50: 250 250 250;
  --ds-rgb-neutral-100: 245 245 245;
  --ds-rgb-neutral-150: 237 237 237;
  --ds-rgb-neutral-200: 229 229 229;
  --ds-rgb-neutral-250: 220 220 220;
  --ds-rgb-neutral-300: 212 212 212;
  --ds-rgb-neutral-350: 187 187 187;
  --ds-rgb-neutral-400: 163 163 163;
  --ds-rgb-neutral-450: 139 139 139;
  --ds-rgb-neutral-500: 115 115 115;
  --ds-rgb-neutral-550: 98 98 98;
  --ds-rgb-neutral-600: 82 82 82;
  --ds-rgb-neutral-650: 73 73 73;
  --ds-rgb-neutral-700: 64 64 64;
  --ds-rgb-neutral-750: 51 51 51;
  --ds-rgb-neutral-800: 38 38 38;
  --ds-rgb-neutral-850: 30 30 30;
  --ds-rgb-neutral-900: 23 23 23;
  --ds-rgb-neutral-950: 10 10 10;
  --ds-rgb-blue-500: 59 130 246;
  --ds-rgb-label-1: var(--ds-rgb-neutral-700);
}
.ds-markdown {
  --ds-font-family-code: Menlo, 'Roboto Mono', 'Courier New', Courier, monospace, 'Inter', sans-serif;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, Oxygen, Open Sans, sans-serif;
}
.ds-markdown {
  --ds-rgb-primary: var(--ds-rgb-blue-500);
  --ds-rgb-label-1: var(--ds-rgb-neutral-700);
  --ds-rgb-label-2: var(--ds-rgb-neutral-450);
  --ds-rgb-label-3: var(--ds-rgb-neutral-400);
  --dsr-border-1: rgb(var(--ds-rgb-neutral-350));
  --dsr-border-2: rgb(var(--ds-rgb-neutral-200));
}
.ds-markdown {
  --ds-font-size-m: 14px;
  --ds-font-size-xsp: 11px;
  --ds-line-height-m: 25px;
  --ds-transition-duration: 0.2s;
  --ds-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ds-rgba-transparent: 255 255 255 / 0;
  --ds-rgb-link: var(--ds-rgb-primary);
}
.ds-markdown.apple {
  --ds-font-weight-strong: 500;
}
.ds-markdown {
  --ds-md-zoom: 1.143;
  --ds-md-font-size: calc(var(--ds-md-zoom) * var(--ds-font-size-m));
  --ds-md-line-height: calc(var(--ds-md-zoom) * var(--ds-line-height-m));
  font-size: var(--ds-md-font-size);
  min-height: var(--ds-md-font-size);
  line-height: var(--ds-md-line-height);
  color: rgb(var(--ds-rgb-label-1));
}
.ds-markdown img {
  max-width: 100%;
}
.ds-markdown h1,
.ds-markdown h2,
.ds-markdown h3,
.ds-markdown h4,
.ds-markdown h5,
.ds-markdown h6 {
  font-weight: var(--ds-font-weight-strong);
  font-size: var(--ds-md-font-size);
  line-height: var(--ds-md-line-height);
  margin: calc(var(--ds-md-zoom) * 16px) 0 calc(var(--ds-md-zoom) * 12px) 0;
}
.ds-markdown h1,
.ds-markdown h2,
.ds-markdown h3,
.ds-markdown h4,
.ds-markdown h5,
.ds-markdown h6 {
  font-weight: var(--ds-font-weight-strong);
  font-size: var(--ds-md-font-size);
  line-height: var(--ds-md-line-height);
  margin: calc(var(--ds-md-zoom) * 16px) 0 calc(var(--ds-md-zoom) * 12px) 0;
}
.ds-markdown h1 {
  font-size: calc(var(--ds-md-zoom) * 24px);
  line-height: 1.5;
}
.ds-markdown h2 {
  font-size: calc(var(--ds-md-zoom) * 20px);
  line-height: 1.5;
}
.ds-markdown h3 {
  font-size: calc(var(--ds-md-zoom) * 16px);
  line-height: 1.5;
}
.ds-markdown h1 .header-anchor,
.ds-markdown h2 .header-anchor,
.ds-markdown h3 .header-anchor,
.ds-markdown h4 .header-anchor,
.ds-markdown h5 .header-anchor,
.ds-markdown h6 .header-anchor {
  opacity: 0;
  margin-left: 4px;
}
.ds-markdown h1:hover .header-anchor,
.ds-markdown h2:hover .header-anchor,
.ds-markdown h3:hover .header-anchor,
.ds-markdown h4:hover .header-anchor,
.ds-markdown h5:hover .header-anchor,
.ds-markdown h6:hover .header-anchor {
  opacity: 1;
}
.ds-markdown .ds-markdown-paragraph {
  margin: calc(var(--ds-md-zoom) * 12px) 0;
  font-size: var(--ds-md-font-size);
  line-height: var(--ds-md-line-height);
}
.ds-markdown a:not(.ds-a) {
  color: rgb(var(--ds-rgb-link));
  transition: box-shadow var(--ds-transition-duration) var(--ds-ease-in-out);
  border-radius: calc(var(--ds-md-zoom) * 6px);
  border-left: 3px solid rgba(var(--ds-rgba-transparent));
  border-right: 3px solid rgba(var(--ds-rgba-transparent));
  border-top: 2px solid rgba(var(--ds-rgba-transparent));
  border-bottom: 2px solid rgba(var(--ds-rgba-transparent));
  margin-left: -3px;
  margin-right: -3px;
  text-decoration: none;
  position: relative;
}
.ds-markdown a:not(.ds-a):focus {
  outline: none;
}
.ds-markdown a:not(.ds-a):focus-visible {
  box-shadow: 0 0 0 2px rgb(var(--ds-rgb-primary));
}
.ds-markdown li > ul,
.ds-markdown li > ol {
  margin-top: 4px;
}
.ds-markdown ul,
.ds-markdown ol {
  margin: calc(var(--ds-md-zoom) * 12px) 0;
  padding-left: calc(var(--ds-md-zoom) * 24px);
}
.ds-markdown li:not(:first-child) {
  margin-top: 4px;
}
.ds-markdown li::marker {
  line-height: var(--ds-md-line-height);
  color: rgb(var(--ds-rgb-label-2));
}
.ds-markdown hr {
  height: 1px;
  margin: 32px 0;
  background-color: var(--dsr-border-2);
  border: none;
  display: block;
}
.ds-markdown blockquote {
  border-left: 2px solid rgb(var(--ds-rgb-label-3));
  padding-left: calc(var(--ds-md-zoom) * 16px);
  margin: 0;
}
.ds-markdown table {
  border-collapse: collapse;
}
.ds-markdown th {
  color: rgb(var(--ds-rgb-label-1));
  padding: calc(var(--ds-md-zoom) * 6px) calc(var(--ds-md-zoom) * 12px);
  border-bottom: 1px solid rgb(var(--ds-rgb-label-3));
  border-top: 1px solid rgb(var(--ds-rgb-label-3));
  font-weight: 600;
}
.ds-markdown th,
.ds-markdown td {
  text-align: left;
}
.ds-markdown th:first-child {
  padding-left: 0;
}
.ds-markdown td {
  padding: calc(var(--ds-md-zoom) * 6px) calc(var(--ds-md-zoom) * 12px);
  border-bottom: 1px solid rgb(var(--ds-rgb-label-3));
}
.ds-markdown td:first-child {
  padding-left: 0;
}
.ds-markdown pre {
  margin: calc(var(--ds-md-zoom) * 12px) 0;
  font-family: var(--ds-font-family-code);
  overflow: auto;
}
.ds-markdown code {
  font-size: 0.875em;
  font-weight: var(--ds-font-weight-strong);
  font-family: var(--ds-font-family-code);
  background-color: #ececec;
  border-radius: 4px;
  padding: 0.15rem 0.3rem;
}
.ds-markdown code:before {
  margin-left: 4px;
}
.ds-markdown code:after {
  margin-right: 4px;
}
ds-markdown-math {
  text-align: center;
  display: block;
  overflow-x: auto;
  overflow-y: hidden;
}
.ds-markdown > * .ds-markdown-math {
  margin: calc(var(--ds-md-zoom) * 12px) 0;
}
.ds-markdown > * .ds-markdown-math:first-child {
  margin-top: 0;
}
.ds-markdown > * .ds-markdown-math:last-child {
  margin-bottom: 0;
}
.ds-markdown-code-copy-button {
  background-color: rgba(var(--ds-rgba-transparent));
  color: inherit;
  cursor: pointer;
  border: none;
  margin: 0;
  padding: 0;
}
.ds-markdown li > .ds-markdown-paragraph {
  margin: 4px 0;
}
.ds-markdown li > :first-child {
  margin-top: 0;
}
.ds-markdown li > :last-child {
  margin-bottom: 0;
}
.ds-markdown .ds-markdown-paragraph:last-child {
  margin-bottom: 0 !important;
}
.ds-markdown > :first-child {
  margin-top: 0 !important;
}
.ds-markdown .ds-typed-thinking {
  border-left: 2px solid #e5e5e5;
  padding: 0 0 0 12px;
  color: #8b8b8b;
  line-height: 26px;
  font-size: var(--ds-font-size-m);
}
.ds-markdown.ds-typed-answer {
  margin: calc(var(--ds-md-zoom) * 12px) 0;
  font-size: var(--ds-md-font-size);
  line-height: var(--ds-md-line-height);
}
.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-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-banner {
  border-top-left-radius: var(--ds-md-code-block-border-radius);
  border-top-right-radius: var(--ds-md-code-block-border-radius);
}
.md-code-block-banner-lite {
  padding: 0;
}
.md-code-block-banner-content {
  justify-content: space-between;
  align-items: center;
  padding: 6px 14px 6px 6px;
  display: flex;
}
.md-code-block-language {
  color: var(--dsr-text-2);
  margin-left: 8px;
  font-size: 12px;
  line-height: 18px;
}
.ds-markdown .markdown-table-wrapper {
  overflow-x: auto;
}
.ds-markdown .markdown-table-wrapper table {
  width: max-content;
  max-width: max-content;
  min-width: 100%;
}
.ds-markdown .markdown-table-wrapper th,
.ds-markdown .markdown-table-wrapper td {
  padding: 10px;
  font-size: 15px;
  line-height: 1.72;
}
.ds-markdown .markdown-table-wrapper th {
  border-color: var(--dsr-border-1);
  border-top: none;
}
.ds-markdown .markdown-table-wrapper td {
  border-color: var(--dsr-border-2);
  max-width: 320px;
  min-width: 100px;
  max-width: max(30vw, 320px);
}
.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-banner-wrap {
  background-color: var(--ds-md-code-block-banner-wrap-background-color);
  z-index: 6;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}
.md-code-block-banner {
  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);
  justify-content: space-between;
  display: flex;
}
.md-code-block-banner-lite {
  padding: 0;
}
.md-code-block-banner {
  border-top-left-radius: var(--ds-md-code-block-border-radius);
  border-top-right-radius: var(--ds-md-code-block-border-radius);
}
.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;
}