web/_sass/addon/syntax.scss

/*
* The syntax highlight.
*/

@import "colors/light-syntax";
@import "colors/dark-syntax";

html:not([mode]),
html[mode=light] {
  @include light-syntax;
}

html[mode=dark] {
  @include dark-syntax;
}

@media (prefers-color-scheme: dark) {
  html:not([mode]),
  html[mode=dark] {
    @include dark-syntax;
  }

  html[mode=light] {
    @include light-syntax;
  }
}

/* -- Codes Snippet -- */

$code-radius: 6px;

%code-snippet-bg {
  background: var(--highlight-bg-color);
}

%code-snippet-radius {
  border-radius: $code-radius;
}

%code-snippet-padding {
  padding: 1.2rem;
}

div > pre {
  @extend %code-snippet-bg;
  @extend %code-snippet-radius;
  @extend %code-snippet-padding;
}

.highlighter-rouge {
  @extend %code-snippet-bg;
  @extend %code-snippet-radius;

  color: var(--highlighter-rouge-color);
  margin-top: 0.5rem;
  margin-bottom: 1.2em; /* Override BS Inline-code style */
}

.highlight {
  @extend %code-snippet-radius;
  @extend %code-snippet-bg;

  @at-root figure#{&} {
    @extend %code-snippet-bg;
  }

  overflow: auto;

  pre {
    margin-bottom: 0;
    font-size: $code-font-size;
    line-height: 1.4rem;
    word-wrap: normal; /* Fixed Safari overflow-x */
  }

  table {
    padding: 0;
    border: 0;
    td pre {
      overflow: visible;  /* Fixed iOS safari overflow-x */
      word-break: normal; /* Fixed iOS safari linenos code break */
    }
  }

  td {
    padding: 0;
    border: 0;
  }

  .lineno {
    padding-right: 0.5rem;
    min-width: 2.2rem;
    text-align: right;
    color: var(--highlight-lineno-color);
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
  }

  /* set the dollar sign to non-selectable */
  .gp {
    user-select: none;
  }

} //.highlight

code {
  -webkit-hyphens: none;
  -ms-hyphens: none;
  -moz-hyphens: none;
  hyphens: none;

  &.highlighter-rouge {
    font-size: $code-font-size;
    padding: 3px 5px;
    border-radius: 4px;
    background-color: var(--inline-code-bg);
  }

  @at-root a > &.highlighter-rouge {
    padding-bottom: 0; // show link's underlinke
    color: inherit;
  }

  @at-root a:hover > &.highlighter-rouge {
    border-bottom: none;
  }

  blockquote &.highlighter-rouge {
    color: inherit;
  }
}

td.rouge-code {
  padding: 1.2rem 1.5rem 1.2rem 1rem;

  // Prevent some browser extends from
  // changing the URL string of code block.
  a {
    color: inherit !important;
    border-bottom: none !important;
    pointer-events: none;
  }

}

/* Hide line numbers for default, console, and terminal code snippets */
div {
  &[class^='highlighter-rouge'],
  &.language-plaintext.highlighter-rouge,
  &.language-console.highlighter-rouge,
  &.language-terminal.highlighter-rouge,
  &.nolineno {
    pre.lineno {
      display: none;
    }
    td.rouge-code {
      @extend %code-snippet-padding;
    }
  }
}

.code-header {
  background: var(--code-header-bg);
  border-top-left-radius: $code-radius;
  border-top-right-radius: $code-radius;
  display: flex;
  justify-content: space-between;
  align-items: center;
  line-height: 1.85rem;

  // the label
  span {
    color: var(--lang-badge-color);
    padding-left: 0.6rem;
    font-size: 0.85rem;

    &:after {
      content: attr(text-data);
      margin-left: 0.3rem;
      font-weight: 600;

      // language
      @at-root .highlighter-rouge:not([file]) #{&} {
        font-size: 0.75rem;
        text-transform: uppercase;
      }

    } // :after

    @at-root [file] #{&} > i { // center the file icon
      position: relative;
      top: 1px;
    }

  }


  // clipboard
  button {
    border: 1px solid var(--code-header-bg);
    border-radius: $code-radius;
    padding: 0;
    width: 1.95rem;
    background-color: inherit;
    color: var(--highlight-lineno-color);

    @extend %cursor-pointer;

    &[timeout] {
      color: var(--clipboard-checked-color);
      border-color: var(--clipboard-checked-color);
    }

    &:not([timeout]):hover {
      background-color: gray;
      > i {
        color: white;
      }
    }

    &:focus {
      outline: none;
    }

    i {
      font-size: 0.9rem;
    }

  }

}

@media all and (max-width: 576px) {
  .post-content {
    > div[class^='language-'] {
      @include ml-mr(-1.25rem);

      border-radius: 0;

      .code-header {
        border-radius: 0;
        padding-left: 0.4rem;
        padding-right: 0.5rem;
      }
    }
  }
}