From d86006ee8c94e51d01ab276d73ba70e5b924af92 Mon Sep 17 00:00:00 2001 From: Patrice Chalin Date: Tue, 30 Apr 2024 03:00:16 -0400 Subject: [PATCH] [UG] Syntax highlighting styles for both light and dark modes (#1958) --- assets/scss/_chroma-onedark.css | 86 ++++++++++++++++++++++ assets/scss/_chroma-tango.css | 86 ++++++++++++++++++++++ userguide/assets/scss/_styles_project.scss | 10 +++ userguide/hugo.yaml | 7 +- 4 files changed, 187 insertions(+), 2 deletions(-) create mode 100644 assets/scss/_chroma-onedark.css create mode 100644 assets/scss/_chroma-tango.css diff --git a/assets/scss/_chroma-onedark.css b/assets/scss/_chroma-onedark.css new file mode 100644 index 0000000000..eb666ca410 --- /dev/null +++ b/assets/scss/_chroma-onedark.css @@ -0,0 +1,86 @@ +/* Background */ .bg { color:#abb2bf;background-color:#282c34; } +/* PreWrapper */ .chroma { color:#abb2bf;background-color:#282c34; } +/* Other */ .chroma .x { } +/* Error */ .chroma .err { } +/* CodeLine */ .chroma .cl { } +/* LineLink */ .chroma .lnlinks { outline:none;text-decoration:none;color:inherit } +/* LineTableTD */ .chroma .lntd { vertical-align:top;padding:0;margin:0;border:0; } +/* LineTable */ .chroma .lntable { border-spacing:0;padding:0;margin:0;border:0; } +/* LineHighlight */ .chroma .hl { background-color:#3d4148 } +/* LineNumbersTable */ .chroma .lnt { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#55595f } +/* LineNumbers */ .chroma .ln { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#55595f } +/* Line */ .chroma .line { display:flex; } +/* Keyword */ .chroma .k { color:#c678dd } +/* KeywordConstant */ .chroma .kc { color:#e5c07b } +/* KeywordDeclaration */ .chroma .kd { color:#c678dd } +/* KeywordNamespace */ .chroma .kn { color:#c678dd } +/* KeywordPseudo */ .chroma .kp { color:#c678dd } +/* KeywordReserved */ .chroma .kr { color:#c678dd } +/* KeywordType */ .chroma .kt { color:#e5c07b } +/* Name */ .chroma .n { color:#e06c75 } +/* NameAttribute */ .chroma .na { color:#e06c75 } +/* NameBuiltin */ .chroma .nb { color:#e5c07b } +/* NameBuiltinPseudo */ .chroma .bp { color:#e06c75 } +/* NameClass */ .chroma .nc { color:#e5c07b } +/* NameConstant */ .chroma .no { color:#e06c75 } +/* NameDecorator */ .chroma .nd { color:#61afef } +/* NameEntity */ .chroma .ni { color:#e06c75 } +/* NameException */ .chroma .ne { color:#e06c75 } +/* NameFunction */ .chroma .nf { color:#61afef;font-weight:bold } +/* NameFunctionMagic */ .chroma .fm { color:#56b6c2;font-weight:bold } +/* NameLabel */ .chroma .nl { color:#e06c75 } +/* NameNamespace */ .chroma .nn { color:#e06c75 } +/* NameOther */ .chroma .nx { color:#e06c75 } +/* NameProperty */ .chroma .py { color:#e06c75 } +/* NameTag */ .chroma .nt { color:#e06c75 } +/* NameVariable */ .chroma .nv { color:#e06c75 } +/* NameVariableClass */ .chroma .vc { color:#e06c75 } +/* NameVariableGlobal */ .chroma .vg { color:#e06c75 } +/* NameVariableInstance */ .chroma .vi { color:#e06c75 } +/* NameVariableMagic */ .chroma .vm { color:#e06c75 } +/* Literal */ .chroma .l { } +/* LiteralDate */ .chroma .ld { } +/* LiteralString */ .chroma .s { color:#98c379 } +/* LiteralStringAffix */ .chroma .sa { color:#98c379 } +/* LiteralStringBacktick */ .chroma .sb { color:#98c379 } +/* LiteralStringChar */ .chroma .sc { color:#98c379 } +/* LiteralStringDelimiter */ .chroma .dl { color:#98c379 } +/* LiteralStringDoc */ .chroma .sd { color:#98c379 } +/* LiteralStringDouble */ .chroma .s2 { color:#98c379 } +/* LiteralStringEscape */ .chroma .se { color:#98c379 } +/* LiteralStringHeredoc */ .chroma .sh { color:#98c379 } +/* LiteralStringInterpol */ .chroma .si { color:#98c379 } +/* LiteralStringOther */ .chroma .sx { color:#98c379 } +/* LiteralStringRegex */ .chroma .sr { color:#98c379 } +/* LiteralStringSingle */ .chroma .s1 { color:#98c379 } +/* LiteralStringSymbol */ .chroma .ss { color:#98c379 } +/* LiteralNumber */ .chroma .m { color:#d19a66 } +/* LiteralNumberBin */ .chroma .mb { color:#d19a66 } +/* LiteralNumberFloat */ .chroma .mf { color:#d19a66 } +/* LiteralNumberHex */ .chroma .mh { color:#d19a66 } +/* LiteralNumberInteger */ .chroma .mi { color:#d19a66 } +/* LiteralNumberIntegerLong */ .chroma .il { color:#d19a66 } +/* LiteralNumberOct */ .chroma .mo { color:#d19a66 } +/* Operator */ .chroma .o { color:#56b6c2 } +/* OperatorWord */ .chroma .ow { color:#56b6c2 } +/* Punctuation */ .chroma .p { } +/* Comment */ .chroma .c { color:#7f848e } +/* CommentHashbang */ .chroma .ch { color:#7f848e } +/* CommentMultiline */ .chroma .cm { color:#7f848e } +/* CommentSingle */ .chroma .c1 { color:#7f848e } +/* CommentSpecial */ .chroma .cs { color:#7f848e } +/* CommentPreproc */ .chroma .cp { color:#7f848e } +/* CommentPreprocFile */ .chroma .cpf { color:#7f848e } +/* Generic */ .chroma .g { } +/* GenericDeleted */ .chroma .gd { color:#e06c75 } +/* GenericEmph */ .chroma .ge { } +/* GenericError */ .chroma .gr { } +/* GenericHeading */ .chroma .gh { } +/* GenericInserted */ .chroma .gi { color:#98c379;font-weight:bold } +/* GenericOutput */ .chroma .go { } +/* GenericPrompt */ .chroma .gp { } +/* GenericStrong */ .chroma .gs { } +/* GenericSubheading */ .chroma .gu { } +/* GenericTraceback */ .chroma .gt { } +/* GenericUnderline */ .chroma .gl { } +/* TextWhitespace */ .chroma .w { } diff --git a/assets/scss/_chroma-tango.css b/assets/scss/_chroma-tango.css new file mode 100644 index 0000000000..8af635c3a3 --- /dev/null +++ b/assets/scss/_chroma-tango.css @@ -0,0 +1,86 @@ +/* Background */ .bg { background-color:#f8f8f8; } +/* PreWrapper */ .chroma { background-color:#f8f8f8; } +/* Other */ .chroma .x { color:#000 } +/* Error */ .chroma .err { color:#a40000 } +/* CodeLine */ .chroma .cl { } +/* LineLink */ .chroma .lnlinks { outline:none;text-decoration:none;color:inherit } +/* LineTableTD */ .chroma .lntd { vertical-align:top;padding:0;margin:0;border:0; } +/* LineTable */ .chroma .lntable { border-spacing:0;padding:0;margin:0;border:0; } +/* LineHighlight */ .chroma .hl { background-color:#dfdfdf } +/* LineNumbersTable */ .chroma .lnt { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f } +/* LineNumbers */ .chroma .ln { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f } +/* Line */ .chroma .line { display:flex; } +/* Keyword */ .chroma .k { color:#204a87;font-weight:bold } +/* KeywordConstant */ .chroma .kc { color:#204a87;font-weight:bold } +/* KeywordDeclaration */ .chroma .kd { color:#204a87;font-weight:bold } +/* KeywordNamespace */ .chroma .kn { color:#204a87;font-weight:bold } +/* KeywordPseudo */ .chroma .kp { color:#204a87;font-weight:bold } +/* KeywordReserved */ .chroma .kr { color:#204a87;font-weight:bold } +/* KeywordType */ .chroma .kt { color:#204a87;font-weight:bold } +/* Name */ .chroma .n { color:#000 } +/* NameAttribute */ .chroma .na { color:#c4a000 } +/* NameBuiltin */ .chroma .nb { color:#204a87 } +/* NameBuiltinPseudo */ .chroma .bp { color:#3465a4 } +/* NameClass */ .chroma .nc { color:#000 } +/* NameConstant */ .chroma .no { color:#000 } +/* NameDecorator */ .chroma .nd { color:#5c35cc;font-weight:bold } +/* NameEntity */ .chroma .ni { color:#ce5c00 } +/* NameException */ .chroma .ne { color:#c00;font-weight:bold } +/* NameFunction */ .chroma .nf { color:#000 } +/* NameFunctionMagic */ .chroma .fm { color:#000 } +/* NameLabel */ .chroma .nl { color:#f57900 } +/* NameNamespace */ .chroma .nn { color:#000 } +/* NameOther */ .chroma .nx { color:#000 } +/* NameProperty */ .chroma .py { color:#000 } +/* NameTag */ .chroma .nt { color:#204a87;font-weight:bold } +/* NameVariable */ .chroma .nv { color:#000 } +/* NameVariableClass */ .chroma .vc { color:#000 } +/* NameVariableGlobal */ .chroma .vg { color:#000 } +/* NameVariableInstance */ .chroma .vi { color:#000 } +/* NameVariableMagic */ .chroma .vm { color:#000 } +/* Literal */ .chroma .l { color:#000 } +/* LiteralDate */ .chroma .ld { color:#000 } +/* LiteralString */ .chroma .s { color:#4e9a06 } +/* LiteralStringAffix */ .chroma .sa { color:#4e9a06 } +/* LiteralStringBacktick */ .chroma .sb { color:#4e9a06 } +/* LiteralStringChar */ .chroma .sc { color:#4e9a06 } +/* LiteralStringDelimiter */ .chroma .dl { color:#4e9a06 } +/* LiteralStringDoc */ .chroma .sd { color:#8f5902;font-style:italic } +/* LiteralStringDouble */ .chroma .s2 { color:#4e9a06 } +/* LiteralStringEscape */ .chroma .se { color:#4e9a06 } +/* LiteralStringHeredoc */ .chroma .sh { color:#4e9a06 } +/* LiteralStringInterpol */ .chroma .si { color:#4e9a06 } +/* LiteralStringOther */ .chroma .sx { color:#4e9a06 } +/* LiteralStringRegex */ .chroma .sr { color:#4e9a06 } +/* LiteralStringSingle */ .chroma .s1 { color:#4e9a06 } +/* LiteralStringSymbol */ .chroma .ss { color:#4e9a06 } +/* LiteralNumber */ .chroma .m { color:#0000cf;font-weight:bold } +/* LiteralNumberBin */ .chroma .mb { color:#0000cf;font-weight:bold } +/* LiteralNumberFloat */ .chroma .mf { color:#0000cf;font-weight:bold } +/* LiteralNumberHex */ .chroma .mh { color:#0000cf;font-weight:bold } +/* LiteralNumberInteger */ .chroma .mi { color:#0000cf;font-weight:bold } +/* LiteralNumberIntegerLong */ .chroma .il { color:#0000cf;font-weight:bold } +/* LiteralNumberOct */ .chroma .mo { color:#0000cf;font-weight:bold } +/* Operator */ .chroma .o { color:#ce5c00;font-weight:bold } +/* OperatorWord */ .chroma .ow { color:#204a87;font-weight:bold } +/* Punctuation */ .chroma .p { color:#000;font-weight:bold } +/* Comment */ .chroma .c { color:#8f5902;font-style:italic } +/* CommentHashbang */ .chroma .ch { color:#8f5902;font-style:italic } +/* CommentMultiline */ .chroma .cm { color:#8f5902;font-style:italic } +/* CommentSingle */ .chroma .c1 { color:#8f5902;font-style:italic } +/* CommentSpecial */ .chroma .cs { color:#8f5902;font-style:italic } +/* CommentPreproc */ .chroma .cp { color:#8f5902;font-style:italic } +/* CommentPreprocFile */ .chroma .cpf { color:#8f5902;font-style:italic } +/* Generic */ .chroma .g { color:#000 } +/* GenericDeleted */ .chroma .gd { color:#a40000 } +/* GenericEmph */ .chroma .ge { color:#000;font-style:italic } +/* GenericError */ .chroma .gr { color:#ef2929 } +/* GenericHeading */ .chroma .gh { color:#000080;font-weight:bold } +/* GenericInserted */ .chroma .gi { color:#00a000 } +/* GenericOutput */ .chroma .go { color:#000;font-style:italic } +/* GenericPrompt */ .chroma .gp { color:#8f5902 } +/* GenericStrong */ .chroma .gs { color:#000;font-weight:bold } +/* GenericSubheading */ .chroma .gu { color:#800080;font-weight:bold } +/* GenericTraceback */ .chroma .gt { color:#a40000;font-weight:bold } +/* GenericUnderline */ .chroma .gl { color:#000;text-decoration:underline } +/* TextWhitespace */ .chroma .w { color:#f8f8f8;text-decoration:underline } diff --git a/userguide/assets/scss/_styles_project.scss b/userguide/assets/scss/_styles_project.scss index e69de29bb2..1ac9f65c62 100644 --- a/userguide/assets/scss/_styles_project.scss +++ b/userguide/assets/scss/_styles_project.scss @@ -0,0 +1,10 @@ +[data-bs-theme="light"] { + @import 'chroma-tango'; +} + +[data-bs-theme="dark"] { + @import 'chroma-onedark'; + .chroma { + background-color: var(--td-pre-bg); + } +} diff --git a/userguide/hugo.yaml b/userguide/hugo.yaml index 2f9435dcd2..5267fcd29d 100644 --- a/userguide/hugo.yaml +++ b/userguide/hugo.yaml @@ -43,8 +43,11 @@ markup: renderer: unsafe: true highlight: - noClasses: false - style: tango + # In support of dark mode: + noClasses: false # Require that Chroma style using classes + # style: tango # FIXME(@chalin): remove this line once the auto-generation of the CSS styles is setup + # When noClasses is false, the style is defined via CSS. For details, see: + # https://gohugo.io/content-management/syntax-highlighting/#generate-syntax-highlighter-css params: copyright: