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

}

// Avoid appearance of dark border around visited code links in Safari a:visited code {

border-color: $border-color;

}

// Content structure for highlighted code blocks using fences or Liquid // // “`[LANG]…“`, no kramdown line_numbers: // div.highlighter-rouge > div.highlight > pre.highlight > code // // “`[LANG]…“`, kramdown line_numbers = true: // div.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;
overflow-x: auto;
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;
}

}