230 lines
4.8 KiB
Stylus
230 lines
4.8 KiB
Stylus
article.md .highlight
|
||
margin: 1rem 0
|
||
border-radius: $border-block
|
||
overflow: hidden
|
||
background: var(--block)
|
||
border: 1px solid var(--block-border)
|
||
line-height: 1.5
|
||
font-family: $ff-code
|
||
|
||
article.md .highlight
|
||
position: relative
|
||
overflow: auto
|
||
display: block
|
||
figcaption
|
||
color: var(--text-p2)
|
||
font-size: $fs-code
|
||
padding: 4px 0.5rem
|
||
position: sticky
|
||
left: 0
|
||
background: var(--block-hover)
|
||
border-top-left-radius: "calc(%s - 1px)" % $border-block
|
||
border-top-right-radius: "calc(%s - 1px)" % $border-block
|
||
border-bottom: 1px solid var(--block-border)
|
||
span
|
||
margin-right: 4px
|
||
>table
|
||
overflow: auto
|
||
display: block
|
||
td,th
|
||
padding: 0
|
||
border: none
|
||
line-height: 1.5
|
||
margin: 0
|
||
background: transparent
|
||
border: none
|
||
scrollbar-codeblock()
|
||
tr
|
||
background: transparent
|
||
&:hover
|
||
background: transparent
|
||
|
||
|
||
.gutter
|
||
pointer-events: none
|
||
disable-select()
|
||
text-align: right
|
||
padding: 0 1em
|
||
border-width: 0
|
||
margin-left: 0
|
||
// position: sticky // 如果希望行标固定请打开此行；但是如果想在较窄屏幕上拥有较好的阅读体验，建议让行标跟随滚动。
|
||
// background: var(--block) // 如果希望行标固定请打开此行；但是如果想在较窄屏幕上拥有较好的阅读体验，建议让行标跟随滚动。
|
||
left: 0
|
||
z-index: 1
|
||
pre .line
|
||
color: var(--text-p4)
|
||
.code
|
||
pre
|
||
display: block
|
||
padding: .5em 1rem
|
||
.gutter+.code pre
|
||
padding-left: 0.25em
|
||
|
||
|
||
table:not([class])
|
||
border-collapse: collapse
|
||
|
||
article.md .highlight
|
||
.code
|
||
vertical-align: top
|
||
&:before
|
||
content: ""
|
||
position: absolute
|
||
top: 0
|
||
right: 0
|
||
padding: 4px 0.5rem
|
||
opacity: .25
|
||
font-weight: 700
|
||
|
||
&.yaml .code:before
|
||
content: "YAML"
|
||
&.json .code:before
|
||
content: "JSON"
|
||
|
||
&.diff .code:before
|
||
content: "diff"
|
||
|
||
&.html .code:before
|
||
content: "HTML"
|
||
&.js .code:before,&.javascript .code:before
|
||
content: "JS"
|
||
&.css .code:before
|
||
content: "CSS"
|
||
&.less .code:before
|
||
content: "Less"
|
||
&.stylus .code:before
|
||
content: "Stylus"
|
||
|
||
&.bash .code:before
|
||
content: "bash"
|
||
&.shell .code:before
|
||
content: "shell"
|
||
&.sh .code:before
|
||
content: "sh"
|
||
&.ini .code:before
|
||
content: "ini"
|
||
|
||
&.c .code:before
|
||
content: "C"
|
||
&.cpp .code:before
|
||
content: "C++"
|
||
&.objc .code:before,&.objectivec .code:before
|
||
content: "Objective-C"
|
||
&.swift .code:before
|
||
content: "Swift"
|
||
|
||
&.java .code:before
|
||
content: "Java"
|
||
&.python .code:before
|
||
content: "Python"
|
||
&.php .code:before
|
||
content: "PHP"
|
||
&.rust .code:before
|
||
content: "Rust"
|
||
&.sql .code:before
|
||
content: "SQL"
|
||
&.ruby .code:before
|
||
content: "Ruby"
|
||
&.makefile .code:before
|
||
content: "Makefile"
|
||
&.go .code:before
|
||
content: "Go"
|
||
&.typescript .code:before
|
||
content: "TypeScript"
|
||
|
||
|
||
|
||
$hl-keyword = #8959a8
|
||
$hl-blue = #1E80F0
|
||
$hl-cyan = #17AFCA
|
||
$hl-green = #3FA33F
|
||
$hl-light-blue = #6ECDF9
|
||
$hl-red = #EE2B29
|
||
$hl-orange = #FB3F1B
|
||
$hl-amber = #FD8607
|
||
$hl-text = var(--text-p1)
|
||
pre
|
||
.code:before
|
||
display: none
|
||
// 行
|
||
.line,.params
|
||
color: $hl-text
|
||
|
||
.line .addition
|
||
color: $hl-green
|
||
.line .deletion
|
||
color: $hl-red
|
||
|
||
.marked
|
||
background-color: alpha(#FED542, .4)
|
||
padding: 2px 8px 2px 0
|
||
border-radius: 2px
|
||
width: 100%
|
||
|
||
.title, .attr, .attribute
|
||
color: $color-md-indigo
|
||
|
||
// 注释
|
||
.comment
|
||
color: var(--text-p4)
|
||
font-style: italic
|
||
|
||
.keyword, .meta-keyword, .javascript .function
|
||
color: $hl-keyword
|
||
|
||
.type, .built_in, .tag .name
|
||
color: $color-md-blue
|
||
|
||
.variable, .regexp, .ruby .constant, .xml .tag .title, .xml .pi, .xml .doctype, .html .doctype, .css .id, .css .class, .css .pseudo
|
||
color: $hl-amber
|
||
|
||
.number, .preprocessor, .literal, .constant
|
||
color: $hl-amber
|
||
|
||
.class, .ruby .class .title, .css .rules .attribute
|
||
color: $color-md-orange
|
||
|
||
.string, .meta-string
|
||
color: darken($color-md-green, 10%)
|
||
|
||
.value, .inheritance, .header, .ruby .symbol, .xml .cdata
|
||
color: $color-md-green
|
||
|
||
.css .hexcolor
|
||
color: #66cccc
|
||
|
||
.function, .python .decorator, .python .title, .ruby .function .title, .ruby .title .keyword, .perl .sub, .javascript .title, .coffeescript .title
|
||
color: #6699cc
|
||
|
||
|
||
.highlight.html,.highlight.css,.highlight.less,.highlight.stylus
|
||
.line
|
||
.tag .name, .selector-tag
|
||
color: $hl-red
|
||
.selector-class, .selector-attr
|
||
color: $hl-amber
|
||
.attribute
|
||
color: $color-md-indigo
|
||
.number
|
||
color: $hl-cyan
|
||
|
||
|
||
.highlight.objc,.highlight.objectivec,.highlight.swift,.highlight.c
|
||
.line
|
||
.meta
|
||
color: $hl-keyword
|
||
.class
|
||
color: $hl-text
|
||
|
||
.highlight.json
|
||
.line
|
||
.attr
|
||
color: #E24F5A
|
||
.literal
|
||
color: $color-md-indigo
|
||
|
||
.highlight.yaml
|
||
.line
|
||
.attr
|
||
color: #E24F5A
|