docs/assets/css/code.css

.highlight, :not(pre) > code {
  font-size: .875em;
  border: 1px solid;
  border-radius: theme("spacing.1");
  border-color: theme("colors.gray.light.300");
  .dark & {
    background: theme("colors.gray.dark.200");
    border-color: theme("colors.gray.dark.300");
  }
}

:not(pre) > code {
  /* !important because of specificity issue with blockquote typography */
  color: theme(colors.black) !important;
  .dark blockquote & {
    color: theme(colors.white) !important;
  }
}

.highlight {
  @apply p-3 my-4 overflow-x-auto;
  background: theme("colors.white");
}

:not(pre) > code {
  background: theme("colors.gray.light.200");
  display: inline-block;
  margin: 0;
  white-space: nowrap;
  font-weight: 400;
  padding: 0 4px;
}

.highlight {
  /* LineTableTD */
  .lntd {
    vertical-align: top;
    padding: 0;
    margin: 0;
    border: 0;
  }
  /* LineTable */
  .lntable {
    display: table;
    width: 100%;
    border-spacing: 0;
    padding: 0;
    margin: 0;
    border: 0;
    /* LineNumberColumnHighlight */
    .lntd:first-child .hl {
      display: block;
    }
  }

  /* LightTheme */
  .light & {
    /* Other */
    .x {
      color: #000000;
    }
    /* Error */
    .err {
      color: #a40000;
    }
    /* CodeLine */
    .cl {
    }
    /* LineHighlight */
    .hl {
      background-color: #e5f2fc;
    }
    .lntd:first-child .hl,
    & > .chroma > code > .hl {
      margin-left: -4px;
      border-left: 4px solid #c0e0fa;
    }
    /* LineNumbersTable */
    .lnt {
      white-space: pre;
      user-select: none;
      margin-right: 0.4em;
      padding: 0 0.4em 0 0.4em;
      color: #7f7f7f;
    }
    /* LineNumbers */
    .ln {
      white-space: pre;
      user-select: none;
      margin-right: 0.4em;
      padding: 0 0.4em 0 0.4em;
      color: #7f7f7f;
    }
    /* Line */
    .line {
      display: flex;
    }
    /* Keyword */
    .k {
      color: #204a87;
    }
    /* KeywordConstant */
    .kc {
      color: #204a87;
    }
    /* KeywordDeclaration */
    .kd {
      color: #204a87;
    }
    /* KeywordNamespace */
    .kn {
      color: #204a87;
    }
    /* KeywordPseudo */
    .kp {
      color: #204a87;
    }
    /* KeywordReserved */
    .kr {
      color: #204a87;
    }
    /* KeywordType */
    .kt {
      color: #204a87;
    }
    /* Name */
    .n {
      color: #000000;
    }
    /* NameAttribute */
    .na {
      color: #c4a000;
    }
    /* NameBuiltin */
    .nb {
      color: #204a87;
    }
    /* NameBuiltinPseudo */
    .bp {
      color: #3465a4;
    }
    /* NameClass */
    .nc {
      color: #000000;
    }
    /* NameConstant */
    .no {
      color: #000000;
    }
    /* NameDecorator */
    .nd {
      color: #5c35cc;
    }
    /* NameEntity */
    .ni {
      color: #ce5c00;
    }
    /* NameException */
    .ne {
      color: #cc0000;
    }
    /* NameFunction */
    .nf {
      color: #000000;
    }
    /* NameFunctionMagic */
    .fm {
      color: #000000;
    }
    /* NameLabel */
    .nl {
      color: #f57900;
    }
    /* NameNamespace */
    .nn {
      color: #000000;
    }
    /* NameOther */
    .nx {
      color: #000000;
    }
    /* NameProperty */
    .py {
      color: #000000;
    }
    /* NameTag */
    .nt {
      color: #204a87;
    }
    /* NameVariable */
    .nv {
      color: #5f25a0;
    }
    /* NameVariableClass */
    .vc {
      color: #000000;
    }
    /* NameVariableGlobal */
    .vg {
      color: #000000;
    }
    /* NameVariableInstance */
    .vi {
      color: #000000;
    }
    /* NameVariableMagic */
    .vm {
      color: #000000;
    }
    /* Literal */
    .l {
      color: #000000;
    }
    /* LiteralDate */
    .ld {
      color: #000000;
    }
    /* LiteralString */
    .s {
      color: #4e9a06;
    }
    /* LiteralStringAffix */
    .sa {
      color: #4e9a06;
    }
    /* LiteralStringBacktick */
    .sb {
      color: #4e9a06;
    }
    /* LiteralStringChar */
    .sc {
      color: #4e9a06;
    }
    /* LiteralStringDelimiter */
    .dl {
      color: #4e9a06;
    }
    /* LiteralStringDoc */
    .sd {
      color: #8f5902;
    }
    /* LiteralStringDouble */
    .s2 {
      color: #4e9a06;
    }
    /* LiteralStringEscape */
    .se {
      color: #000;
    }
    /* LiteralStringHeredoc */
    .sh {
      color: #4e9a06;
    }
    /* LiteralStringInterpol */
    .si {
      color: #4e9a06;
    }
    /* LiteralStringOther */
    .sx {
      color: #4e9a06;
    }
    /* LiteralStringRegex */
    .sr {
      color: #4e9a06;
    }
    /* LiteralStringSingle */
    .s1 {
      color: #4e9a06;
    }
    /* LiteralStringSymbol */
    .ss {
      color: #4e9a06;
    }
    /* LiteralNumber */
    .m {
      color: #0000cf;
    }
    /* LiteralNumberBin */
    .mb {
      color: #0000cf;
    }
    /* LiteralNumberFloat */
    .mf {
      color: #0000cf;
    }
    /* LiteralNumberHex */
    .mh {
      color: #0000cf;
    }
    /* LiteralNumberInteger */
    .mi {
      color: #0000cf;
    }
    /* LiteralNumberIntegerLong */
    .il {
      color: #0000cf;
    }
    /* LiteralNumberOct */
    .mo {
      color: #0000cf;
    }
    /* Operator */
    .o {
      color: #ce5c00;
    }
    /* OperatorWord */
    .ow {
      color: #204a87;
    }
    /* Punctuation */
    .p {
      color: #000000;
    }
    /* Comment */
    .c {
      color: #8f5902;
    }
    /* CommentHashbang */
    .ch {
      color: #8f5902;
    }
    /* CommentMultiline */
    .cm {
      color: #8f5902;
    }
    /* CommentSingle */
    .c1 {
      color: #8f5902;
    }
    /* CommentSpecial */
    .cs {
      color: #8f5902;
    }
    /* CommentPreproc */
    .cp {
      color: #8f5902;
    }
    /* CommentPreprocFile */
    .cpf {
      color: #8f5902;
    }
    /* Generic */
    .g {
      color: #000000;
    }
    /* GenericDeleted */
    .gd {
      color: #a40000;
    }
    /* GenericEmph */
    .ge {
      color: #000000;
    }
    /* GenericError */
    .gr {
      color: #ef2929;
    }
    /* GenericHeading */
    .gh {
      color: #000080;
    }
    /* GenericInserted */
    .gi {
      color: #00a000;
    }
    /* GenericOutput */
    .go {
      color: #000000;
    }
    /* GenericPrompt */
    .gp {
      user-select: none;
      color: #8f5902;
    }
    /* GenericStrong */
    .gs {
      color: #000000;
    }
    /* GenericSubheading */
    .gu {
      color: #800080;
    }
    /* GenericTraceback */
    .gt {
      color: #a40000;
    }
    /* GenericUnderline */
    .gl {
      color: #000000;
      text-decoration: underline;
    }
    /* TextWhitespace */
    .w {
      color: var(--gray-100);
    }
  }

  .dark & {
    /* Other */
    .x {
    }
    /* Error */
    .err {
    }
    /* CodeLine */
    .cl {
    }
    /* LineHighlight */
    .hl {
      background-color: theme('colors.gray.dark.300');
    }
    .lntd:first-child .hl,
    & > .chroma > code > .hl {
      margin-left: -4px;
      border-left: 4px solid theme('colors.gray.dark.400');
    }
    /* LineNumbersTable */
    .lnt {
      white-space: pre;
      user-select: none;
      margin-right: 0.4em;
      padding: 0 0.4em 0 0.4em;
      color: #58626f;
    }
    /* LineNumbers */
    .ln {
      white-space: pre;
      user-select: none;
      margin-right: 0.4em;
      padding: 0 0.4em 0 0.4em;
      color: #58626f;
    }
    /* Line */
    .line {
      display: flex;
    }
    /* Keyword */
    .k {
      color: #76a9f9;
    }
    /* KeywordConstant */
    .kc {
      color: #e5c07b;
    }
    /* KeywordDeclaration */
    .kd {
      color: #76a9f9;
    }
    /* KeywordNamespace */
    .kn {
      color: #76a9f9;
    }
    /* KeywordPseudo */
    .kp {
      color: #76a9f9;
    }
    /* KeywordReserved */
    .kr {
      color: #76a9f9;
    }
    /* KeywordType */
    .kt {
      color: #e5c07b;
    }
    /* Name */
    .n {
      color: #aa89ea;
    }
    /* NameAttribute */
    .na {
      color: #cebc3a;
    }
    /* NameBuiltin */
    .nb {
      color: #e5c07b;
    }
    /* NameBuiltinPseudo */
    .bp {
      color: #aa89ea;
    }
    /* NameClass */
    .nc {
      color: #ca72ff;
    }
    /* NameConstant */
    .no {
      color: #aa89ea;
    }
    /* NameDecorator */
    .nd {
      color: #e5c07b;
    }
    /* NameEntity */
    .ni {
      color: #bda26f;
    }
    /* NameException */
    .ne {
      color: #fd7474;
    }
    /* NameFunction */
    .nf {
      color: #00b1f7;
    }
    /* NameFunctionMagic */
    .fm {
      color: #aa89ea;
    }
    /* NameLabel */
    .nl {
      color: #f5a40d;
    }
    /* NameNamespace */
    .nn {
      color: #ca72ff;
    }
    /* NameOther */
    .nx {
      color: #ffffff;
    }
    /* NameProperty */
    .py {
      color: #cebc3a;
    }
    /* NameTag */
    .nt {
      color: #76a9f9;
    }
    /* NameVariable */
    .nv {
      color: #dcaeea;
    }
    /* NameVariableClass */
    .vc {
      color: #dcaeea;
    }
    /* NameVariableGlobal */
    .vg {
      color: #dcaeea;
    }
    /* NameVariableInstance */
    .vi {
      color: #e06c75;
    }
    /* NameVariableMagic */
    .vm {
      color: #dcaeea;
    }
    /* Literal */
    .l {
      color: #98c379;
    }
    /* LiteralDate */
    .ld {
      color: #98c379;
    }
    /* LiteralString */
    .s {
      color: #98c379;
    }
    /* LiteralStringAffix */
    .sa {
      color: #98c379;
    }
    /* LiteralStringBacktick */
    .sb {
      color: #98c379;
    }
    /* LiteralStringChar */
    .sc {
      color: #98c379;
    }
    /* LiteralStringDelimiter */
    .dl {
      color: #98c379;
    }
    /* LiteralStringDoc */
    .sd {
      color: #7e97c3;
    }
    /* LiteralStringDouble */
    .s2 {
      color: #63c381;
    }
    /* LiteralStringEscape */
    .se {
      color: #fff;
    }
    /* LiteralStringHeredoc */
    .sh {
      color: #98c379;
    }
    /* LiteralStringInterpol */
    .si {
      color: #98c379;
    }
    /* LiteralStringOther */
    .sx {
      color: #70b33f;
    }
    /* LiteralStringRegex */
    .sr {
      color: #56b6c2;
    }
    /* LiteralStringSingle */
    .s1 {
      color: #98c379;
    }
    /* LiteralStringSymbol */
    .ss {
      color: #56b6c2;
    }
    /* LiteralNumber */
    .m {
      color: #d19a66;
    }
    /* LiteralNumberBin */
    .mb {
      color: #d19a66;
    }
    /* LiteralNumberFloat */
    .mf {
      color: #d19a66;
    }
    /* LiteralNumberHex */
    .mh {
      color: #d19a66;
    }
    /* LiteralNumberInteger */
    .mi {
      color: #d19a66;
    }
    /* LiteralNumberIntegerLong */
    .il {
      color: #d19a66;
    }
    /* LiteralNumberOct */
    .mo {
      color: #d19a66;
    }
    /* Operator */
    .o {
      color: #54b1c7;
    }
    /* OperatorWord */
    .ow {
      color: #b756ff;
    }
    /* Punctuation */
    .p {
      color: #abb2bf;
    }
    /* Comment */
    .c {
      color: #8a93a5;
    }
    /* CommentHashbang */
    .ch {
      color: #8a93a5;
    }
    /* CommentMultiline */
    .cm {
      color: #8a93a5;
    }
    /* CommentSingle */
    .c1 {
      color: #8a93a5;
    }
    /* CommentSpecial */
    .cs {
      color: #8a93a5;
    }
    /* CommentPreproc */
    .cp {
      color: #8a93a5;
    }
    /* CommentPreprocFile */
    .cpf {
      color: #8a93a5;
    }
    /* Generic */
    .g {
    }
    /* GenericDeleted */
    .gd {
      color: #dd4659;
    }
    /* GenericEmph */
    .ge {
    }
    /* GenericError */
    .gr {
    }
    /* GenericHeading */
    .gh {
      color: #a2cbff;
    }
    /* GenericInserted */
    .gi {
      color: #a6e22e;
    }
    /* GenericOutput */
    .go {
      color: #fff;
    }
    /* GenericPrompt */
    .gp {
      color: #a6e22e;
    }
    /* GenericStrong */
    .gs {
    }
    /* GenericSubheading */
    .gu {
      color: #a2cbff;
    }
    /* GenericTraceback */
    .gt {
      color: #a2cbff;
    }
    /* GenericUnderline */
    .gl {
      text-decoration: underline;
    }
    /* TextWhitespace */
    .w {
    }
  }
}