web/assets/css/syntax.scss

---
---
/*
* The syntax highlight.
* v2.0
* https://github.com/cotes2020/jekyll-theme-chirpy
* © 2018-2019 Cotes Chung
* MIT Licensed
*/

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


@mixin highlight-box-shadow($val) {
  -moz-box-shadow: $val;
  -webkit-box-shadow: $val;
  box-shadow: $val;
}

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 --*/

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

%code-snippet-radius {
  border-radius: 5px;
}

.highlighter-rouge {
  background: var(--highlight-bg-color);
  @extend %code-snippet-radius;
  color: var(--highlighter-rouge-color);
  margin-bottom: 1.2em; /* Override BS Inline-code style */
}

.highlight {
  @extend %code-snippet-radius;
  background: var(--highlight-bg-color);

  @at-root figure#{&} {
    background: var(--highlight-bg-color);
  }
  overflow: auto;
  @include highlight-box-shadow(inset 0 0 2px #c2c6cc);
  .lineno {
    margin: .8rem 0rem;
    padding: 0 .5rem;
    min-width: 2.2rem;
    text-align: right;
    color: var(--highlight-lineno-color);
    border-right: 1px solid var(--highlight-lineno-border-color);
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
  }
  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;
  }
  pre {
    margin-bottom: 0;
    font-size: .85rem;
    line-height: 1.4rem;
    word-wrap: normal;
    /* Fixed Safari overflow-x */
  }

} //.highlight

code {
  -webkit-hyphens: none;
  -ms-hyphens: none;
  -moz-hyphens: none;
  hyphens: none;
  &.highlighter-rouge {
    padding: 2px 4px;
    margin: 0 .3rem;
    border-radius: 4px;
    border: 1px solid var(--code-highlighter-rouge);
  }
  @at-root a>&.highlighter-rouge {
    padding-bottom: 0; // show link's underlinke
  }
  @at-root a:hover>&.highlighter-rouge {
    border-bottom: none;
  }
}

td.rouge-code {
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Hide line numbers for defualt, console, and terminal code snippets */
div {
  &[class^='highlighter-rouge'],
  &.language-console.highlighter-rouge,
  &.language-terminal.highlighter-rouge {
    pre.lineno {
      display: none;
    }
    td.rouge-code {
      padding: .8rem 1rem;
    }
  }
}