Add code highlight

2 files changed, 262 insertions, 0 deletions

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 }
+}