143 lines
3.0 KiB
Stylus
143 lines
3.0 KiB
Stylus
body {$contentClass}
|
|
code
|
|
color var(--textLightenColor)
|
|
padding 0.25rem 0.5rem
|
|
margin 0
|
|
font-size 0.9em
|
|
// background-color rgba(27,31,35,0.05)
|
|
background-color rgba(100,100,100,0.08)
|
|
border-radius 3px
|
|
.token
|
|
&.deleted
|
|
color #EC5975
|
|
&.inserted
|
|
color $accentColor
|
|
|
|
body {$contentClass}
|
|
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 #fff
|
|
color var(--codeColor)
|
|
padding 0
|
|
background-color transparent
|
|
border-radius 0
|
|
|
|
div[class*="language-"]
|
|
position relative
|
|
// background-color $codeBgColor
|
|
background-color var(--codeBg)
|
|
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, 30%)
|
|
pre, pre[class*="language-"]
|
|
background transparent
|
|
position relative !important
|
|
z-index 1
|
|
&::before
|
|
position absolute
|
|
z-index 3
|
|
top 0.8em
|
|
right 1em
|
|
font-size 0.8rem
|
|
color rgba(150,150,150,.7)
|
|
// 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, 30%)
|
|
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)
|
|
color rgba(127, 127, 127, .5)
|
|
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
|
|
border-right 1px solid var(--borderColor)
|
|
background-color var(--codeBg)
|
|
|
|
|
|
for lang in $codeLang
|
|
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"
|
|
|
|
div[class~="language-php"]:before
|
|
content "php"
|