notes/_sass/code.scss

//
// Code and syntax highlighting
//
// stylelint-disable selector-no-qualifying-type, declaration-block-semicolon-newline-after,declaration-block-single-line-max-declarations, selector-no-type, selector-max-type

code {
  padding: 0.2em 0.15em;
  font-weight: 400;
  background-color: $code-background-color;
  border: $border $border-color;
  border-radius: $border-radius;
}

// Content structure for highlighted code blocks using fences or Liquid
//
// ```[LANG]...```, no kramdown line_numbers:
//   div.[language-LANG.]highlighter-rouge > div.highlight > pre.highlight > code
//
// ```[LANG]...```, kramdown line_numbers = true:
//   div.[language-LANG.]highlighter-rouge > div.highlight > pre.highlight > code
//   > div.table-wrapper > table.rouge-table > tbody > tr
//   > td.rouge-gutter.gl > pre.lineno
//   | td.rouge-code > pre
//
// {% highlight LANG %}...{% endhighlight %}:
//   figure.highlight > pre > code.language-LANG
//
// {% highlight LANG linenos %}...{% endhighlight %}:
//   figure.highlight > pre > code.language-LANG
//   > div.table-wrapper > table.rouge-table > tbody > tr
//   > td.gutter.gl > pre.lineno
//   | td.code > pre
//
// fix_linenos removes the outermost pre when it encloses table.rouge-table
//
// See docs/index-test.md for some tests.
//
// No kramdown line_numbers: fences and Liquid highlighting look the same.
// Kramdown line_numbers = true: fences have a wider gutter than with Liquid?

// ```[LANG]...```
div.highlighter-rouge {
  padding: $sp-3;
  margin-top: 0;
  margin-bottom: $sp-3;
  background-color: $code-background-color;
  border-radius: $border-radius;
  box-shadow: none;
  -webkit-overflow-scrolling: touch;

  div.highlight,
  pre.highlight,
  code {
    padding: 0;
    margin: 0;
    border: 0;
  }
}

// {% highlight LANG %}...{% endhighlight %},
// {% highlight LANG linenos %}...{% endhighlight %}:
figure.highlight {
  padding: $sp-3;
  margin-top: 0;
  margin-bottom: $sp-3;
  background-color: $code-background-color;
  border-radius: $border-radius;
  box-shadow: none;
  -webkit-overflow-scrolling: touch;

  pre,
  code {
    padding: 0;
    margin: 0;
    border: 0;
  }
}

// ```[LANG]...```, kramdown line_numbers = true,
// {% highlight LANG linenos %}...{% endhighlight %}:
.highlight .table-wrapper {
  padding: 0;
  margin: 0;
  border: 0;
  box-shadow: none;

  td,
  pre {
    @include fs-2;
    min-width: 0;
    padding: 0;
    background-color: $code-background-color;
    border: 0;
  }

  td.gl {
    padding-right: $sp-3;
  }

  pre {
    margin: 0;
    line-height: 2;
  }
}

.highlight .c {
  color: #586e75;
} // comment //
.highlight .err {
  color: #93a1a1;
} // error //
.highlight .g {
  color: #93a1a1;
} // generic //
.highlight .k {
  color: #859900;
} // keyword //
.highlight .l {
  color: #93a1a1;
} // literal //
.highlight .n {
  color: #93a1a1;
} // name //
.highlight .o {
  color: #859900;
} // operator //
.highlight .x {
  color: #cb4b16;
} // other //
.highlight .p {
  color: #93a1a1;
} // punctuation //
.highlight .cm {
  color: #586e75;
} // comment.multiline //
.highlight .cp {
  color: #859900;
} // comment.preproc //
.highlight .c1 {
  color: #586e75;
} // comment.single //
.highlight .cs {
  color: #859900;
} // comment.special //
.highlight .gd {
  color: #2aa198;
} // generic.deleted //
.highlight .ge {
  font-style: italic;
  color: #93a1a1;
} // generic.emph //
.highlight .gr {
  color: #dc322f;
} // generic.error //
.highlight .gh {
  color: #cb4b16;
} // generic.heading //
.highlight .gi {
  color: #859900;
} // generic.inserted //
.highlight .go {
  color: #93a1a1;
} // generic.output //
.highlight .gp {
  color: #93a1a1;
} // generic.prompt //
.highlight .gs {
  font-weight: bold;
  color: #93a1a1;
} // generic.strong //
.highlight .gu {
  color: #cb4b16;
} // generic.subheading //
.highlight .gt {
  color: #93a1a1;
} // generic.traceback //
.highlight .kc {
  color: #cb4b16;
} // keyword.constant //
.highlight .kd {
  color: #268bd2;
} // keyword.declaration //
.highlight .kn {
  color: #859900;
} // keyword.namespace //
.highlight .kp {
  color: #859900;
} // keyword.pseudo //
.highlight .kr {
  color: #268bd2;
} // keyword.reserved //
.highlight .kt {
  color: #dc322f;
} // keyword.type //
.highlight .ld {
  color: #93a1a1;
} // literal.date //
.highlight .m {
  color: #2aa198;
} // literal.number //
.highlight .s {
  color: #2aa198;
} // literal.string //
.highlight .na {
  color: #555;
} // name.attribute //
.highlight .nb {
  color: #b58900;
} // name.builtin //
.highlight .nc {
  color: #268bd2;
} // name.class //
.highlight .no {
  color: #cb4b16;
} // name.constant //
.highlight .nd {
  color: #268bd2;
} // name.decorator //
.highlight .ni {
  color: #cb4b16;
} // name.entity //
.highlight .ne {
  color: #cb4b16;
} // name.exception //
.highlight .nf {
  color: #268bd2;
} // name.function //
.highlight .nl {
  color: #555;
} // name.label //
.highlight .nn {
  color: #93a1a1;
} // name.namespace //
.highlight .nx {
  color: #555;
} // name.other //
.highlight .py {
  color: #93a1a1;
} // name.property //
.highlight .nt {
  color: #268bd2;
} // name.tag //
.highlight .nv {
  color: #268bd2;
} // name.variable //
.highlight .ow {
  color: #859900;
} // operator.word //
.highlight .w {
  color: #93a1a1;
} // text.whitespace //
.highlight .mf {
  color: #2aa198;
} // literal.number.float //
.highlight .mh {
  color: #2aa198;
} // literal.number.hex //
.highlight .mi {
  color: #2aa198;
} // literal.number.integer //
.highlight .mo {
  color: #2aa198;
} // literal.number.oct //
.highlight .sb {
  color: #586e75;
} // literal.string.backtick //
.highlight .sc {
  color: #2aa198;
} // literal.string.char //
.highlight .sd {
  color: #93a1a1;
} // literal.string.doc //
.highlight .s2 {
  color: #2aa198;
} // literal.string.double //
.highlight .se {
  color: #cb4b16;
} // literal.string.escape //
.highlight .sh {
  color: #93a1a1;
} // literal.string.heredoc //
.highlight .si {
  color: #2aa198;
} // literal.string.interpol //
.highlight .sx {
  color: #2aa198;
} // literal.string.other //
.highlight .sr {
  color: #dc322f;
} // literal.string.regex //
.highlight .s1 {
  color: #2aa198;
} // literal.string.single //
.highlight .ss {
  color: #2aa198;
} // literal.string.symbol //
.highlight .bp {
  color: #268bd2;
} // name.builtin.pseudo //
.highlight .vc {
  color: #268bd2;
} // name.variable.class //
.highlight .vg {
  color: #268bd2;
} // name.variable.global //
.highlight .vi {
  color: #268bd2;
} // name.variable.instance //
.highlight .il {
  color: #2aa198;
} // literal.number.integer.long //

//
// Code examples (rendered)
//

.code-example {
  padding: $sp-3;
  margin-bottom: $sp-3;
  overflow: auto;
  border: 1px solid $border-color;
  border-radius: $border-radius;

  + .highlighter-rouge,
  + figure.highlight {
    position: relative;
    margin-top: -$sp-4;
    border-right: 1px solid $border-color;
    border-bottom: 1px solid $border-color;
    border-left: 1px solid $border-color;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
}