From 33c1ba12e22ec939cd4c85186c243b6617a28527 Mon Sep 17 00:00:00 2001 From: Reorx Date: Fri, 15 Apr 2022 00:55:41 +0800 Subject: [PATCH] use hugo's builtin Chroma for code highlight --- Makefile | 4 + README.md | 12 + assets/css/common/highlight.scss | 10 + assets/css/common/post-single.css | 18 +- assets/css/core/theme-vars.css | 2 - assets/css/lib/chroma-dark.css | 82 +++ assets/css/lib/chroma-light.css | 82 +++ exampleSite/config.yml | 13 +- exampleSite/content/docs/faq.md | 31 +- .../content/docs/papermodx-new-features.md | 12 + ...s_f300667da4f5b5f84e1a9e0702b2fdde.content | 571 ++++++++++++++++++ ...scss_f300667da4f5b5f84e1a9e0702b2fdde.json | 1 + layouts/partials/head.html | 4 +- 13 files changed, 799 insertions(+), 43 deletions(-) create mode 100644 assets/css/common/highlight.scss create mode 100644 assets/css/lib/chroma-dark.css create mode 100644 assets/css/lib/chroma-light.css create mode 100644 exampleSite/resources/_gen/assets/scss/hugo-papermodx/css/common/highlight.scss_f300667da4f5b5f84e1a9e0702b2fdde.content create mode 100644 exampleSite/resources/_gen/assets/scss/hugo-papermodx/css/common/highlight.scss_f300667da4f5b5f84e1a9e0702b2fdde.json diff --git a/Makefile b/Makefile index 289e23a..1c878f8 100644 --- a/Makefile +++ b/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 diff --git a/README.md b/README.md index 457842a..225cc54 100644 --- a/README.md +++ b/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/). diff --git a/assets/css/common/highlight.scss b/assets/css/common/highlight.scss new file mode 100644 index 0000000..810cc26 --- /dev/null +++ b/assets/css/common/highlight.scss @@ -0,0 +1,10 @@ +@import '../lib/chroma-light'; + +// for github theme, add a background color +.chroma { + background-color: #f6f8fa; +} + +.dark { + @import '../lib/chroma-dark'; +} diff --git a/assets/css/common/post-single.css b/assets/css/common/post-single.css index 61e3581..d187987 100644 --- a/assets/css/common/post-single.css +++ b/assets/css/common/post-single.css @@ -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); } diff --git a/assets/css/core/theme-vars.css b/assets/css/core/theme-vars.css index 33eaebb..965e5a5 100644 --- a/assets/css/core/theme-vars.css +++ b/assets/css/core/theme-vars.css @@ -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); diff --git a/assets/css/lib/chroma-dark.css b/assets/css/lib/chroma-dark.css new file mode 100644 index 0000000..84bd15a --- /dev/null +++ b/assets/css/lib/chroma-dark.css @@ -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 { } diff --git a/assets/css/lib/chroma-light.css b/assets/css/lib/chroma-light.css new file mode 100644 index 0000000..23be044 --- /dev/null +++ b/assets/css/lib/chroma-light.css @@ -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 } diff --git a/exampleSite/config.yml b/exampleSite/config.yml index 78d5639..f68212b 100644 --- a/exampleSite/config.yml +++ b/exampleSite/config.yml @@ -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: diff --git a/exampleSite/content/docs/faq.md b/exampleSite/content/docs/faq.md index 0a2f879..6ec0fd9 100644 --- a/exampleSite/content/docs/faq.md +++ b/exampleSite/content/docs/faq.md @@ -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. --- diff --git a/exampleSite/content/docs/papermodx-new-features.md b/exampleSite/content/docs/papermodx-new-features.md index 2f58b0a..0f2cc12 100644 --- a/exampleSite/content/docs/papermodx-new-features.md +++ b/exampleSite/content/docs/papermodx-new-features.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/). diff --git a/exampleSite/resources/_gen/assets/scss/hugo-papermodx/css/common/highlight.scss_f300667da4f5b5f84e1a9e0702b2fdde.content b/exampleSite/resources/_gen/assets/scss/hugo-papermodx/css/common/highlight.scss_f300667da4f5b5f84e1a9e0702b2fdde.content new file mode 100644 index 0000000..125e9fc --- /dev/null +++ b/exampleSite/resources/_gen/assets/scss/hugo-papermodx/css/common/highlight.scss_f300667da4f5b5f84e1a9e0702b2fdde.content @@ -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; } diff --git a/exampleSite/resources/_gen/assets/scss/hugo-papermodx/css/common/highlight.scss_f300667da4f5b5f84e1a9e0702b2fdde.json b/exampleSite/resources/_gen/assets/scss/hugo-papermodx/css/common/highlight.scss_f300667da4f5b5f84e1a9e0702b2fdde.json new file mode 100644 index 0000000..3213d97 --- /dev/null +++ b/exampleSite/resources/_gen/assets/scss/hugo-papermodx/css/common/highlight.scss_f300667da4f5b5f84e1a9e0702b2fdde.json @@ -0,0 +1 @@ +{"Target":"css/common/highlight.css","MediaType":"text/css","Data":{}} \ No newline at end of file diff --git a/layouts/partials/head.html b/layouts/partials/head.html index 3d0fdf9..22d3cff 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -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); }