// Code blocks and syntax highlighting
/* Applies to inline `code blocks` */ .highlighter-rouge {
font-family: $root-font-family; font-size: 100%; padding: 3px 4px; background-color: #e0e0e0; color: $midnight-code-light; white-space: nowrap;
@media (prefers-color-scheme: dark) {
background-color: #212c2d; color: $midnight-code-dark; }
}
/* Applies to all code */ pre, code {
font-size: 14px; font-family: $code-font-family; font-style: normal; font-feature-settings: "kern" off; font-kerning: none; font-variant: none; background-color: #eef; ::selection { color: $code-bg; background: #bdbdb3; } ::-moz-selection { color: $code-bg; background: #bdbdb3; } ::-webkit-selection { color: $code-bg; background: #bdbdb3; }
}
/* Inline code, no highlight */ code {
padding: 2px 4px; border-radius: 3px; white-space: nowrap;
}
blockquote code {
color: #656565;
}
/* Inline code, highlight */ code.highlight {
border-radius: 3px; color: #bdbdb3; background-color: $code-bg;
}
/* Block code, no highlight */ pre {
border-radius: 5px; margin: 30px * 0.75 30px / 2; padding: 15px 17px; overflow-x: auto; background-color: #f1f1ff; code { border: 0; padding: 0; white-space: pre; }
}
/* Block code, highlight */ figure.highlight, div.highlight {
position: relative; pre { background-color: $code-bg; border: 1px solid $midnight-code-light; border-radius: 15px; box-shadow: 0 4px 30px rgba(0,0,0,.4); @media (prefers-color-scheme: dark) { border: 1px solid $midnight-code-dark; } code { background-color: $code-bg; color: #bdbdb3; counter-reset: code; display: block; line-height: 1.5; /* Display language name */ &[data-lang]::before { content: attr(data-lang); position: absolute; right: 20px; // 15 + 5 font-size: 16px; top: -12px; padding: 0px 7px; text-transform: uppercase; font-weight: bold; border: 1px solid $midnight-code-light; border-top-left-radius: 15px; border-top-right-radius: 15px; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; min-width: 30px; text-align: center; color: $midnight-code-light; background-color: $code-bg; @media (prefers-color-scheme: dark) { border: 1px solid $midnight-code-dark; color: $midnight-code-dark; } @mixin media-query($device) { @media screen and (max-width: $device) { @content; } } @include media-query(300px) { visibility: hidden; } } div { counter-increment: code; /* Line numbers */ &::before { color: #608079; content: counter(code); width: 14px; text-align: right; /* Add a nice border */ display: inline-block; padding-right: 30px / 4; margin-right: 30px * 0.4; border-right: 1px solid #656565; /* For older browsers and Safari */ -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } } } }
}
/* Hide language */ .hide-lang + figure code::before {
visibility: hidden;
}
/**
* Language-specific settings */
.language-liquid {
.p { color: #6aaf50; }
}
/**
* ID-specific overrides */
c-example + figure {
.kt { color: #5180b3; }
}
liquid-example + figure {
.p { color: #bdbdb3; }
}
borders-example + figure {
div { &::before { padding-left: 0.625em; border-left: 1px solid #656565; } &:first-of-type::before { padding-top: 0.25em; border-top: 1px solid #656565; border-top-left-radius: 4px; border-top-right-radius: 4px; } &:last-of-type::before { padding-bottom: 0.25em; border-bottom: 1px solid #656565; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; } }
}
yaml-example + figure {
.na, .s { color: #ab75c3; }
}
.hl-1 + figure .line-1 {
background-color: #112b47;
}