feat(article): better syntax highlight style

Adapt to light & dark mode

assets/css/highlight/dark.css

@@ -0,0 +1,390 @@
+/*
+*   Style: monokai
+*   https://xyproto.github.io/splash/docs/monokai.html
+*/
+
+:root {
+    --pre-text-color: #f8f8f2;
+    --pre-background-color: #272822;
+}
+
+/* Background */
+.chroma {
+    color: #f8f8f2;
+    background-color: #272822
+}
+
+/* Other */
+.chroma .x {}
+
+/* Error */
+.chroma .err {
+    color: #960050;
+    background-color: #1e0010
+}
+
+/* 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: #66d9ef
+}
+
+/* KeywordConstant */
+.chroma .kc {
+    color: #66d9ef
+}
+
+/* KeywordDeclaration */
+.chroma .kd {
+    color: #66d9ef
+}
+
+/* KeywordNamespace */
+.chroma .kn {
+    color: #f92672
+}
+
+/* KeywordPseudo */
+.chroma .kp {
+    color: #66d9ef
+}
+
+/* KeywordReserved */
+.chroma .kr {
+    color: #66d9ef
+}
+
+/* KeywordType */
+.chroma .kt {
+    color: #66d9ef
+}
+
+/* Name */
+.chroma .n {}
+
+/* NameAttribute */
+.chroma .na {
+    color: #a6e22e
+}
+
+/* NameBuiltin */
+.chroma .nb {}
+
+/* NameBuiltinPseudo */
+.chroma .bp {}
+
+/* NameClass */
+.chroma .nc {
+    color: #a6e22e
+}
+
+/* NameConstant */
+.chroma .no {
+    color: #66d9ef
+}
+
+/* NameDecorator */
+.chroma .nd {
+    color: #a6e22e
+}
+
+/* NameEntity */
+.chroma .ni {}
+
+/* NameException */
+.chroma .ne {
+    color: #a6e22e
+}
+
+/* NameFunction */
+.chroma .nf {
+    color: #a6e22e
+}
+
+/* NameFunctionMagic */
+.chroma .fm {}
+
+/* NameLabel */
+.chroma .nl {}
+
+/* NameNamespace */
+.chroma .nn {}
+
+/* NameOther */
+.chroma .nx {
+    color: #a6e22e
+}
+
+/* NameProperty */
+.chroma .py {}
+
+/* NameTag */
+.chroma .nt {
+    color: #f92672
+}
+
+/* NameVariable */
+.chroma .nv {}
+
+/* NameVariableClass */
+.chroma .vc {}
+
+/* NameVariableGlobal */
+.chroma .vg {}
+
+/* NameVariableInstance */
+.chroma .vi {}
+
+/* NameVariableMagic */
+.chroma .vm {}
+
+/* Literal */
+.chroma .l {
+    color: #ae81ff
+}
+
+/* LiteralDate */
+.chroma .ld {
+    color: #e6db74
+}
+
+/* LiteralString */
+.chroma .s {
+    color: #e6db74
+}
+
+/* LiteralStringAffix */
+.chroma .sa {
+    color: #e6db74
+}
+
+/* LiteralStringBacktick */
+.chroma .sb {
+    color: #e6db74
+}
+
+/* LiteralStringChar */
+.chroma .sc {
+    color: #e6db74
+}
+
+/* LiteralStringDelimiter */
+.chroma .dl {
+    color: #e6db74
+}
+
+/* LiteralStringDoc */
+.chroma .sd {
+    color: #e6db74
+}
+
+/* LiteralStringDouble */
+.chroma .s2 {
+    color: #e6db74
+}
+
+/* LiteralStringEscape */
+.chroma .se {
+    color: #ae81ff
+}
+
+/* LiteralStringHeredoc */
+.chroma .sh {
+    color: #e6db74
+}
+
+/* LiteralStringInterpol */
+.chroma .si {
+    color: #e6db74
+}
+
+/* LiteralStringOther */
+.chroma .sx {
+    color: #e6db74
+}
+
+/* LiteralStringRegex */
+.chroma .sr {
+    color: #e6db74
+}
+
+/* LiteralStringSingle */
+.chroma .s1 {
+    color: #e6db74
+}
+
+/* LiteralStringSymbol */
+.chroma .ss {
+    color: #e6db74
+}
+
+/* LiteralNumber */
+.chroma .m {
+    color: #ae81ff
+}
+
+/* LiteralNumberBin */
+.chroma .mb {
+    color: #ae81ff
+}
+
+/* LiteralNumberFloat */
+.chroma .mf {
+    color: #ae81ff
+}
+
+/* LiteralNumberHex */
+.chroma .mh {
+    color: #ae81ff
+}
+
+/* LiteralNumberInteger */
+.chroma .mi {
+    color: #ae81ff
+}
+
+/* LiteralNumberIntegerLong */
+.chroma .il {
+    color: #ae81ff
+}
+
+/* LiteralNumberOct */
+.chroma .mo {
+    color: #ae81ff
+}
+
+/* Operator */
+.chroma .o {
+    color: #f92672
+}
+
+/* OperatorWord */
+.chroma .ow {
+    color: #f92672
+}
+
+/* Punctuation */
+.chroma .p {}
+
+/* Comment */
+.chroma .c {
+    color: #75715e
+}
+
+/* CommentHashbang */
+.chroma .ch {
+    color: #75715e
+}
+
+/* CommentMultiline */
+.chroma .cm {
+    color: #75715e
+}
+
+/* CommentSingle */
+.chroma .c1 {
+    color: #75715e
+}
+
+/* CommentSpecial */
+.chroma .cs {
+    color: #75715e
+}
+
+/* CommentPreproc */
+.chroma .cp {
+    color: #75715e
+}
+
+/* CommentPreprocFile */
+.chroma .cpf {
+    color: #75715e
+}
+
+/* Generic */
+.chroma .g {}
+
+/* GenericDeleted */
+.chroma .gd {
+    color: #f92672
+}
+
+/* GenericEmph */
+.chroma .ge {
+    font-style: italic
+}
+
+/* GenericError */
+.chroma .gr {}
+
+/* GenericHeading */
+.chroma .gh {}
+
+/* GenericInserted */
+.chroma .gi {
+    color: #a6e22e
+}
+
+/* GenericOutput */
+.chroma .go {}
+
+/* GenericPrompt */
+.chroma .gp {}
+
+/* GenericStrong */
+.chroma .gs {
+    font-weight: bold
+}
+
+/* GenericSubheading */
+.chroma .gu {
+    color: #75715e
+}
+
+/* GenericTraceback */
+.chroma .gt {}
+
+/* GenericUnderline */
+.chroma .gl {}
+
+/* TextWhitespace */
+.chroma .w {}

assets/css/highlight/light.css

@@ -0,0 +1,411 @@
+/*
+*   Style: monokailight
+*   https://xyproto.github.io/splash/docs/monokailight.html
+*/
+:root {
+    --pre-text-color: #272822;
+    --pre-background-color: #fafafa;
+}
+
+/* Background */
+.chroma {
+    color: #272822;
+    background-color: #fafafa;
+}
+
+/* Other */
+.chroma .x {}
+
+/* Error */
+.chroma .err {
+    color: #960050;
+    background-color: #1e0010
+}
+
+/* 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: #00a8c8
+}
+
+/* KeywordConstant */
+.chroma .kc {
+    color: #00a8c8
+}
+
+/* KeywordDeclaration */
+.chroma .kd {
+    color: #00a8c8
+}
+
+/* KeywordNamespace */
+.chroma .kn {
+    color: #f92672
+}
+
+/* KeywordPseudo */
+.chroma .kp {
+    color: #00a8c8
+}
+
+/* KeywordReserved */
+.chroma .kr {
+    color: #00a8c8
+}
+
+/* KeywordType */
+.chroma .kt {
+    color: #00a8c8
+}
+
+/* Name */
+.chroma .n {
+    color: #111111
+}
+
+/* NameAttribute */
+.chroma .na {
+    color: #75af00
+}
+
+/* NameBuiltin */
+.chroma .nb {
+    color: #111111
+}
+
+/* NameBuiltinPseudo */
+.chroma .bp {
+    color: #111111
+}
+
+/* NameClass */
+.chroma .nc {
+    color: #75af00
+}
+
+/* NameConstant */
+.chroma .no {
+    color: #00a8c8
+}
+
+/* NameDecorator */
+.chroma .nd {
+    color: #75af00
+}
+
+/* NameEntity */
+.chroma .ni {
+    color: #111111
+}
+
+/* NameException */
+.chroma .ne {
+    color: #75af00
+}
+
+/* NameFunction */
+.chroma .nf {
+    color: #75af00
+}
+
+/* NameFunctionMagic */
+.chroma .fm {
+    color: #111111
+}
+
+/* NameLabel */
+.chroma .nl {
+    color: #111111
+}
+
+/* NameNamespace */
+.chroma .nn {
+    color: #111111
+}
+
+/* NameOther */
+.chroma .nx {
+    color: #75af00
+}
+
+/* NameProperty */
+.chroma .py {
+    color: #111111
+}
+
+/* NameTag */
+.chroma .nt {
+    color: #f92672
+}
+
+/* NameVariable */
+.chroma .nv {
+    color: #111111
+}
+
+/* NameVariableClass */
+.chroma .vc {
+    color: #111111
+}
+
+/* NameVariableGlobal */
+.chroma .vg {
+    color: #111111
+}
+
+/* NameVariableInstance */
+.chroma .vi {
+    color: #111111
+}
+
+/* NameVariableMagic */
+.chroma .vm {
+    color: #111111
+}
+
+/* Literal */
+.chroma .l {
+    color: #ae81ff
+}
+
+/* LiteralDate */
+.chroma .ld {
+    color: #d88200
+}
+
+/* LiteralString */
+.chroma .s {
+    color: #d88200
+}
+
+/* LiteralStringAffix */
+.chroma .sa {
+    color: #d88200
+}
+
+/* LiteralStringBacktick */
+.chroma .sb {
+    color: #d88200
+}
+
+/* LiteralStringChar */
+.chroma .sc {
+    color: #d88200
+}
+
+/* LiteralStringDelimiter */
+.chroma .dl {
+    color: #d88200
+}
+
+/* LiteralStringDoc */
+.chroma .sd {
+    color: #d88200
+}
+
+/* LiteralStringDouble */
+.chroma .s2 {
+    color: #d88200
+}
+
+/* LiteralStringEscape */
+.chroma .se {
+    color: #8045ff
+}
+
+/* LiteralStringHeredoc */
+.chroma .sh {
+    color: #d88200
+}
+
+/* LiteralStringInterpol */
+.chroma .si {
+    color: #d88200
+}
+
+/* LiteralStringOther */
+.chroma .sx {
+    color: #d88200
+}
+
+/* LiteralStringRegex */
+.chroma .sr {
+    color: #d88200
+}
+
+/* LiteralStringSingle */
+.chroma .s1 {
+    color: #d88200
+}
+
+/* LiteralStringSymbol */
+.chroma .ss {
+    color: #d88200
+}
+
+/* LiteralNumber */
+.chroma .m {
+    color: #ae81ff
+}
+
+/* LiteralNumberBin */
+.chroma .mb {
+    color: #ae81ff
+}
+
+/* LiteralNumberFloat */
+.chroma .mf {
+    color: #ae81ff
+}
+
+/* LiteralNumberHex */
+.chroma .mh {
+    color: #ae81ff
+}
+
+/* LiteralNumberInteger */
+.chroma .mi {
+    color: #ae81ff
+}
+
+/* LiteralNumberIntegerLong */
+.chroma .il {
+    color: #ae81ff
+}
+
+/* LiteralNumberOct */
+.chroma .mo {
+    color: #ae81ff
+}
+
+/* Operator */
+.chroma .o {
+    color: #f92672
+}
+
+/* OperatorWord */
+.chroma .ow {
+    color: #f92672
+}
+
+/* Punctuation */
+.chroma .p {
+    color: #111111
+}
+
+/* Comment */
+.chroma .c {
+    color: #75715e
+}
+
+/* CommentHashbang */
+.chroma .ch {
+    color: #75715e
+}
+
+/* CommentMultiline */
+.chroma .cm {
+    color: #75715e
+}
+
+/* CommentSingle */
+.chroma .c1 {
+    color: #75715e
+}
+
+/* CommentSpecial */
+.chroma .cs {
+    color: #75715e
+}
+
+/* CommentPreproc */
+.chroma .cp {
+    color: #75715e
+}
+
+/* CommentPreprocFile */
+.chroma .cpf {
+    color: #75715e
+}
+
+/* Generic */
+.chroma .g {}
+
+/* GenericDeleted */
+.chroma .gd {}
+
+/* GenericEmph */
+.chroma .ge {
+    font-style: italic
+}
+
+/* GenericError */
+.chroma .gr {}
+
+/* GenericHeading */
+.chroma .gh {}
+
+/* GenericInserted */
+.chroma .gi {}
+
+/* GenericOutput */
+.chroma .go {}
+
+/* GenericPrompt */
+.chroma .gp {}
+
+/* GenericStrong */
+.chroma .gs {
+    font-weight: bold
+}
+
+/* GenericSubheading */
+.chroma .gu {}
+
+/* GenericTraceback */
+.chroma .gt {}
+
+/* GenericUnderline */
+.chroma .gl {}
+
+/* TextWhitespace */
+.chroma .w {}

exampleSite/config.toml

@@ -85,4 +85,8 @@ DefaultContentLanguage = "en"                   # Theme i18n support
 
     [[related.indices]]
         name = "categories"
-        weight = 200
+        weight = 200
+
+[markup]
+    [markup.highlight]
+        noClasses = false

layouts/partials/footer/components/highlight.html

@@ -0,0 +1,4 @@
+{{- $light := resources.Get "css/highlight/light.css" | minify -}}
+{{- $dark := resources.Get "css/highlight/dark.css" | minify -}}
+<link rel="stylesheet" href="{{ $light.Permalink }}" media="(prefers-color-scheme: light)">
+<link rel="stylesheet" href="{{ $dark.Permalink }}" media="(prefers-color-scheme: dark)">

layouts/partials/footer/include.html

@@ -1,3 +1,4 @@
 {{ partialCached "footer/components/script.html" . }}
 {{ partialCached "footer/components/custom-font.html" . }}
+{{ partialCached "footer/components/highlight.html" . }}
 {{ partial "footer/custom.html" . }}