use hugo's builtin Chroma for code highlight
This commit is contained in:
Reorx
parent
60380fe684
commit
33c1ba12e2
4
Makefile
4
Makefile
|
|
@ -1,2 +1,6 @@
|
|||
run-example:
|
||||
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
|
||||
|
|
|
|||
12
README.md
12
README.md
|
|
@ -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
|
||||
|
||||
Add social icons with `-simple` suffix from [Simple Icons](https://simpleicons.org/).
|
||||
|
|
|
|||
|
|
@ -0,0 +1,10 @@
|
|||
@import '../lib/chroma-light';
|
||||
|
||||
// for github theme, add a background color
|
||||
.chroma {
|
||||
background-color: #f6f8fa;
|
||||
}
|
||||
|
||||
.dark {
|
||||
@import '../lib/chroma-dark';
|
||||
}
|
||||
|
|
@ -193,7 +193,6 @@ h6:hover .anchor {
|
|||
|
||||
.post-content .highlight:not(table) {
|
||||
margin: 10px auto;
|
||||
background: var(--hljs-bg) !important;
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
|
||||
|
|
@ -230,22 +229,27 @@ h6:hover .anchor {
|
|||
display: none;
|
||||
}
|
||||
|
||||
/* code block */
|
||||
.post-content .chroma {
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
/* TODO refactor this shit */
|
||||
.post-content code {
|
||||
/* inline code */
|
||||
background-color: var(--code-bg);
|
||||
|
||||
margin: auto 4px;
|
||||
padding: 4px 6px;
|
||||
font-size: 0.78em;
|
||||
line-height: 1.5;
|
||||
background: var(--code-bg);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.post-content pre code {
|
||||
/* reset inline code */
|
||||
background-color: unset;
|
||||
display: block;
|
||||
margin: auto 0;
|
||||
padding: 10px;
|
||||
color: rgb(213, 213, 214);
|
||||
background: var(--hljs-bg) !important;
|
||||
border-radius: var(--radius);
|
||||
overflow-x: auto;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
|
@ -416,7 +420,7 @@ h6:hover .anchor {
|
|||
|
||||
|
||||
.post-content :not(table) ::-webkit-scrollbar-thumb {
|
||||
border: 2px solid var(--hljs-bg);
|
||||
border: 2px solid var(--code-bg);
|
||||
background: rgb(113, 113, 117);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -14,7 +14,6 @@
|
|||
--secondary: rgb(108, 108, 108);
|
||||
--tertiary: rgb(214, 214, 214);
|
||||
--content: rgb(31, 31, 31);
|
||||
--hljs-bg: rgb(28, 29, 33);
|
||||
--code-bg: rgb(245, 245, 245);
|
||||
--border: rgb(238, 238, 238);
|
||||
--link-color: var(--primary);
|
||||
|
|
@ -31,7 +30,6 @@
|
|||
--secondary: rgb(155, 156, 157);
|
||||
--tertiary: rgb(65, 66, 68);
|
||||
--content: rgb(196, 196, 197);
|
||||
--hljs-bg: rgb(46, 46, 51);
|
||||
--code-bg: rgb(55, 56, 62);
|
||||
--border: rgb(51, 51, 51);
|
||||
--link-color: var(--primary);
|
||||
|
|
|
|||
|
|
@ -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 { }
|
||||
|
|
@ -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 }
|
||||
|
|
@ -11,7 +11,6 @@ buildDrafts: false
|
|||
buildFuture: false
|
||||
buildExpired: false
|
||||
enableEmoji: true
|
||||
pygmentsUseClasses: true
|
||||
# googleAnalytics: UA-123-45
|
||||
|
||||
minify:
|
||||
|
|
@ -94,6 +93,7 @@ params:
|
|||
mainSections:
|
||||
- docs
|
||||
- posts
|
||||
disableAnchoredHeadings: true
|
||||
|
||||
defaultTheme: auto
|
||||
# disableThemeToggle: true
|
||||
|
|
@ -188,13 +188,10 @@ markup:
|
|||
goldmark:
|
||||
renderer:
|
||||
unsafe: true
|
||||
# highlight:
|
||||
# # anchorLineNos: true
|
||||
# codeFences: true
|
||||
# guessSyntax: true
|
||||
# lineNos: true
|
||||
# # noClasses: false
|
||||
# style: monokai
|
||||
highlight:
|
||||
style: dracula
|
||||
lineNos: true
|
||||
noClasses: false
|
||||
|
||||
privacy:
|
||||
vimeo:
|
||||
|
|
|
|||
|
|
@ -250,32 +250,15 @@ ex.
|
|||
|
||||
## 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
|
||||
markup:
|
||||
highlight:
|
||||
# anchorLineNos: true
|
||||
codeFences: true
|
||||
guessSyntax: true
|
||||
lineNos: true
|
||||
# noClasses: false
|
||||
style: monokai
|
||||
```
|
||||
```yml
|
||||
markup:
|
||||
highlight:
|
||||
noClasses: false
|
||||
```
|
||||
|
||||
2. If you want `lineNos: true`, the background won't be proper.
|
||||
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)
|
||||
`noClasses` has to be `false` to make highlight color follows the theme.
|
||||
|
||||
---
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
Add social icons with `-simple` suffix from [Simple Icons](https://simpleicons.org/).
|
||||
|
|
|
|||
|
|
@ -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; }
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"Target":"css/common/highlight.css","MediaType":"text/css","Data":{}}
|
||||
|
|
@ -38,9 +38,10 @@
|
|||
{{- $reset := (resources.Get "css/core/reset.css") }}
|
||||
{{- $media := (resources.Get "css/core/zmedia.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 */}}
|
||||
{{- $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" }}
|
||||
|
||||
{{- /* bundle all required css */}}
|
||||
|
|
@ -98,7 +99,6 @@
|
|||
--secondary: rgb(155, 156, 157);
|
||||
--tertiary: rgb(65, 66, 68);
|
||||
--content: rgb(196, 196, 197);
|
||||
--hljs-bg: rgb(46, 46, 51);
|
||||
--code-bg: rgb(55, 56, 62);
|
||||
--border: rgb(51, 51, 51);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue