From 82c10813791935d9022ecd13631c7bf557644860 Mon Sep 17 00:00:00 2001 From: Ngô Ngọc Đức Huy Date: Sat, 2 Sep 2023 10:52:26 +0700 Subject: Add code highlight --- assets/css/highdark.css | 174 +++++++++++++++++++++++++++++++++++++++ assets/css/highlight.css | 88 ++++++++++++++++++++ layouts/partials/head-extra.html | 4 + themes/victor | 2 +- 4 files changed, 267 insertions(+), 1 deletion(-) create mode 100644 assets/css/highdark.css create mode 100644 assets/css/highlight.css diff --git a/assets/css/highdark.css b/assets/css/highdark.css new file mode 100644 index 0000000..b1108bb --- /dev/null +++ b/assets/css/highdark.css @@ -0,0 +1,174 @@ +@media(prefers-color-scheme:dark) { + /* Background */ .bg { background-color: #ffffff; } + /* PreWrapper */ .chroma { background-color: #ffffff; } + /* Other */ .chroma .x { } + /* Error */ .chroma .err { color: #ff0000; background-color: #ffaaaa } + /* 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: #ffffcc } + /* 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: #008800; font-weight: bold } + /* KeywordConstant */ .chroma .kc { color: #008800; font-weight: bold } + /* KeywordDeclaration */ .chroma .kd { color: #008800; font-weight: bold } + /* KeywordNamespace */ .chroma .kn { color: #008800; font-weight: bold } + /* KeywordPseudo */ .chroma .kp { color: #003388; font-weight: bold } + /* KeywordReserved */ .chroma .kr { color: #008800; font-weight: bold } + /* KeywordType */ .chroma .kt { color: #333399; font-weight: bold } + /* Name */ .chroma .n { } + /* NameAttribute */ .chroma .na { color: #0000cc } + /* NameBuiltin */ .chroma .nb { color: #007020 } + /* NameBuiltinPseudo */ .chroma .bp { } + /* NameClass */ .chroma .nc { color: #bb0066; font-weight: bold } + /* NameConstant */ .chroma .no { color: #003366; font-weight: bold } + /* NameDecorator */ .chroma .nd { color: #555555; font-weight: bold } + /* NameEntity */ .chroma .ni { color: #880000; font-weight: bold } + /* NameException */ .chroma .ne { color: #ff0000; font-weight: bold } + /* NameFunction */ .chroma .nf { color: #0066bb; font-weight: bold } + /* NameFunctionMagic */ .chroma .fm { } + /* NameLabel */ .chroma .nl { color: #997700; font-weight: bold } + /* NameNamespace */ .chroma .nn { color: #0e84b5; font-weight: bold } + /* NameOther */ .chroma .nx { } + /* NameProperty */ .chroma .py { } + /* NameTag */ .chroma .nt { color: #007700 } + /* NameVariable */ .chroma .nv { color: #996633 } + /* NameVariableClass */ .chroma .vc { color: #336699 } + /* NameVariableGlobal */ .chroma .vg { color: #dd7700; font-weight: bold } + /* NameVariableInstance */ .chroma .vi { color: #3333bb } + /* NameVariableMagic */ .chroma .vm { } + /* Literal */ .chroma .l { } + /* LiteralDate */ .chroma .ld { } + /* LiteralString */ .chroma .s { background-color: #111010 } + /* LiteralStringA11ix */ .chroma .sa { background-color: #111010 } + /* LiteralStringBacktick */ .chroma .sb { background-color: #111010 } + /* LiteralStringChar */ .chroma .sc { color: #0044dd; background-color: #111010 } + /* LiteralStringDelimiter */ .chroma .dl { background-color: #111010 } + /* LiteralStringDoc */ .chroma .sd { color: #dd4422; background-color: #111010 } + /* LiteralStringDouble */ .chroma .s2 { background-color: #111010 } + /* LiteralStringEscape */ .chroma .se { color: #666666; background-color: #111010; font-weight: bold } + /* LiteralStringHeredoc */ .chroma .sh { background-color: #111010 } + /* LiteralStringInterpol */ .chroma .si { background-color: #eeeeee } + /* LiteralStringOther */ .chroma .sx { color: #dd2200; background-color: #111010 } + /* LiteralStringRegex */ .chroma .sr { color: #000000; background-color: #111011 } + /* LiteralStringSingle */ .chroma .s1 { background-color: #111010 } + /* LiteralStringSymbol */ .chroma .ss { color: #aa6600; background-color: #111010 } + /* LiteralNumber */ .chroma .m { color: #6600ee; font-weight: bold } + /* LiteralNumberBin */ .chroma .mb { color: #6600ee; font-weight: bold } + /* LiteralNumberFloat */ .chroma .mf { color: #6600ee; font-weight: bold } + /* LiteralNumberHex */ .chroma .mh { color: #005588; font-weight: bold } + /* LiteralNumberInteger */ .chroma .mi { color: #0000dd; font-weight: bold } + /* LiteralNumberIntegerLong */ .chroma .il { color: #6600ee; font-weight: bold } + /* LiteralNumberOct */ .chroma .mo { color: #4400ee; font-weight: bold } + /* Operator */ .chroma .o { color: #333333 } + /* OperatorWord */ .chroma .ow { color: #000000; font-weight: bold } + /* Punctuation */ .chroma .p { } + /* Comment */ .chroma .c { color: #888888 } + /* CommentHashbang */ .chroma .ch { color: #888888 } + /* CommentMultiline */ .chroma .cm { color: #888888 } + /* CommentSingle */ .chroma .c1 { color: #888888 } + /* CommentSpecial */ .chroma .cs { color: #cc0000; font-weight: bold } + /* CommentPreproc */ .chroma .cp { color: #557799 } + /* CommentPreprocFile */ .chroma .cpf { color: #557799 } + /* Generic */ .chroma .g { } + /* GenericDeleted */ .chroma .gd { color: #a00000 } + /* GenericEmph */ .chroma .ge { font-style: italic } + /* GenericError */ .chroma .gr { color: #ff0000 } + /* GenericHeading */ .chroma .gh { color: #000080; font-weight: bold } + /* GenericInserted */ .chroma .gi { color: #00a000 } + /* GenericOutput */ .chroma .go { color: #888888 } + /* GenericPrompt */ .chroma .gp { color: #c65d09; font-weight: bold } + /* GenericStrong */ .chroma .gs { font-weight: bold } + /* GenericSubheading */ .chroma .gu { color: #800080; font-weight: bold } + /* GenericTraceback */ .chroma .gt { color: #0044dd } + /* GenericUnderline */ .chroma .gl { text-decoration: underline } + /* TextWhitespace */ .chroma .w { color: #bbbbbb } + /* Background */ .bg { color: #d0d0d0; background-color: #202020; } + /* PreWrapper */ .chroma { color: #d0d0d0; background-color: #202020; } + /* Other */ .chroma .x { } + /* Error */ .chroma .err { color: #a61717; background-color: #e3d2d2 } + /* 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: #ffffcc } + /* 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: #686868 } + /* 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: #686868 } + /* Line */ .chroma .line { display: flex; } + /* Keyword */ .chroma .k { color: #6ab825; font-weight: bold } + /* KeywordConstant */ .chroma .kc { color: #6ab825; font-weight: bold } + /* KeywordDeclaration */ .chroma .kd { color: #6ab825; font-weight: bold } + /* KeywordNamespace */ .chroma .kn { color: #6ab825; font-weight: bold } + /* KeywordPseudo */ .chroma .kp { color: #6ab825 } + /* KeywordReserved */ .chroma .kr { color: #6ab825; font-weight: bold } + /* KeywordType */ .chroma .kt { color: #6ab825; font-weight: bold } + /* Name */ .chroma .n { } + /* NameAttribute */ .chroma .na { color: #bbbbbb } + /* NameBuiltin */ .chroma .nb { color: #24909d } + /* NameBuiltinPseudo */ .chroma .bp { } + /* NameClass */ .chroma .nc { color: #558fdf; text-decoration: underline } + /* NameConstant */ .chroma .no { color: #40ffff } + /* NameDecorator */ .chroma .nd { color: #ffa500 } + /* NameEntity */ .chroma .ni { } + /* NameException */ .chroma .ne { color: #bbbbbb } + /* NameFunction */ .chroma .nf { color: #447fcf } + /* NameFunctionMagic */ .chroma .fm { } + /* NameLabel */ .chroma .nl { } + /* NameNamespace */ .chroma .nn { color: #447fcf; text-decoration: underline } + /* NameOther */ .chroma .nx { } + /* NameProperty */ .chroma .py { } + /* NameTag */ .chroma .nt { color: #6ab825; font-weight: bold } + /* NameVariable */ .chroma .nv { color: #40ffff } + /* NameVariableClass */ .chroma .vc { } + /* NameVariableGlobal */ .chroma .vg { } + /* NameVariableInstance */ .chroma .vi { } + /* NameVariableMagic */ .chroma .vm { } + /* Literal */ .chroma .l { } + /* LiteralDate */ .chroma .ld { } + /* LiteralString */ .chroma .s { color: #ed9d13 } + /* LiteralStringAffix */ .chroma .sa { color: #ed9d13 } + /* LiteralStringBacktick */ .chroma .sb { color: #ed9d13 } + /* LiteralStringChar */ .chroma .sc { color: #ed9d13 } + /* LiteralStringDelimiter */ .chroma .dl { color: #ed9d13 } + /* LiteralStringDoc */ .chroma .sd { color: #ed9d13 } + /* LiteralStringDouble */ .chroma .s2 { color: #ed9d13 } + /* LiteralStringEscape */ .chroma .se { color: #ed9d13 } + /* LiteralStringHeredoc */ .chroma .sh { color: #ed9d13 } + /* LiteralStringInterpol */ .chroma .si { color: #ed9d13 } + /* LiteralStringOther */ .chroma .sx { color: #ffa500 } + /* LiteralStringRegex */ .chroma .sr { color: #ed9d13 } + /* LiteralStringSingle */ .chroma .s1 { color: #ed9d13 } + /* LiteralStringSymbol */ .chroma .ss { color: #ed9d13 } + /* LiteralNumber */ .chroma .m { color: #3677a9 } + /* LiteralNumberBin */ .chroma .mb { color: #3677a9 } + /* LiteralNumberFloat */ .chroma .mf { color: #3677a9 } + /* LiteralNumberHex */ .chroma .mh { color: #3677a9 } + /* LiteralNumberInteger */ .chroma .mi { color: #3677a9 } + /* LiteralNumberIntegerLong */ .chroma .il { color: #3677a9 } + /* LiteralNumberOct */ .chroma .mo { color: #3677a9 } + /* Operator */ .chroma .o { color: #fa8a8a } + /* OperatorWord */ .chroma .ow { color: #6ab825; font-weight: bold } + /* Punctuation */ .chroma .p { } + /* Comment */ .chroma .c { color: #999999; font-style: italic } + /* CommentHashbang */ .chroma .ch { color: #999999; font-style: italic } + /* CommentMultiline */ .chroma .cm { color: #999999; font-style: italic } + /* CommentSingle */ .chroma .c1 { color: #999999; font-style: italic } + /* CommentSpecial */ .chroma .cs { color: #e50808; background-color: #520000; font-weight: bold } + /* CommentPreproc */ .chroma .cp { color: #cd2828; font-weight: bold } + /* CommentPreprocFile */ .chroma .cpf { color: #cd2828; font-weight: bold } + /* Generic */ .chroma .g { } + /* GenericDeleted */ .chroma .gd { color: #d22323 } + /* GenericEmph */ .chroma .ge { font-style: italic } + /* GenericError */ .chroma .gr { color: #d22323 } + /* GenericHeading */ .chroma .gh { color: #ffffff; font-weight: bold } + /* GenericInserted */ .chroma .gi { color: #589819 } + /* GenericOutput */ .chroma .go { color: #cccccc } + /* GenericPrompt */ .chroma .gp { color: #aaaaaa } + /* GenericStrong */ .chroma .gs { font-weight: bold } + /* GenericSubheading */ .chroma .gu { color: #ffffff; text-decoration: underline } + /* GenericTraceback */ .chroma .gt { color: #d22323 } + /* GenericUnderline */ .chroma .gl { text-decoration: underline } + /* TextWhitespace */ .chroma .w { color: #666666 } +} diff --git a/assets/css/highlight.css b/assets/css/highlight.css new file mode 100644 index 0000000..79bea26 --- /dev/null +++ b/assets/css/highlight.css @@ -0,0 +1,88 @@ +@media(prefers-color-scheme:light) { + /* Background */ .bg { background-color: #ffffff; } + /* PreWrapper */ .chroma { background-color: #ffffff; } + /* Other */ .chroma .x { } + /* Error */ .chroma .err { color: #ff0000; background-color: #ffaaaa } + /* 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: #ffffcc } + /* 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: #008800; font-weight: bold } + /* KeywordConstant */ .chroma .kc { color: #008800; font-weight: bold } + /* KeywordDeclaration */ .chroma .kd { color: #008800; font-weight: bold } + /* KeywordNamespace */ .chroma .kn { color: #008800; font-weight: bold } + /* KeywordPseudo */ .chroma .kp { color: #003388; font-weight: bold } + /* KeywordReserved */ .chroma .kr { color: #008800; font-weight: bold } + /* KeywordType */ .chroma .kt { color: #333399; font-weight: bold } + /* Name */ .chroma .n { } + /* NameAttribute */ .chroma .na { color: #0000cc } + /* NameBuiltin */ .chroma .nb { color: #007020 } + /* NameBuiltinPseudo */ .chroma .bp { } + /* NameClass */ .chroma .nc { color: #bb0066; font-weight: bold } + /* NameConstant */ .chroma .no { color: #003366; font-weight: bold } + /* NameDecorator */ .chroma .nd { color: #555555; font-weight: bold } + /* NameEntity */ .chroma .ni { color: #880000; font-weight: bold } + /* NameException */ .chroma .ne { color: #ff0000; font-weight: bold } + /* NameFunction */ .chroma .nf { color: #0066bb; font-weight: bold } + /* NameFunctionMagic */ .chroma .fm { } + /* NameLabel */ .chroma .nl { color: #997700; font-weight: bold } + /* NameNamespace */ .chroma .nn { color: #0e84b5; font-weight: bold } + /* NameOther */ .chroma .nx { } + /* NameProperty */ .chroma .py { } + /* NameTag */ .chroma .nt { color: #007700 } + /* NameVariable */ .chroma .nv { color: #996633 } + /* NameVariableClass */ .chroma .vc { color: #336699 } + /* NameVariableGlobal */ .chroma .vg { color: #dd7700; font-weight: bold } + /* NameVariableInstance */ .chroma .vi { color: #3333bb } + /* NameVariableMagic */ .chroma .vm { } + /* Literal */ .chroma .l { } + /* LiteralDate */ .chroma .ld { } + /* LiteralString */ .chroma .s { background-color: #fff0f0 } + /* LiteralStringAffix */ .chroma .sa { background-color: #fff0f0 } + /* LiteralStringBacktick */ .chroma .sb { background-color: #fff0f0 } + /* LiteralStringChar */ .chroma .sc { color: #0044dd; background-color: #fff0f0 } + /* LiteralStringDelimiter */ .chroma .dl { background-color: #fff0f0 } + /* LiteralStringDoc */ .chroma .sd { color: #dd4422; background-color: #fff0f0 } + /* LiteralStringDouble */ .chroma .s2 { background-color: #fff0f0 } + /* LiteralStringEscape */ .chroma .se { color: #666666; background-color: #fff0f0; font-weight: bold } + /* LiteralStringHeredoc */ .chroma .sh { background-color: #fff0f0 } + /* LiteralStringInterpol */ .chroma .si { background-color: #eeeeee } + /* LiteralStringOther */ .chroma .sx { color: #dd2200; background-color: #fff0f0 } + /* LiteralStringRegex */ .chroma .sr { color: #000000; background-color: #fff0ff } + /* LiteralStringSingle */ .chroma .s1 { background-color: #fff0f0 } + /* LiteralStringSymbol */ .chroma .ss { color: #774400; background-color: #fff0f0 } + /* LiteralNumber */ .chroma .m { color: #6600ee; font-weight: bold } + /* LiteralNumberBin */ .chroma .mb { color: #6600ee; font-weight: bold } + /* LiteralNumberFloat */ .chroma .mf { color: #6600ee; font-weight: bold } + /* LiteralNumberHex */ .chroma .mh { color: #005588; font-weight: bold } + /* LiteralNumberInteger */ .chroma .mi { color: #0000dd; font-weight: bold } + /* LiteralNumberIntegerLong */ .chroma .il { color: #6600ee; font-weight: bold } + /* LiteralNumberOct */ .chroma .mo { color: #4400ee; font-weight: bold } + /* Operator */ .chroma .o { color: #333333 } + /* OperatorWord */ .chroma .ow { color: #000000; font-weight: bold } + /* Punctuation */ .chroma .p { } + /* Comment */ .chroma .c { color: #666666; font-style: italic; } + /* CommentHashbang */ .chroma .ch { color: #666666; font-style: italic; } + /* CommentMultiline */ .chroma .cm { color: #666666; font-style: italic; } + /* CommentSingle */ .chroma .c1 { color: #666666; font-style: italic; } + /* CommentSpecial */ .chroma .cs { color: #cc0000; font-style: italic; font-weight: bold } + /* CommentPreproc */ .chroma .cp { color: #557799; font-style: italic; } + /* CommentPreprocFile */ .chroma .cpf { color: #557799; font-style: italic; } + /* Generic */ .chroma .g { } + /* GenericDeleted */ .chroma .gd { color: #a00000 } + /* GenericEmph */ .chroma .ge { font-style: italic } + /* GenericError */ .chroma .gr { color: #ff0000 } + /* GenericHeading */ .chroma .gh { color: #000080; font-weight: bold } + /* GenericInserted */ .chroma .gi { color: #00a000 } + /* GenericOutput */ .chroma .go { color: #888888 } + /* GenericPrompt */ .chroma .gp { color: #c65d09; font-weight: bold } + /* GenericStrong */ .chroma .gs { font-weight: bold } + /* GenericSubheading */ .chroma .gu { color: #800080; font-weight: bold } + /* GenericTraceback */ .chroma .gt { color: #0044dd } + /* GenericUnderline */ .chroma .gl { text-decoration: underline } + /* TextWhitespace */ .chroma .w { color: #bbbbbb } +} diff --git a/layouts/partials/head-extra.html b/layouts/partials/head-extra.html index 6d60ecd..e3f256f 100644 --- a/layouts/partials/head-extra.html +++ b/layouts/partials/head-extra.html @@ -2,3 +2,7 @@ +{{ $light := resources.Get "css/highlight.css" }} +{{ $dark := resources.Get "css/highdark.css" }} +{{ $code := slice $light $dark | resources.Concat "css/code.css" | minify | fingerprint }} + diff --git a/themes/victor b/themes/victor index 5228eac..97a9a32 160000 --- a/themes/victor +++ b/themes/victor @@ -1 +1 @@ -Subproject commit 5228eacde06900f669ebf57354bd17187804713a +Subproject commit 97a9a323478455bcc9a2e4a5dcd541047f6781b8 -- cgit 1.4.1