| @require './config' |
| |
| .content |
| code |
| color $codeTextColor |
| padding 0.25rem 0.5rem |
| margin 0 |
| font-size 0.85em |
| background-color rgba(27,31,35,0.05) |
| border-radius 3px |
| |
| .content |
| pre, pre[class*="language-"] |
| line-height 1.4 |
| padding 1.25rem 1.5rem |
| margin 0.85rem 0 |
| background-color $codeBgColor |
| border-radius 6px |
| overflow auto |
| code |
| color #525252 |
| padding 0 |
| background-color transparent |
| border-radius 0 |
| |
| div[class*="language-"] |
| position relative |
| background-color $codeBgColor |
| border-radius 6px |
| .highlight-lines |
| user-select none |
| padding-top 1.3rem |
| position absolute |
| top 0 |
| left 0 |
| width 100% |
| line-height 1.4 |
| .highlighted |
| background-color rgba(0, 0, 0, 66%) |
| pre, pre[class*="language-"] |
| background transparent |
| position relative |
| z-index 1 |
| &::before |
| position absolute |
| z-index 3 |
| top 0.8em |
| right 1em |
| font-size 0.75rem |
| color rgba(255, 255, 255, 0.4) |
| &:not(.line-numbers-mode) |
| .line-numbers-wrapper |
| display none |
| &.line-numbers-mode |
| .highlight-lines .highlighted |
| position relative |
| &:before |
| content ' ' |
| position absolute |
| z-index 3 |
| left 0 |
| top 0 |
| display block |
| width $lineNumbersWrapperWidth |
| height 100% |
| background-color rgba(0, 0, 0, 66%) |
| pre |
| padding-left $lineNumbersWrapperWidth + 1 rem |
| vertical-align middle |
| .line-numbers-wrapper |
| position absolute |
| top 0 |
| width $lineNumbersWrapperWidth |
| text-align center |
| color rgba(255, 255, 255, 0.3) |
| padding 1.25rem 0 |
| line-height 1.4 |
| br |
| user-select none |
| .line-number |
| position relative |
| z-index 4 |
| user-select none |
| font-size 0.85em |
| &::after |
| content '' |
| position absolute |
| z-index 2 |
| top 0 |
| left 0 |
| width $lineNumbersWrapperWidth |
| height 100% |
| border-radius 6px 0 0 6px |
| border-right 1px solid rgba(0, 0, 0, 66%) |
| background-color $codeBgColor |
| |
| |
| for lang in js ts html md vue css sass scss less stylus go java c sh yaml |
| div{'[class~="language-' + lang + '"]'} |
| &:before |
| content ('' + lang) |
| |
| div[class~="language-javascript"] |
| &:before |
| content "js" |
| |
| div[class~="language-typescript"] |
| &:before |
| content "ts" |
| |
| div[class~="language-markup"] |
| &:before |
| content "html" |
| |
| div[class~="language-markdown"] |
| &:before |
| content "md" |
| |
| div[class~="language-json"]:before |
| content "json" |
| |
| div[class~="language-ruby"]:before |
| content "rb" |
| |
| div[class~="language-python"]:before |
| content "py" |
| |
| div[class~="language-bash"]:before |
| content "sh" |
| |
| .token |
| color #5081da |
| .token.punctuation |
| color #828282 |
| |
| div[class*="language-"] .highlight-lines .highlighted |
| background-color: rgba(220, 220, 220, 0.66); |