hexo-theme-keep/source/css/layout/common/codeblock/highlight.styl

196 lines
2.8 KiB
Stylus

@require "code-theme.styl"
$code-block {
overflow: auto;
margin: 20px 0;
padding: 0;
font-size 0.96rem;
color: var(--highlight-foreground);
background: var(--highlight-background);
line-height: 1.5rem;
transition: all 0.5s ease;
}
pre, code {
font-family: "Source Code Pro", consolas, Menlo;
}
code {
padding: 5px;
word-wrap: break-word;
color: var(--code-foreground);
background: var(--code-background);
border-radius: 2px;
font-size: 0.96rem;
}
pre {
@extend $code-block;
padding: 10px;
code {
padding: 0;
color: var(--highlight-foreground);
background: none;
text-shadow: none;
}
}
.highlight {
@extend $code-block;
border-radius: 1px;
pre {
border: none;
margin: 0;
padding: 10px 0;
}
table {
margin: 0;
width: auto;
border: none;
border-spacing: unset;
}
td {
border: none;
padding: 0;
}
figcaption {
font-size: 1rem;
color: var(--highlight-foreground);
line-height: 1rem;
margin-bottom: 1rem;
a {
float: right;
color: var(--highlight-foreground);
&:hover {
border-bottom-color: var(--highlight-foreground);
}
}
}
.gutter pre {
padding-left: 10px;
padding-right: 10px;
color: var(--highlight-gutter-color);
text-align: center;
background-color: var(--highlight-gutter-bg-color);
}
.code pre {
width: 100%
padding-left: 10px
padding-right: 10px
background-color: var(--highlight-background)
}
.line {
height: 20px;
}
}
.gutter {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.gist table {
width: auto;
td {
border: none;
}
}
// For diff highlight
pre .deletion {
background: var(--highlight-deletion);
}
pre .addition {
background: var(--highlight-addition);
}
pre .meta {
color: var(--highlight-purple);
}
pre {
.comment {
color: var(--highlight-comment);
}
.variable
.attribute
.tag
.regexp
.ruby .constant
.xml .tag .title
.xml .pi
.xml .doctype
.html .doctype
.css .id
.css .class
.css .pseudo {
color: var(--highlight-red);
}
.number
.preprocessor
.built_in
.literal
.params
.constant
.command {
color: var(--highlight-orange);
}
.ruby .class .title
.css .rules .attribute
.string
.value
.inheritance
.header
.ruby .symbol
.xml .cdata
.special
.number
.formula {
color: highlight-green;
}
.title
.css .hexcolor {
color: var(--highlight-aqua);
}
.function
.python .decorator
.python .title
.ruby .function .title
.ruby .title .keyword
.perl .sub
.javascript .title
.coffeescript .title {
color: var(--highlight-blue);
}
.keyword
.javascript .function {
color: var(--highlight-purple);
}
}