Skip to content
This repository was archived by the owner on Mar 9, 2022. It is now read-only.

Commit

Permalink
feat(highlight): improve syntax style
Browse files Browse the repository at this point in the history
  • Loading branch information
@dillonzq
dillonzq committed Feb 10, 2020
1 parent 30defdf commit aa01ece
Show file tree
Hide file tree
Showing 4 changed files with 256 additions and 526 deletions.
245 changes: 60 additions & 185 deletions assets/css/_partial/_post/_code.scss
View file
Original file line number Diff line number Diff line change
@@ -1,43 +1,35 @@
code,
pre {
code {
font-size: $code-font-size;
font-family: $code-font-family;
padding: .2rem .4rem;
color: $code-color;
padding: 5px;
background: $code-background-color;

.dark-theme & {
color: $code-color-dark;
background: $code-background-color-dark;
}
}

.highlight > pre.chroma {
padding: 38px 7px 8px;
overflow-x: auto;
code, pre, .highlight table, .highlight tr, .highlight td {
background: $code-background-color;

.dark-theme & {
background: $code-background-color-dark;
}
}

.highlight > .chroma {
margin: 1em 0;
position: relative;
font-family: $code-font-family;

code {
padding: 0;
}
margin: 1rem 0;
line-height: round($code-font-size * 1.4);

pre {
code, pre {
margin: 0;
padding: 38px 7px 8px;
overflow-x: visible;
padding: 0;
}

&::after {
position: absolute;
top: 0;
right: 0;
left: 0;
padding: 2px 7px;
&::before {
display: block;
padding: .4rem;
font-family: $global-font-family;
font-size: $code-font-size;
font-weight: bold;
color: $code-info-color;
Expand All @@ -51,184 +43,67 @@ pre {
}

@each $type, $text in $code-type-map {
&.#{$type}::after {
&.#{$type}::before {
content: $text;
}
}

.lntd {
// Fix code block null line height and
// Synchronous gutter and code line highly.
line-height: round($code-font-size * 1.5);

&:first-child {
width: 10px;
}

&:last-child {
vertical-align: top;
}
}

table, tr, td {
margin: 0;
padding: 0;
width: 100%;
border-collapse: collapse;
border-color: $code-background-color;

.dark-theme & {
border-color: $code-background-color-dark;
}
border: none !important;
}

/* LineNumbersTable */
.lnt {
color: $code-info-color;
td {
padding: .2rem .4rem;
}

/* LineHighlight */
.hl {
display: block;
background-color: darken($code-background-color, 5%);
.lntd {
&:first-child {
width: 1.2rem;

.dark-theme & {
background-color: darken($code-background-color-dark, 5%);
/* LineNumbersTable */
.lnt {
color: $code-info-color;
}

/* LineHighlight */
.hl {
font-weight: bolder;
}
}

&:last-child {
/* LineHighlight */
.hl {
display: block;
background-color: darken($code-background-color, 5%);

.dark-theme & {
background-color: darken($code-background-color-dark, 5%);
}
}
}
}
}

.highlight {
/* Parentheses */ .p { color: #A9A9B3 }
/* Keyword */ .k { color: #859900 }
/* KeywordConstant */ .kc { color: #859900; font-weight: bold }
/* KeywordDeclaration */ .kd { color: #859900 }
/* KeywordNamespace */ .kn { color: #dc322f; font-weight: bold }
/* KeywordPseudo */ .kp { color: #859900 }
/* KeywordReserved */ .kr { color: #859900 }
/* KeywordType */ .kt { color: #859900; font-weight: bold }
/* Name */ .n { color: #268bd2 }
/* NameAttribute */ .na { color: #268bd2 }
/* NameBuiltin */ .nb { color: #cb4b16 }
/* NameBuiltinPseudo */ .bp { color: #268bd2 }
/* NameClass */ .nc { color: #cb4b16 }
/* NameConstant */ .no { color: #268bd2 }
/* NameDecorator */ .nd { color: #268bd2 }
/* NameEntity */ .ni { color: #268bd2 }
/* NameException */ .ne { color: #268bd2 }
/* NameFunction */ .nf { color: #268bd2 }
/* NameFunctionMagic */ .fm { color: #268bd2 }
/* NameLabel */ .nl { color: #268bd2 }
/* NameNamespace */ .nn { color: #268bd2 }
/* NameOther */ .nx { color: #268bd2 }
/* NameProperty */ .py { color: #268bd2 }
/* NameTag */ .nt { color: #268bd2; font-weight: bold }
/* NameVariable */ .nv { color: #268bd2 }
/* NameVariableClass */ .vc { color: #268bd2 }
/* NameVariableGlobal */ .vg { color: #268bd2 }
/* NameVariableInstance */ .vi { color: #268bd2 }
/* NameVariableMagic */ .vm { color: #268bd2 }
/* Literal */ .l { color: #2aa198 }
/* LiteralDate */ .ld { color: #2aa198 }
/* LiteralString */ .s { color: #2aa198 }
/* LiteralStringAffix */ .sa { color: #2aa198 }
/* LiteralStringBacktick */ .sb { color: #2aa198 }
/* LiteralStringChar */ .sc { color: #2aa198 }
/* LiteralStringDelimiter */ .dl { color: #2aa198 }
/* LiteralStringDoc */ .sd { color: #2aa198 }
/* LiteralStringDouble */ .s2 { color: #2aa198 }
/* LiteralStringEscape */ .se { color: #2aa198 }
/* LiteralStringHeredoc */ .sh { color: #2aa198 }
/* LiteralStringInterpol */ .si { color: #2aa198 }
/* LiteralStringOther */ .sx { color: #2aa198 }
/* LiteralStringRegex */ .sr { color: #2aa198 }
/* LiteralStringSingle */ .s1 { color: #2aa198 }
/* LiteralStringSymbol */ .ss { color: #2aa198 }
/* LiteralNumber */ .m { color: #2aa198; font-weight: bold }
/* LiteralNumberBin */ .mb { color: #2aa198; font-weight: bold }
/* LiteralNumberFloat */ .mf { color: #2aa198; font-weight: bold }
/* LiteralNumberHex */ .mh { color: #2aa198; font-weight: bold }
/* LiteralNumberInteger */ .mi { color: #2aa198; font-weight: bold }
/* LiteralNumberIntegerLong */ .il { color: #2aa198; font-weight: bold }
/* LiteralNumberOct */ .mo { color: #2aa198; font-weight: bold }
/* OperatorWord */ .ow { color: #859900 }
/* Comment */ .c { color: #93a1a1; font-style: italic }
/* CommentHashbang */ .ch { color: #93a1a1; font-style: italic }
/* CommentMultiline */ .cm { color: #93a1a1; font-style: italic }
/* CommentSingle */ .c1 { color: #93a1a1; font-style: italic }
/* CommentSpecial */ .cs { color: #93a1a1; font-style: italic }
/* CommentPreproc */ .cp { color: #93a1a1; font-style: italic }
/* CommentPreprocFile */ .cpf { color: #93a1a1; font-style: italic }
/* Generic */ .g { color: #d33682 }
/* GenericDeleted */ .gd { color: #b58900 }
/* GenericEmph */ .ge { color: #d33682 }
/* GenericError */ .gr { color: #d33682 }
/* GenericHeading */ .gh { color: #d33682 }
/* GenericInserted */ .gi { color: #859900 }
/* GenericOutput */ .go { color: #d33682 }
/* GenericPrompt */ .gp { color: #d33682 }
/* GenericStrong */ .gs { color: #d33682 }
/* GenericSubheading */ .gu { color: #d33682 }
/* GenericTraceback */ .gt { color: #d33682 }
font-family: $code-font-family;
/* Comment */ .c,
/* CommentHashbang */ .ch,
/* CommentMultiline */ .cm,
/* CommentSingle */ .c1,
/* CommentSpecial */ .cs,
/* CommentPreproc */ .cp,
/* CommentPreprocFile */ .cpf { font-style: italic }
/* GenericUnderline */ .gl { text-decoration: underline }

@each $class, $color in $code-highlight-color-map {
.#{$class} { color: $color; }
}

.dark-theme & {
background: $code-background-color-dark;

/* Parentheses */ .p { color: #A9A9B3 }
/* Keyword */ .k { color: #D371E3 }
/* KeywordConstant */ .kc { color: #D371E3 }
/* KeywordDeclaration */ .kd { color: #D371E3 }
/* KeywordNamespace */ .kn { color: #D371E3 }
/* KeywordPseudo */ .kp { color: #D371E3 }
/* KeywordReserved */ .kr { color: #D371E3 }
/* KeywordType */ .kt { color: #8be9fd }
/* NameAttribute */ .na { color: #41B1F5 }
/* NameBuiltin */ .nb { color: #8be9fd; font-style: italic }
/* NameClass */ .nc { color: #E5BF78 }
/* NameFunction */ .nf { color: #19B8C0 }
/* NameX */ .nx { color: #F16473 }
/* NameLabel */ .nl { color: #8be9fd; font-style: italic }
/* NameTag */ .nt { color: #D371E3 }
/* NameVariable */ .nv { color: #8be9fd; font-style: italic }
/* NameVariableClass */ .vc { color: #8be9fd; font-style: italic }
/* NameVariableGlobal */ .vg { color: #8be9fd; font-style: italic }
/* NameVariableInstance */ .vi { color: #8be9fd; font-style: italic }
/* LiteralString */ .s { color: #8BC56F }
/* LiteralStringAffix */ .sa { color: #8BC56F }
/* LiteralStringBacktick */ .sb { color: #8BC56F }
/* LiteralStringChar */ .sc { color: #8BC56F }
/* LiteralStringDelimiter */ .dl { color: #8BC56F }
/* LiteralStringDoc */ .sd { color: #8BC56F }
/* LiteralStringDouble */ .s2 { color: #8BC56F }
/* LiteralStringEscape */ .se { color: #8BC56F }
/* LiteralStringHeredoc */ .sh { color: #8BC56F }
/* LiteralStringInterpol */ .si { color: #8BC56F }
/* LiteralStringOther */ .sx { color: #8BC56F }
/* LiteralStringRegex */ .sr { color: #8BC56F }
/* LiteralStringSingle */ .s1 { color: #8BC56F }
/* LiteralStringSymbol */ .ss { color: #8BC56F }
/* LiteralNumber */ .m { color: #bd93f9 }
/* LiteralNumberBin */ .mb { color: #bd93f9 }
/* LiteralNumberFloat */ .mf { color: #bd93f9 }
/* LiteralNumberHex */ .mh { color: #bd93f9 }
/* LiteralNumberInteger */ .mi { color: #bd93f9 }
/* LiteralNumberIntegerLong */ .il { color: #bd93f9 }
/* LiteralNumberOct */ .mo { color: #bd93f9 }
/* Operator */ .o { color: #D371E3 }
/* OperatorWord */ .ow { color: #D371E3 }
/* Comment */ .c { color: #7E848F }
/* CommentHashbang */ .ch { color: #7E848F }
/* CommentMultiline */ .cm { color: #7E848F }
/* CommentSingle */ .c1 { color: #7E848F }
/* CommentSpecial */ .cs { color: #7E848F }
/* CommentPreproc */ .cp { color: #D371E3 }
/* CommentPreprocFile */ .cpf { color: #D371E3 }
/* GenericDeleted */ .gd { color: #8b080b }
/* GenericEmph */ .ge { text-decoration: underline }
/* GenericHeading */ .gh { font-weight: bold }
/* GenericInserted */ .gi { font-weight: bold }
/* GenericOutput */ .go { color: #44475a }
/* GenericSubheading */ .gu { font-weight: bold }
/* GenericUnderline */ .gl { text-decoration: underline }
@each $class, $color in $code-highlight-color-map-dark {
.#{$class} { color: $color; }
}
}
}
Loading

0 comments on commit aa01ece

Please sign in to comment.