$codeBackground: rgba($colorBlack, 0.9); $codeText: #eee; $codeGrey: #616161; $codeRed: #ff6666; $codeOrange: #fd9170; $colorYellow: #ffcb6b; $codeGreen: #b9ea80; $codeBlue: #89ddff; $codeTeal: #80cbc4; $codePurple: #c792ea; code[class*="language-"], pre[class*="language-"] { position: relative; text-align: left; white-space: pre; word-spacing: normal; word-break: normal; word-wrap: normal; hyphens: none; color: inherit; text-shadow: none; font-family: 'JetBrainsMono', monospace; font-size: 0.9rem; line-height: 1.8; tab-size: 2; padding: 0; } :not(pre) > code[class*="language-"] { white-space: normal; color: $codeText; background: $codeBackground; border-radius: 0.2em; padding: 0.1em; } pre > code[class*="language-"] { display: inline-block; // TODO: breaks on mobile safari min-width: 100%; background: none; } pre[class*="language-"] { overflow: auto; position: relative; color: $codeText; background: $codeBackground; padding: 1.2rem 1.5rem !important; border-radius: 0.5rem; max-height: unquote("max(300px, 60vh)"); &::-webkit-scrollbar-thumb { background-color: rgba($colorWhite, 0.25); } } pre[class*="language-"].language-css > code, pre[class*="language-"].language-sass > code, pre[class*="language-"].language-scss > code { color: $codeOrange; } [class*="language-"] .namespace { opacity: 0.7; } .token.atrule { color: $codePurple; } .token.attr-name { color: $colorYellow; } .token.attr-value { color: $codeGreen; } .token.attribute { color: $codeGreen; } .token.boolean { color: $codePurple; } .token.builtin { color: $colorYellow; } .token.cdata { color: $codeTeal; } .token.char { color: $codeTeal; } .token.class { color: $colorYellow; } .token.class-name { color: $colorYellow; } .token.comment { color: $codeGrey; } .token.constant { color: $codePurple; } .token.deleted { color: $codeRed; } .token.doctype { color: $codeGrey; } .token.entity { color: $codeRed; } .token.function { color: $codePurple; } .token.hexcode { color: $colorYellow; } .token.id { color: $codePurple; font-weight: bold; } .token.important { color: $codePurple; font-weight: bold; } .token.inserted { color: $codeTeal; } .token.keyword { color: $codePurple; } .token.number { color: $codeOrange; } .token.operator { color: $codeBlue; } .token.prolog { color: $codeGrey; } .token.property { color: $codeTeal; } .token.pseudo-class { color: $codeGreen; } .token.pseudo-element { color: $codeGreen; } .token.punctuation { color: $codeBlue; } .token.regex { color: $colorYellow; } .token.selector { color: $codeRed; } .token.string { color: $codeGreen; } .token.symbol { color: $codePurple; } .token.tag { color: $codeRed; } .token.unit { color: $codeOrange; } .token.url { color: $codeRed; } .token.variable { color: $codeRed; } .line-highlight { background: rgba($colorWhite, 0.1) !important; left: -1.5rem !important; right: -1.5rem !important; margin: 0 !important; &::before, &::after { display: none; } }