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