use hugo's builtin Chroma for code highlight

This commit is contained in:
Reorx 2022-04-15 00:55:41 +08:00
parent 60380fe684
commit 33c1ba12e2
13 changed files with 799 additions and 43 deletions

View File

@ -1,2 +1,6 @@
run-example: run-example:
cd exampleSite && hugo server -D --gc -p 13131 cd exampleSite && hugo server -D --gc -p 13131
chroma-css:
hugo gen chromastyles --style=dracula > assets/css/lib/chroma-dark.css
hugo gen chromastyles --style=github > assets/css/lib/chroma-light.css

View File

@ -99,6 +99,18 @@ menu:
``` ```
## Highlight code with Chroma, no bullshit
PaperMod uses highlight.js to highlight code blocks.
In PaperModX, we use Chroma which is the recommended way in Hugo's
[official docs](https://gohugo.io/content-management/syntax-highlighting/#:~:text=Hugo%20uses%20Chroma%20as%20its%20code%20highlighter%3B%20it%20is%20built%20in%20Go%20and%20is%20really%2C%20really%20fast),
thus changing theme is easily supported.
By default the themes are `github` for light and `dracula` for dark,
you can change it by adding `chroma-light.css` and `chroma-dark.css`
in site's `assets/css/lib` directory.
## Social icons from Simple Icons ## Social icons from Simple Icons
Add social icons with `-simple` suffix from [Simple Icons](https://simpleicons.org/). Add social icons with `-simple` suffix from [Simple Icons](https://simpleicons.org/).

View File

@ -0,0 +1,10 @@
@import '../lib/chroma-light';
// for github theme, add a background color
.chroma {
background-color: #f6f8fa;
}
.dark {
@import '../lib/chroma-dark';
}

View File

@ -193,7 +193,6 @@ h6:hover .anchor {
.post-content .highlight:not(table) { .post-content .highlight:not(table) {
margin: 10px auto; margin: 10px auto;
background: var(--hljs-bg) !important;
border-radius: var(--radius); border-radius: var(--radius);
} }
@ -230,22 +229,27 @@ h6:hover .anchor {
display: none; display: none;
} }
/* code block */
.post-content .chroma {
border-radius: var(--radius);
}
/* TODO refactor this shit */
.post-content code { .post-content code {
/* inline code */
background-color: var(--code-bg);
margin: auto 4px; margin: auto 4px;
padding: 4px 6px; padding: 4px 6px;
font-size: 0.78em; font-size: 0.78em;
line-height: 1.5; line-height: 1.5;
background: var(--code-bg);
border-radius: 2px; border-radius: 2px;
} }
.post-content pre code { .post-content pre code {
/* reset inline code */
background-color: unset;
display: block; display: block;
margin: auto 0; margin: auto 0;
padding: 10px; padding: 10px;
color: rgb(213, 213, 214);
background: var(--hljs-bg) !important;
border-radius: var(--radius);
overflow-x: auto; overflow-x: auto;
word-break: break-all; word-break: break-all;
} }
@ -416,7 +420,7 @@ h6:hover .anchor {
.post-content :not(table) ::-webkit-scrollbar-thumb { .post-content :not(table) ::-webkit-scrollbar-thumb {
border: 2px solid var(--hljs-bg); border: 2px solid var(--code-bg);
background: rgb(113, 113, 117); background: rgb(113, 113, 117);
} }

View File

@ -14,7 +14,6 @@
--secondary: rgb(108, 108, 108); --secondary: rgb(108, 108, 108);
--tertiary: rgb(214, 214, 214); --tertiary: rgb(214, 214, 214);
--content: rgb(31, 31, 31); --content: rgb(31, 31, 31);
--hljs-bg: rgb(28, 29, 33);
--code-bg: rgb(245, 245, 245); --code-bg: rgb(245, 245, 245);
--border: rgb(238, 238, 238); --border: rgb(238, 238, 238);
--link-color: var(--primary); --link-color: var(--primary);
@ -31,7 +30,6 @@
--secondary: rgb(155, 156, 157); --secondary: rgb(155, 156, 157);
--tertiary: rgb(65, 66, 68); --tertiary: rgb(65, 66, 68);
--content: rgb(196, 196, 197); --content: rgb(196, 196, 197);
--hljs-bg: rgb(46, 46, 51);
--code-bg: rgb(55, 56, 62); --code-bg: rgb(55, 56, 62);
--border: rgb(51, 51, 51); --border: rgb(51, 51, 51);
--link-color: var(--primary); --link-color: var(--primary);

View File

@ -0,0 +1,82 @@
/* Background */ .chroma { color: #f8f8f2; background-color: #282a36 }
/* Other */ .chroma .x { }
/* Error */ .chroma .err { }
/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; width: auto; overflow: auto; display: block; }
/* LineHighlight */ .chroma .hl { display: block; width: 100%;background-color: #ffffcc }
/* LineNumbersTable */ .chroma .lnt { margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
/* LineNumbers */ .chroma .ln { margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
/* Keyword */ .chroma .k { color: #ff79c6 }
/* KeywordConstant */ .chroma .kc { color: #ff79c6 }
/* KeywordDeclaration */ .chroma .kd { color: #8be9fd; font-style: italic }
/* KeywordNamespace */ .chroma .kn { color: #ff79c6 }
/* KeywordPseudo */ .chroma .kp { color: #ff79c6 }
/* KeywordReserved */ .chroma .kr { color: #ff79c6 }
/* KeywordType */ .chroma .kt { color: #8be9fd }
/* Name */ .chroma .n { }
/* NameAttribute */ .chroma .na { color: #50fa7b }
/* NameBuiltin */ .chroma .nb { color: #8be9fd; font-style: italic }
/* NameBuiltinPseudo */ .chroma .bp { }
/* NameClass */ .chroma .nc { color: #50fa7b }
/* NameConstant */ .chroma .no { }
/* NameDecorator */ .chroma .nd { }
/* NameEntity */ .chroma .ni { }
/* NameException */ .chroma .ne { }
/* NameFunction */ .chroma .nf { color: #50fa7b }
/* NameFunctionMagic */ .chroma .fm { }
/* NameLabel */ .chroma .nl { color: #8be9fd; font-style: italic }
/* NameNamespace */ .chroma .nn { }
/* NameOther */ .chroma .nx { }
/* NameProperty */ .chroma .py { }
/* NameTag */ .chroma .nt { color: #ff79c6 }
/* NameVariable */ .chroma .nv { color: #8be9fd; font-style: italic }
/* NameVariableClass */ .chroma .vc { color: #8be9fd; font-style: italic }
/* NameVariableGlobal */ .chroma .vg { color: #8be9fd; font-style: italic }
/* NameVariableInstance */ .chroma .vi { color: #8be9fd; font-style: italic }
/* NameVariableMagic */ .chroma .vm { }
/* Literal */ .chroma .l { }
/* LiteralDate */ .chroma .ld { }
/* LiteralString */ .chroma .s { color: #f1fa8c }
/* LiteralStringAffix */ .chroma .sa { color: #f1fa8c }
/* LiteralStringBacktick */ .chroma .sb { color: #f1fa8c }
/* LiteralStringChar */ .chroma .sc { color: #f1fa8c }
/* LiteralStringDelimiter */ .chroma .dl { color: #f1fa8c }
/* LiteralStringDoc */ .chroma .sd { color: #f1fa8c }
/* LiteralStringDouble */ .chroma .s2 { color: #f1fa8c }
/* LiteralStringEscape */ .chroma .se { color: #f1fa8c }
/* LiteralStringHeredoc */ .chroma .sh { color: #f1fa8c }
/* LiteralStringInterpol */ .chroma .si { color: #f1fa8c }
/* LiteralStringOther */ .chroma .sx { color: #f1fa8c }
/* LiteralStringRegex */ .chroma .sr { color: #f1fa8c }
/* LiteralStringSingle */ .chroma .s1 { color: #f1fa8c }
/* LiteralStringSymbol */ .chroma .ss { color: #f1fa8c }
/* LiteralNumber */ .chroma .m { color: #bd93f9 }
/* LiteralNumberBin */ .chroma .mb { color: #bd93f9 }
/* LiteralNumberFloat */ .chroma .mf { color: #bd93f9 }
/* LiteralNumberHex */ .chroma .mh { color: #bd93f9 }
/* LiteralNumberInteger */ .chroma .mi { color: #bd93f9 }
/* LiteralNumberIntegerLong */ .chroma .il { color: #bd93f9 }
/* LiteralNumberOct */ .chroma .mo { color: #bd93f9 }
/* Operator */ .chroma .o { color: #ff79c6 }
/* OperatorWord */ .chroma .ow { color: #ff79c6 }
/* Punctuation */ .chroma .p { }
/* Comment */ .chroma .c { color: #6272a4 }
/* CommentHashbang */ .chroma .ch { color: #6272a4 }
/* CommentMultiline */ .chroma .cm { color: #6272a4 }
/* CommentSingle */ .chroma .c1 { color: #6272a4 }
/* CommentSpecial */ .chroma .cs { color: #6272a4 }
/* CommentPreproc */ .chroma .cp { color: #ff79c6 }
/* CommentPreprocFile */ .chroma .cpf { color: #ff79c6 }
/* Generic */ .chroma .g { }
/* GenericDeleted */ .chroma .gd { color: #ff5555 }
/* GenericEmph */ .chroma .ge { text-decoration: underline }
/* GenericError */ .chroma .gr { }
/* GenericHeading */ .chroma .gh { font-weight: bold }
/* GenericInserted */ .chroma .gi { color: #50fa7b; font-weight: bold }
/* GenericOutput */ .chroma .go { color: #44475a }
/* GenericPrompt */ .chroma .gp { }
/* GenericStrong */ .chroma .gs { }
/* GenericSubheading */ .chroma .gu { font-weight: bold }
/* GenericTraceback */ .chroma .gt { }
/* GenericUnderline */ .chroma .gl { text-decoration: underline }
/* TextWhitespace */ .chroma .w { }

View File

@ -0,0 +1,82 @@
/* Background */ .chroma { background-color: #ffffff }
/* Other */ .chroma .x { }
/* Error */ .chroma .err { color: #a61717; background-color: #e3d2d2 }
/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; width: auto; overflow: auto; display: block; }
/* LineHighlight */ .chroma .hl { display: block; width: 100%;background-color: #ffffcc }
/* LineNumbersTable */ .chroma .lnt { margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
/* LineNumbers */ .chroma .ln { margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
/* Keyword */ .chroma .k { color: #000000; font-weight: bold }
/* KeywordConstant */ .chroma .kc { color: #000000; font-weight: bold }
/* KeywordDeclaration */ .chroma .kd { color: #000000; font-weight: bold }
/* KeywordNamespace */ .chroma .kn { color: #000000; font-weight: bold }
/* KeywordPseudo */ .chroma .kp { color: #000000; font-weight: bold }
/* KeywordReserved */ .chroma .kr { color: #000000; font-weight: bold }
/* KeywordType */ .chroma .kt { color: #445588; font-weight: bold }
/* Name */ .chroma .n { }
/* NameAttribute */ .chroma .na { color: #008080 }
/* NameBuiltin */ .chroma .nb { color: #0086b3 }
/* NameBuiltinPseudo */ .chroma .bp { color: #999999 }
/* NameClass */ .chroma .nc { color: #445588; font-weight: bold }
/* NameConstant */ .chroma .no { color: #008080 }
/* NameDecorator */ .chroma .nd { color: #3c5d5d; font-weight: bold }
/* NameEntity */ .chroma .ni { color: #800080 }
/* NameException */ .chroma .ne { color: #990000; font-weight: bold }
/* NameFunction */ .chroma .nf { color: #990000; font-weight: bold }
/* NameFunctionMagic */ .chroma .fm { }
/* NameLabel */ .chroma .nl { color: #990000; font-weight: bold }
/* NameNamespace */ .chroma .nn { color: #555555 }
/* NameOther */ .chroma .nx { }
/* NameProperty */ .chroma .py { }
/* NameTag */ .chroma .nt { color: #000080 }
/* NameVariable */ .chroma .nv { color: #008080 }
/* NameVariableClass */ .chroma .vc { color: #008080 }
/* NameVariableGlobal */ .chroma .vg { color: #008080 }
/* NameVariableInstance */ .chroma .vi { color: #008080 }
/* NameVariableMagic */ .chroma .vm { }
/* Literal */ .chroma .l { }
/* LiteralDate */ .chroma .ld { }
/* LiteralString */ .chroma .s { color: #dd1144 }
/* LiteralStringAffix */ .chroma .sa { color: #dd1144 }
/* LiteralStringBacktick */ .chroma .sb { color: #dd1144 }
/* LiteralStringChar */ .chroma .sc { color: #dd1144 }
/* LiteralStringDelimiter */ .chroma .dl { color: #dd1144 }
/* LiteralStringDoc */ .chroma .sd { color: #dd1144 }
/* LiteralStringDouble */ .chroma .s2 { color: #dd1144 }
/* LiteralStringEscape */ .chroma .se { color: #dd1144 }
/* LiteralStringHeredoc */ .chroma .sh { color: #dd1144 }
/* LiteralStringInterpol */ .chroma .si { color: #dd1144 }
/* LiteralStringOther */ .chroma .sx { color: #dd1144 }
/* LiteralStringRegex */ .chroma .sr { color: #009926 }
/* LiteralStringSingle */ .chroma .s1 { color: #dd1144 }
/* LiteralStringSymbol */ .chroma .ss { color: #990073 }
/* LiteralNumber */ .chroma .m { color: #009999 }
/* LiteralNumberBin */ .chroma .mb { color: #009999 }
/* LiteralNumberFloat */ .chroma .mf { color: #009999 }
/* LiteralNumberHex */ .chroma .mh { color: #009999 }
/* LiteralNumberInteger */ .chroma .mi { color: #009999 }
/* LiteralNumberIntegerLong */ .chroma .il { color: #009999 }
/* LiteralNumberOct */ .chroma .mo { color: #009999 }
/* Operator */ .chroma .o { color: #000000; font-weight: bold }
/* OperatorWord */ .chroma .ow { color: #000000; font-weight: bold }
/* Punctuation */ .chroma .p { }
/* Comment */ .chroma .c { color: #999988; font-style: italic }
/* CommentHashbang */ .chroma .ch { color: #999988; font-style: italic }
/* CommentMultiline */ .chroma .cm { color: #999988; font-style: italic }
/* CommentSingle */ .chroma .c1 { color: #999988; font-style: italic }
/* CommentSpecial */ .chroma .cs { color: #999999; font-weight: bold; font-style: italic }
/* CommentPreproc */ .chroma .cp { color: #999999; font-weight: bold; font-style: italic }
/* CommentPreprocFile */ .chroma .cpf { color: #999999; font-weight: bold; font-style: italic }
/* Generic */ .chroma .g { }
/* GenericDeleted */ .chroma .gd { color: #000000; background-color: #ffdddd }
/* GenericEmph */ .chroma .ge { color: #000000; font-style: italic }
/* GenericError */ .chroma .gr { color: #aa0000 }
/* GenericHeading */ .chroma .gh { color: #999999 }
/* GenericInserted */ .chroma .gi { color: #000000; background-color: #ddffdd }
/* GenericOutput */ .chroma .go { color: #888888 }
/* GenericPrompt */ .chroma .gp { color: #555555 }
/* GenericStrong */ .chroma .gs { font-weight: bold }
/* GenericSubheading */ .chroma .gu { color: #aaaaaa }
/* GenericTraceback */ .chroma .gt { color: #aa0000 }
/* GenericUnderline */ .chroma .gl { text-decoration: underline }
/* TextWhitespace */ .chroma .w { color: #bbbbbb }

View File

@ -11,7 +11,6 @@ buildDrafts: false
buildFuture: false buildFuture: false
buildExpired: false buildExpired: false
enableEmoji: true enableEmoji: true
pygmentsUseClasses: true
# googleAnalytics: UA-123-45 # googleAnalytics: UA-123-45
minify: minify:
@ -94,6 +93,7 @@ params:
mainSections: mainSections:
- docs - docs
- posts - posts
disableAnchoredHeadings: true
defaultTheme: auto defaultTheme: auto
# disableThemeToggle: true # disableThemeToggle: true
@ -188,13 +188,10 @@ markup:
goldmark: goldmark:
renderer: renderer:
unsafe: true unsafe: true
# highlight: highlight:
# # anchorLineNos: true style: dracula
# codeFences: true lineNos: true
# guessSyntax: true noClasses: false
# lineNos: true
# # noClasses: false
# style: monokai
privacy: privacy:
vimeo: vimeo:

View File

@ -250,32 +250,15 @@ ex.
## Using Hugo's Syntax highlighter "chroma" ## Using Hugo's Syntax highlighter "chroma"
1. Set hugo's markdown styling in site `config.yml` Set hugo's markdown styling in site `config.yml`
```yml ```yml
markup: markup:
highlight: highlight:
# anchorLineNos: true noClasses: false
codeFences: true
guessSyntax: true
lineNos: true
# noClasses: false
style: monokai
``` ```
2. If you want `lineNos: true`, the background won't be proper. `noClasses` has to be `false` to make highlight color follows the theme.
This will only work with `noClasses: false` or `pygmentsUseClasses: true`.
Read [Generate Syntax Highlighter CSS](https://gohugo.io/content-management/syntax-highlighting/#generate-syntax-highlighter-css)
Add the following to `assets/css/extended/custom.css`
```css
.chroma {
background-color: unset;
}
```
More Info : [Configure Markup - Highlight](https://gohugo.io/getting-started/configuration-markup#highlight)
--- ---

View File

@ -99,6 +99,18 @@ menu:
``` ```
## Highlight code with Chroma, no bullshit
PaperMod uses highlight.js to highlight code blocks.
In PaperModX, we use Chroma which is the recommended way in Hugo's
[official docs](https://gohugo.io/content-management/syntax-highlighting/#:~:text=Hugo%20uses%20Chroma%20as%20its%20code%20highlighter%3B%20it%20is%20built%20in%20Go%20and%20is%20really%2C%20really%20fast),
thus changing theme is easily supported.
By default the themes are `github` for light and `dracula` for dark,
you can change it by adding `chroma-light.css` and `chroma-dark.css`
in site's `assets/css/lib` directory.
## Social icons from Simple Icons ## Social icons from Simple Icons
Add social icons with `-simple` suffix from [Simple Icons](https://simpleicons.org/). Add social icons with `-simple` suffix from [Simple Icons](https://simpleicons.org/).

View File

@ -0,0 +1,571 @@
/* Background */
.chroma {
background-color: #ffffff; }
/* Other */
/* Error */
.chroma .err {
color: #a61717;
background-color: #e3d2d2; }
/* LineTableTD */
.chroma .lntd {
vertical-align: top;
padding: 0;
margin: 0;
border: 0; }
/* LineTable */
.chroma .lntable {
border-spacing: 0;
padding: 0;
margin: 0;
border: 0;
width: auto;
overflow: auto;
display: block; }
/* LineHighlight */
.chroma .hl {
display: block;
width: 100%;
background-color: #ffffcc; }
/* LineNumbersTable */
.chroma .lnt {
margin-right: 0.4em;
padding: 0 0.4em 0 0.4em;
color: #7f7f7f; }
/* LineNumbers */
.chroma .ln {
margin-right: 0.4em;
padding: 0 0.4em 0 0.4em;
color: #7f7f7f; }
/* Keyword */
.chroma .k {
color: #000000;
font-weight: bold; }
/* KeywordConstant */
.chroma .kc {
color: #000000;
font-weight: bold; }
/* KeywordDeclaration */
.chroma .kd {
color: #000000;
font-weight: bold; }
/* KeywordNamespace */
.chroma .kn {
color: #000000;
font-weight: bold; }
/* KeywordPseudo */
.chroma .kp {
color: #000000;
font-weight: bold; }
/* KeywordReserved */
.chroma .kr {
color: #000000;
font-weight: bold; }
/* KeywordType */
.chroma .kt {
color: #445588;
font-weight: bold; }
/* Name */
/* NameAttribute */
.chroma .na {
color: #008080; }
/* NameBuiltin */
.chroma .nb {
color: #0086b3; }
/* NameBuiltinPseudo */
.chroma .bp {
color: #999999; }
/* NameClass */
.chroma .nc {
color: #445588;
font-weight: bold; }
/* NameConstant */
.chroma .no {
color: #008080; }
/* NameDecorator */
.chroma .nd {
color: #3c5d5d;
font-weight: bold; }
/* NameEntity */
.chroma .ni {
color: #800080; }
/* NameException */
.chroma .ne {
color: #990000;
font-weight: bold; }
/* NameFunction */
.chroma .nf {
color: #990000;
font-weight: bold; }
/* NameFunctionMagic */
/* NameLabel */
.chroma .nl {
color: #990000;
font-weight: bold; }
/* NameNamespace */
.chroma .nn {
color: #555555; }
/* NameOther */
/* NameProperty */
/* NameTag */
.chroma .nt {
color: #000080; }
/* NameVariable */
.chroma .nv {
color: #008080; }
/* NameVariableClass */
.chroma .vc {
color: #008080; }
/* NameVariableGlobal */
.chroma .vg {
color: #008080; }
/* NameVariableInstance */
.chroma .vi {
color: #008080; }
/* NameVariableMagic */
/* Literal */
/* LiteralDate */
/* LiteralString */
.chroma .s {
color: #dd1144; }
/* LiteralStringAffix */
.chroma .sa {
color: #dd1144; }
/* LiteralStringBacktick */
.chroma .sb {
color: #dd1144; }
/* LiteralStringChar */
.chroma .sc {
color: #dd1144; }
/* LiteralStringDelimiter */
.chroma .dl {
color: #dd1144; }
/* LiteralStringDoc */
.chroma .sd {
color: #dd1144; }
/* LiteralStringDouble */
.chroma .s2 {
color: #dd1144; }
/* LiteralStringEscape */
.chroma .se {
color: #dd1144; }
/* LiteralStringHeredoc */
.chroma .sh {
color: #dd1144; }
/* LiteralStringInterpol */
.chroma .si {
color: #dd1144; }
/* LiteralStringOther */
.chroma .sx {
color: #dd1144; }
/* LiteralStringRegex */
.chroma .sr {
color: #009926; }
/* LiteralStringSingle */
.chroma .s1 {
color: #dd1144; }
/* LiteralStringSymbol */
.chroma .ss {
color: #990073; }
/* LiteralNumber */
.chroma .m {
color: #009999; }
/* LiteralNumberBin */
.chroma .mb {
color: #009999; }
/* LiteralNumberFloat */
.chroma .mf {
color: #009999; }
/* LiteralNumberHex */
.chroma .mh {
color: #009999; }
/* LiteralNumberInteger */
.chroma .mi {
color: #009999; }
/* LiteralNumberIntegerLong */
.chroma .il {
color: #009999; }
/* LiteralNumberOct */
.chroma .mo {
color: #009999; }
/* Operator */
.chroma .o {
color: #000000;
font-weight: bold; }
/* OperatorWord */
.chroma .ow {
color: #000000;
font-weight: bold; }
/* Punctuation */
/* Comment */
.chroma .c {
color: #999988;
font-style: italic; }
/* CommentHashbang */
.chroma .ch {
color: #999988;
font-style: italic; }
/* CommentMultiline */
.chroma .cm {
color: #999988;
font-style: italic; }
/* CommentSingle */
.chroma .c1 {
color: #999988;
font-style: italic; }
/* CommentSpecial */
.chroma .cs {
color: #999999;
font-weight: bold;
font-style: italic; }
/* CommentPreproc */
.chroma .cp {
color: #999999;
font-weight: bold;
font-style: italic; }
/* CommentPreprocFile */
.chroma .cpf {
color: #999999;
font-weight: bold;
font-style: italic; }
/* Generic */
/* GenericDeleted */
.chroma .gd {
color: #000000;
background-color: #ffdddd; }
/* GenericEmph */
.chroma .ge {
color: #000000;
font-style: italic; }
/* GenericError */
.chroma .gr {
color: #aa0000; }
/* GenericHeading */
.chroma .gh {
color: #999999; }
/* GenericInserted */
.chroma .gi {
color: #000000;
background-color: #ddffdd; }
/* GenericOutput */
.chroma .go {
color: #888888; }
/* GenericPrompt */
.chroma .gp {
color: #555555; }
/* GenericStrong */
.chroma .gs {
font-weight: bold; }
/* GenericSubheading */
.chroma .gu {
color: #aaaaaa; }
/* GenericTraceback */
.chroma .gt {
color: #aa0000; }
/* GenericUnderline */
.chroma .gl {
text-decoration: underline; }
/* TextWhitespace */
.chroma .w {
color: #bbbbbb; }
.chroma {
background-color: #f6f8fa; }
.dark {
/* Background */
/* Other */
/* Error */
/* LineTableTD */
/* LineTable */
/* LineHighlight */
/* LineNumbersTable */
/* LineNumbers */
/* Keyword */
/* KeywordConstant */
/* KeywordDeclaration */
/* KeywordNamespace */
/* KeywordPseudo */
/* KeywordReserved */
/* KeywordType */
/* Name */
/* NameAttribute */
/* NameBuiltin */
/* NameBuiltinPseudo */
/* NameClass */
/* NameConstant */
/* NameDecorator */
/* NameEntity */
/* NameException */
/* NameFunction */
/* NameFunctionMagic */
/* NameLabel */
/* NameNamespace */
/* NameOther */
/* NameProperty */
/* NameTag */
/* NameVariable */
/* NameVariableClass */
/* NameVariableGlobal */
/* NameVariableInstance */
/* NameVariableMagic */
/* Literal */
/* LiteralDate */
/* LiteralString */
/* LiteralStringAffix */
/* LiteralStringBacktick */
/* LiteralStringChar */
/* LiteralStringDelimiter */
/* LiteralStringDoc */
/* LiteralStringDouble */
/* LiteralStringEscape */
/* LiteralStringHeredoc */
/* LiteralStringInterpol */
/* LiteralStringOther */
/* LiteralStringRegex */
/* LiteralStringSingle */
/* LiteralStringSymbol */
/* LiteralNumber */
/* LiteralNumberBin */
/* LiteralNumberFloat */
/* LiteralNumberHex */
/* LiteralNumberInteger */
/* LiteralNumberIntegerLong */
/* LiteralNumberOct */
/* Operator */
/* OperatorWord */
/* Punctuation */
/* Comment */
/* CommentHashbang */
/* CommentMultiline */
/* CommentSingle */
/* CommentSpecial */
/* CommentPreproc */
/* CommentPreprocFile */
/* Generic */
/* GenericDeleted */
/* GenericEmph */
/* GenericError */
/* GenericHeading */
/* GenericInserted */
/* GenericOutput */
/* GenericPrompt */
/* GenericStrong */
/* GenericSubheading */
/* GenericTraceback */
/* GenericUnderline */
/* TextWhitespace */ }
.dark .chroma {
color: #f8f8f2;
background-color: #282a36; }
.dark .chroma .lntd {
vertical-align: top;
padding: 0;
margin: 0;
border: 0; }
.dark .chroma .lntable {
border-spacing: 0;
padding: 0;
margin: 0;
border: 0;
width: auto;
overflow: auto;
display: block; }
.dark .chroma .hl {
display: block;
width: 100%;
background-color: #ffffcc; }
.dark .chroma .lnt {
margin-right: 0.4em;
padding: 0 0.4em 0 0.4em;
color: #7f7f7f; }
.dark .chroma .ln {
margin-right: 0.4em;
padding: 0 0.4em 0 0.4em;
color: #7f7f7f; }
.dark .chroma .k {
color: #ff79c6; }
.dark .chroma .kc {
color: #ff79c6; }
.dark .chroma .kd {
color: #8be9fd;
font-style: italic; }
.dark .chroma .kn {
color: #ff79c6; }
.dark .chroma .kp {
color: #ff79c6; }
.dark .chroma .kr {
color: #ff79c6; }
.dark .chroma .kt {
color: #8be9fd; }
.dark .chroma .na {
color: #50fa7b; }
.dark .chroma .nb {
color: #8be9fd;
font-style: italic; }
.dark .chroma .nc {
color: #50fa7b; }
.dark .chroma .nf {
color: #50fa7b; }
.dark .chroma .nl {
color: #8be9fd;
font-style: italic; }
.dark .chroma .nt {
color: #ff79c6; }
.dark .chroma .nv {
color: #8be9fd;
font-style: italic; }
.dark .chroma .vc {
color: #8be9fd;
font-style: italic; }
.dark .chroma .vg {
color: #8be9fd;
font-style: italic; }
.dark .chroma .vi {
color: #8be9fd;
font-style: italic; }
.dark .chroma .s {
color: #f1fa8c; }
.dark .chroma .sa {
color: #f1fa8c; }
.dark .chroma .sb {
color: #f1fa8c; }
.dark .chroma .sc {
color: #f1fa8c; }
.dark .chroma .dl {
color: #f1fa8c; }
.dark .chroma .sd {
color: #f1fa8c; }
.dark .chroma .s2 {
color: #f1fa8c; }
.dark .chroma .se {
color: #f1fa8c; }
.dark .chroma .sh {
color: #f1fa8c; }
.dark .chroma .si {
color: #f1fa8c; }
.dark .chroma .sx {
color: #f1fa8c; }
.dark .chroma .sr {
color: #f1fa8c; }
.dark .chroma .s1 {
color: #f1fa8c; }
.dark .chroma .ss {
color: #f1fa8c; }
.dark .chroma .m {
color: #bd93f9; }
.dark .chroma .mb {
color: #bd93f9; }
.dark .chroma .mf {
color: #bd93f9; }
.dark .chroma .mh {
color: #bd93f9; }
.dark .chroma .mi {
color: #bd93f9; }
.dark .chroma .il {
color: #bd93f9; }
.dark .chroma .mo {
color: #bd93f9; }
.dark .chroma .o {
color: #ff79c6; }
.dark .chroma .ow {
color: #ff79c6; }
.dark .chroma .c {
color: #6272a4; }
.dark .chroma .ch {
color: #6272a4; }
.dark .chroma .cm {
color: #6272a4; }
.dark .chroma .c1 {
color: #6272a4; }
.dark .chroma .cs {
color: #6272a4; }
.dark .chroma .cp {
color: #ff79c6; }
.dark .chroma .cpf {
color: #ff79c6; }
.dark .chroma .gd {
color: #ff5555; }
.dark .chroma .ge {
text-decoration: underline; }
.dark .chroma .gh {
font-weight: bold; }
.dark .chroma .gi {
color: #50fa7b;
font-weight: bold; }
.dark .chroma .go {
color: #44475a; }
.dark .chroma .gu {
font-weight: bold; }
.dark .chroma .gl {
text-decoration: underline; }

View File

@ -0,0 +1 @@
{"Target":"css/common/highlight.css","MediaType":"text/css","Data":{}}

View File

@ -38,9 +38,10 @@
{{- $reset := (resources.Get "css/core/reset.css") }} {{- $reset := (resources.Get "css/core/reset.css") }}
{{- $media := (resources.Get "css/core/zmedia.css") }} {{- $media := (resources.Get "css/core/zmedia.css") }}
{{- $common := (resources.Match "css/common/*.css") | resources.Concat "assets/css/common.css" }} {{- $common := (resources.Match "css/common/*.css") | resources.Concat "assets/css/common.css" }}
{{- $commonHighlight := (resources.Get "css/common/highlight.scss") | resources.ToCSS }}
{{- /* order is important */}} {{- /* order is important */}}
{{- $core := (slice $theme_vars $reset $common $media) | resources.Concat "assets/css/core.css" }} {{- $core := (slice $theme_vars $reset $common $commonHighlight $media) | resources.Concat "assets/css/core.css" }}
{{- $extended := (resources.Match "css/extended/*.css") | resources.Concat "assets/css/extended.css" }} {{- $extended := (resources.Match "css/extended/*.css") | resources.Concat "assets/css/extended.css" }}
{{- /* bundle all required css */}} {{- /* bundle all required css */}}
@ -98,7 +99,6 @@
--secondary: rgb(155, 156, 157); --secondary: rgb(155, 156, 157);
--tertiary: rgb(65, 66, 68); --tertiary: rgb(65, 66, 68);
--content: rgb(196, 196, 197); --content: rgb(196, 196, 197);
--hljs-bg: rgb(46, 46, 51);
--code-bg: rgb(55, 56, 62); --code-bg: rgb(55, 56, 62);
--border: rgb(51, 51, 51); --border: rgb(51, 51, 51);
} }