From 96ff911c6e83140925420073b1abe16afa445567 Mon Sep 17 00:00:00 2001 From: Jimmy Cai Date: Thu, 17 Sep 2020 19:48:21 +0200 Subject: [PATCH] feat(article): better syntax highlight style Adapt to light & dark mode --- assets/css/highlight/dark.css | 390 +++++++++++++++++ assets/css/highlight/light.css | 411 ++++++++++++++++++ exampleSite/config.toml | 6 +- .../partials/footer/components/highlight.html | 4 + layouts/partials/footer/include.html | 1 + 5 files changed, 811 insertions(+), 1 deletion(-) create mode 100644 assets/css/highlight/dark.css create mode 100644 assets/css/highlight/light.css create mode 100644 layouts/partials/footer/components/highlight.html diff --git a/assets/css/highlight/dark.css b/assets/css/highlight/dark.css new file mode 100644 index 0000000..7f5b872 --- /dev/null +++ b/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 {} \ No newline at end of file diff --git a/assets/css/highlight/light.css b/assets/css/highlight/light.css new file mode 100644 index 0000000..9c4e0da --- /dev/null +++ b/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 {} \ No newline at end of file diff --git a/exampleSite/config.toml b/exampleSite/config.toml index 3f5b50c..d554f8c 100644 --- a/exampleSite/config.toml +++ b/exampleSite/config.toml @@ -85,4 +85,8 @@ DefaultContentLanguage = "en" # Theme i18n support [[related.indices]] name = "categories" - weight = 200 \ No newline at end of file + weight = 200 + +[markup] + [markup.highlight] + noClasses = false \ No newline at end of file diff --git a/layouts/partials/footer/components/highlight.html b/layouts/partials/footer/components/highlight.html new file mode 100644 index 0000000..d428695 --- /dev/null +++ b/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 -}} + + \ No newline at end of file diff --git a/layouts/partials/footer/include.html b/layouts/partials/footer/include.html index 4b50a88..ffa7573 100644 --- a/layouts/partials/footer/include.html +++ b/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" . }} \ No newline at end of file