From ba23674640eea61a2931a4fc82514c28a1e6cdad Mon Sep 17 00:00:00 2001 From: TuckerD Date: Tue, 3 Aug 2021 16:18:19 -0400 Subject: [PATCH] Improve code blocks styling (#13) * add highlight config for code highlighter * add default pygment css "github" * fix styles for code blocks * remove dead html from margin note *These don't appear to do anything? * Fix scrolling in code block * More CSS fixes for code blocks * ignore generated scss files. Probably other generated files too * Use scss to generate more powerful styles for code blocks * Document new code blocks style option Improve code blocks styling --- .gitignore | 3 +- README.md | 1 + assets/scss/highlight-dark.scss | 12 ++ assets/scss/highlight-light.scss | 12 ++ .../scss/hugo-tufte.scss | 109 ++++++++++++------ assets/scss/syntax-dark.scss | 91 +++++++++++++++ assets/scss/syntax-light.scss | 69 +++++++++++ exampleSite/config.toml | 6 +- exampleSite/content/post/tufte-features.md | 23 +++- layouts/partials/header.includes.html | 27 ++++- static/css/syntax.css | 82 ------------- 11 files changed, 311 insertions(+), 124 deletions(-) create mode 100644 assets/scss/highlight-dark.scss create mode 100644 assets/scss/highlight-light.scss rename static/css/hugo-tufte.css => assets/scss/hugo-tufte.scss (80%) create mode 100644 assets/scss/syntax-dark.scss create mode 100644 assets/scss/syntax-light.scss delete mode 100644 static/css/syntax.css diff --git a/.gitignore b/.gitignore index f48eee9..049bf30 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,3 @@ exampleSite/public/* -*.patch \ No newline at end of file +*.patch +exampleSite/resources/_gen/ diff --git a/README.md b/README.md index b722c61..d2d2efc 100644 --- a/README.md +++ b/README.md @@ -53,6 +53,7 @@ The site specific parameters that this theme recognizes are: - `copyright` string: Custom copyright notice. - `math` boolean: Site wide kill switch for Latex support - `katex` boolean: if "katex" is set to true katex will be used to render LaTex, if not MathJax will be used instead +- `codeBlocksDark` boolean: if true, code blocks will use a dark theme. ### Page Parameters diff --git a/assets/scss/highlight-dark.scss b/assets/scss/highlight-dark.scss new file mode 100644 index 0000000..1016174 --- /dev/null +++ b/assets/scss/highlight-dark.scss @@ -0,0 +1,12 @@ +$ht-code-bgcolor: #282a36; + +@import "syntax-dark.scss"; + +.highlight { + &::-webkit-scrollbar { + background: $ht-code-bgcolor; + } + &::-webkit-scrollbar-thumb { + background: scale-color($ht-code-bgcolor, $lightness: 23%, $saturation: -40%); + } +} \ No newline at end of file diff --git a/assets/scss/highlight-light.scss b/assets/scss/highlight-light.scss new file mode 100644 index 0000000..5a1303d --- /dev/null +++ b/assets/scss/highlight-light.scss @@ -0,0 +1,12 @@ +$ht-code-bgcolor: #dde2ff; + +@import "syntax-light.scss"; + +.highlight { + &::-webkit-scrollbar { + background: $ht-code-bgcolor; + } + &::-webkit-scrollbar-thumb { + background: scale-color($ht-code-bgcolor, $lightness: -13%, $saturation: -80%); + } +} \ No newline at end of file diff --git a/static/css/hugo-tufte.css b/assets/scss/hugo-tufte.scss similarity index 80% rename from static/css/hugo-tufte.css rename to assets/scss/hugo-tufte.scss index 6d61172..c566066 100644 --- a/static/css/hugo-tufte.css +++ b/assets/scss/hugo-tufte.scss @@ -13,11 +13,9 @@ html, button, input, select, textarea, p, nav, section, article, header, footer, font-family: "et-book", -apple-system, "San Francisco", "Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Open Sans","Helvetica Neue", "Lucida Grand", sans-serif; } -/* Hugo code blocks are 
...
*/ -/*@media screen and (max-width: 760px) { - pre code { - } -}*/ +p { + text-align: justify; +} code { font-family: "Fira Code", Consolas, "Liberation Mono", Menlo, Courier, monospace; @@ -25,31 +23,64 @@ code { line-height: 1.6; } -div.highlight{ - /* width: 52.5%; */ -} -/* blockquote { - width: 52.5%; +$ht-code-border-radius: .4em; +.highlight { + width: 55%; + overflow-x: scroll; + border-radius: $ht-code-border-radius; + + &>div.chroma>table.lntable{ + margin: $ht-code-border-radius 0 $ht-code-border-radius 0; + & td:first-of-type { + & span:not(& span>span) { + padding: 0 .75em 0 .5em; + } + } + } + &>.chroma>code { -} */ -div.highlight::hover{ - width: 100%; + width: max-content; + margin-top: .5em; + margin-bottom: .5em; + margin-left: .5em; + &>span.hl{ + margin-left: -.5em; + padding-left: .5em; + } + } + + .chroma .hl { + // border-radius: $ht-code-border-radius / 2; + display: block; + } + + &::-webkit-scrollbar { + border-radius: $ht-code-border-radius; + width: 10px; + height: 1rem; + } + &::-webkit-scrollbar-thumb { + border-radius: $ht-code-border-radius; + } } -pre code { - width: 52.5%; +.highlight .lntable { + overflow: initial; +} + +.highlight pre { + margin: 0; +} + +.highlight pre code { display: block; font-size: 1rem; - padding-left: 2.5%; - overflow-x: scroll; } -/*@media (max-width: 760px) { - pre code { - width: 90%; - padding: 0; - } - }*/ +.sidenote, .marginnote { + margin-right: -55%; + width: 45%; +} /* ------------------------------------------------------------------------ */ /* Brand details, such as a sidebar or top display. */ @@ -155,16 +186,19 @@ h1.content-title a:focus { /* ------------------------------------------------------------------------ */ /* Styling for listing pages. */ /* ------------------------------------------------------------------------ */ -.list-page ul { - list-style-type: none; - margin: -0.25em; - width: 87.5%; - max-width: 45rem; -} -.list-page li { +.list-page { + ul { + list-style-type: none; + margin: -0.25em; + width: 87.5%; + max-width: 45rem; + } + li { margin: 0; /*font-size: 95%;*/ } +} +.list-page .list-date { display: inline; font-size: 0.75em; @@ -199,7 +233,7 @@ h1.content-title a:focus { margin: 1rem; } -table { +table:not(.lntable) { margin-top: 1em; font-size: 1.4rem; width: auto; /* making booktabs style tables the unstyled default in case someone uses Markdown styling */ @@ -209,15 +243,24 @@ table { border-bottom: 2px solid #111; } -th, td{ +table:not(.lntable) th, table:not(.lntable) td{ font-size: 1.25rem; line-height: 1.71428571; } -td { +table:not(.lntable) td { padding-right: 0.75em; } +table.lntable +{ + td.lntd { + padding: 0em; + } + border-spacing: 0; + padding: 0; +} + /* Footer, but with a different name to avoid conflicts with tufte.css */ footer.page-footer{ padding-top: 1em; diff --git a/assets/scss/syntax-dark.scss b/assets/scss/syntax-dark.scss new file mode 100644 index 0000000..5cd9360 --- /dev/null +++ b/assets/scss/syntax-dark.scss @@ -0,0 +1,91 @@ +/* Dracula Theme v1.2.5 + * + * https://github.com/zenorocha/dracula-theme + * + * Copyright 2016, All rights reserved + * + * Code licensed under the MIT license + * http://zenorocha.mit-license.org + * + * @author Rob G + * @author Chris Bracco + * @author Zeno Rocha + */ + + .highlight .hl { background-color: scale-color($ht-code-bgcolor, $lightness: 32%, $saturation: -40%) } + .highlight { background: $ht-code-bgcolor; color: #f8f8f2 } + .highlight .c { color: #6272a4 } /* Comment */ + .highlight .err { color: #f8f8f2 } /* Error */ + .highlight .g { color: #f8f8f2 } /* Generic */ + .highlight .k { color: #ff79c6 } /* Keyword */ + .highlight .l { color: #f8f8f2 } /* Literal */ + .highlight .n { color: #f8f8f2 } /* Name */ + .highlight .o { color: #ff79c6 } /* Operator */ + .highlight .x { color: #f8f8f2 } /* Other */ + .highlight .p { color: #f8f8f2 } /* Punctuation */ + .highlight .ch { color: #6272a4 } /* Comment.Hashbang */ + .highlight .cm { color: #6272a4 } /* Comment.Multiline */ + .highlight .cp { color: #ff79c6 } /* Comment.Preproc */ + .highlight .cpf { color: #6272a4 } /* Comment.PreprocFile */ + .highlight .c1 { color: #6272a4 } /* Comment.Single */ + .highlight .cs { color: #6272a4 } /* Comment.Special */ + .highlight .gd { color: #8b080b } /* Generic.Deleted */ + .highlight .ge { color: #f8f8f2; text-decoration: underline } /* Generic.Emph */ + .highlight .gr { color: #f8f8f2 } /* Generic.Error */ + .highlight .gh { color: #f8f8f2; font-weight: bold } /* Generic.Heading */ + .highlight .gi { color: #f8f8f2; font-weight: bold } /* Generic.Inserted */ + .highlight .go { color: #44475a } /* Generic.Output */ + .highlight .gp { color: #f8f8f2 } /* Generic.Prompt */ + .highlight .gs { color: #f8f8f2 } /* Generic.Strong */ + .highlight .gu { color: #f8f8f2; font-weight: bold } /* Generic.Subheading */ + .highlight .gt { color: #f8f8f2 } /* Generic.Traceback */ + .highlight .kc { color: #ff79c6 } /* Keyword.Constant */ + .highlight .kd { color: #8be9fd; font-style: italic } /* Keyword.Declaration */ + .highlight .kn { color: #ff79c6 } /* Keyword.Namespace */ + .highlight .kp { color: #ff79c6 } /* Keyword.Pseudo */ + .highlight .kr { color: #ff79c6 } /* Keyword.Reserved */ + .highlight .kt { color: #8be9fd } /* Keyword.Type */ + .highlight .ld { color: #f8f8f2 } /* Literal.Date */ + .highlight .m { color: #bd93f9 } /* Literal.Number */ + .highlight .s { color: #f1fa8c } /* Literal.String */ + .highlight .na { color: #50fa7b } /* Name.Attribute */ + .highlight .nb { color: #8be9fd; font-style: italic } /* Name.Builtin */ + .highlight .nc { color: #50fa7b } /* Name.Class */ + .highlight .no { color: #f8f8f2 } /* Name.Constant */ + .highlight .nd { color: #f8f8f2 } /* Name.Decorator */ + .highlight .ni { color: #f8f8f2 } /* Name.Entity */ + .highlight .ne { color: #f8f8f2 } /* Name.Exception */ + .highlight .nf { color: #50fa7b } /* Name.Function */ + .highlight .nl { color: #8be9fd; font-style: italic } /* Name.Label */ + .highlight .nn { color: #f8f8f2 } /* Name.Namespace */ + .highlight .nx { color: #f8f8f2 } /* Name.Other */ + .highlight .py { color: #f8f8f2 } /* Name.Property */ + .highlight .nt { color: #ff79c6 } /* Name.Tag */ + .highlight .nv { color: #8be9fd; font-style: italic } /* Name.Variable */ + .highlight .ow { color: #ff79c6 } /* Operator.Word */ + .highlight .w { color: #f8f8f2 } /* Text.Whitespace */ + .highlight .mb { color: #bd93f9 } /* Literal.Number.Bin */ + .highlight .mf { color: #bd93f9 } /* Literal.Number.Float */ + .highlight .mh { color: #bd93f9 } /* Literal.Number.Hex */ + .highlight .mi { color: #bd93f9 } /* Literal.Number.Integer */ + .highlight .mo { color: #bd93f9 } /* Literal.Number.Oct */ + .highlight .sa { color: #f1fa8c } /* Literal.String.Affix */ + .highlight .sb { color: #f1fa8c } /* Literal.String.Backtick */ + .highlight .sc { color: #f1fa8c } /* Literal.String.Char */ + .highlight .dl { color: #f1fa8c } /* Literal.String.Delimiter */ + .highlight .sd { color: #f1fa8c } /* Literal.String.Doc */ + .highlight .s2 { color: #f1fa8c } /* Literal.String.Double */ + .highlight .se { color: #f1fa8c } /* Literal.String.Escape */ + .highlight .sh { color: #f1fa8c } /* Literal.String.Heredoc */ + .highlight .si { color: #f1fa8c } /* Literal.String.Interpol */ + .highlight .sx { color: #f1fa8c } /* Literal.String.Other */ + .highlight .sr { color: #f1fa8c } /* Literal.String.Regex */ + .highlight .s1 { color: #f1fa8c } /* Literal.String.Single */ + .highlight .ss { color: #f1fa8c } /* Literal.String.Symbol */ + .highlight .bp { color: #f8f8f2; font-style: italic } /* Name.Builtin.Pseudo */ + .highlight .fm { color: #50fa7b } /* Name.Function.Magic */ + .highlight .vc { color: #8be9fd; font-style: italic } /* Name.Variable.Class */ + .highlight .vg { color: #8be9fd; font-style: italic } /* Name.Variable.Global */ + .highlight .vi { color: #8be9fd; font-style: italic } /* Name.Variable.Instance */ + .highlight .vm { color: #8be9fd; font-style: italic } /* Name.Variable.Magic */ + .highlight .il { color: #bd93f9 } /* Literal.Number.Integer.Long */ \ No newline at end of file diff --git a/assets/scss/syntax-light.scss b/assets/scss/syntax-light.scss new file mode 100644 index 0000000..b27f7ff --- /dev/null +++ b/assets/scss/syntax-light.scss @@ -0,0 +1,69 @@ +.highlight .hl { background-color: #ffffd4 } +.highlight { background: $ht-code-bgcolor;} +.highlight .c { color: #6a737d } /* Comment */ +.highlight .err { } /* Error */ +.highlight .k { color: #d73a49 } /* Keyword */ +.highlight .o { } /* Operator */ +.highlight .ch { color: #6a737d } /* Comment.Hashbang */ +.highlight .cm { color: #6a737d } /* Comment.Multiline */ +.highlight .cp { color: #d73a49 } /* Comment.Preproc */ +.highlight .cpf { color: #032f62 } /* Comment.PreprocFile */ +.highlight .c1 { color: #6a737d } /* Comment.Single */ +.highlight .cs { color: #6a737d } /* Comment.Special */ +.highlight .gd { color: #b31d28; background-color: #ffeef0 } /* Generic.Deleted */ +.highlight .ge { } /* Generic.Emph */ +.highlight .gr { } /* Generic.Error */ +.highlight .gh { color: #005cc5 } /* Generic.Heading */ +.highlight .gi { color: #22863a; background-color: #f0fff4 } /* Generic.Inserted */ +.highlight .go { } /* Generic.Output */ +.highlight .gp { } /* Generic.Prompt */ +.highlight .gs { font-weight: bold } /* Generic.Strong */ +.highlight .gu { color: #6f42c1; font-weight: bold } /* Generic.Subheading */ +.highlight .gt { color: #0044DD } /* Generic.Traceback */ +.highlight .kc { color: #005cc5 } /* Keyword.Constant */ +.highlight .kd { color: #d73a49 } /* Keyword.Declaration */ +.highlight .kn { color: #d73a49 } /* Keyword.Namespace */ +.highlight .kp { color: #d73a49 } /* Keyword.Pseudo */ +.highlight .kr { color: #d73a49 } /* Keyword.Reserved */ +.highlight .kt { color: #d73a49 } /* Keyword.Type */ +.highlight .m { color: #666666 } /* Literal.Number */ +.highlight .s { color: #032f62 } /* Literal.String */ +.highlight .na { } /* Name.Attribute */ +.highlight .nb { color: #005cc5 } /* Name.Builtin */ +.highlight .nc { color: #6f42c1 } /* Name.Class */ +.highlight .no { color: #005cc5 } /* Name.Constant */ +.highlight .nd { color: #6f42c1 } /* Name.Decorator */ +.highlight .ni { color: #005cc5 } /* Name.Entity */ +.highlight .ne { color: #005cc5 } /* Name.Exception */ +.highlight .nf { color: #6f42c1 } /* Name.Function */ +.highlight .nl { color: #005cc5 } /* Name.Label */ +.highlight .nn { color: #6f42c1 } /* Name.Namespace */ +.highlight .nt { color: #22863a } /* Name.Tag */ +.highlight .nv { color: #24292e } /* Name.Variable */ +.highlight .ow { color: #d73a49; } /* Operator.Word */ +.highlight .w { color: #bbbbbb } /* Text.Whitespace */ +.highlight .mb { color: #005cc5 } /* Literal.Number.Bin */ +.highlight .mf { color: #005cc5 } /* Literal.Number.Float */ +.highlight .mh { color: #005cc5 } /* Literal.Number.Hex */ +.highlight .mi { color: #005cc5 } /* Literal.Number.Integer */ +.highlight .mo { color: #005cc5 } /* Literal.Number.Oct */ +.highlight .sa { color: #d73a49 } /* Literal.String.Affix */ +.highlight .sb { color: #032f62 } /* Literal.String.Backtick */ +.highlight .sc { color: #032f62 } /* Literal.String.Char */ +.highlight .dl { color: #d73a49 } /* Literal.String.Delimiter */ +.highlight .sd { color: #032f62 } /* Literal.String.Doc */ +.highlight .s2 { color: #032f62 } /* Literal.String.Double */ +.highlight .se { color: #032f62 } /* Literal.String.Escape */ +.highlight .sh { color: #032f62 } /* Literal.String.Heredoc */ +.highlight .si { color: #005cc5 } /* Literal.String.Interpol */ +.highlight .sx { color: #032f62 } /* Literal.String.Other */ +.highlight .sr { color: #032f62 } /* Literal.String.Regex */ +.highlight .s1 { color: #032f62 } /* Literal.String.Single */ +.highlight .ss { color: #005cc5 } /* Literal.String.Symbol */ +.highlight .bp { color: #005cc5 } /* Name.Builtin.Pseudo */ +.highlight .fm { color: #005cc5 } /* Name.Function.Magic */ +.highlight .vc { color: #24292e } /* Name.Variable.Class */ +.highlight .vg { color: #24292e } /* Name.Variable.Global */ +.highlight .vi { color: #24292e } /* Name.Variable.Instance */ +.highlight .vm { color: #005cc5 } /* Name.Variable.Magic */ +.highlight .il { color: #005cc5 } /* Literal.Number.Integer.Long */ \ No newline at end of file diff --git a/exampleSite/config.toml b/exampleSite/config.toml index 5680805..00a69a7 100644 --- a/exampleSite/config.toml +++ b/exampleSite/config.toml @@ -22,6 +22,8 @@ katex = false showPoweredBy = true # Site wide kill switch hidedate = false + # Uncomment for dark code blocks + # codeBlocksDark = true [taxonomies] category = "categories" @@ -77,6 +79,8 @@ katex = false [markup.goldmark] [markup.goldmark.renderer] unsafe = true # make the shortcodes work + [markup.highlight] + noClasses = false -pygmentsUseClasses=true +pygmentsUseClasses = true canonifyurls = true \ No newline at end of file diff --git a/exampleSite/content/post/tufte-features.md b/exampleSite/content/post/tufte-features.md index 3eeb235..b145a0d 100644 --- a/exampleSite/content/post/tufte-features.md +++ b/exampleSite/content/post/tufte-features.md @@ -60,7 +60,8 @@ $$ is produced from -``` + +```txt

$$ \begin{aligned} @@ -100,7 +101,7 @@ the `newthought` shortcode. ### Code As an example of some inline code: `go test -v -short`. And this is some block-code: -```go +```go {linenos=table,hl_lines=["2-5"],linenostart=199} package main import "log" @@ -115,6 +116,24 @@ func main() { log.Println(y) } ``` + +Here's an example without line numbers. +```go {hl_lines=["2-5"],linenostart=199} +package main + +import "log" + +func add(x int, y int) int { + log.Println("We are going to take the sum of two numbers, and leave a very very very long comment.") + return x + y +} + +func main() { + y := add(1, 2) + log.Println(y) +} +``` + ### Figure Below we have an example of a regular width figure. {{< figure diff --git a/layouts/partials/header.includes.html b/layouts/partials/header.includes.html index 5059dde..69d85ae 100644 --- a/layouts/partials/header.includes.html +++ b/layouts/partials/header.includes.html @@ -16,9 +16,26 @@ - - - - - + + +{{ if .Site.Params.codeBlocksDark }} + {{ $codeoptions := (dict "targetPath" "/css/highlight-dark.min.css" "outputStyle" "compressed" "enableSourceMap" true) }} + {{ $style := resources.Get "scss/highlight-dark.scss" | resources.ToCSS $codeoptions }} + + +{{ else }} + {{ $codeoptions := (dict "targetPath" "/css/highlight-light.min.css" "outputStyle" "compressed" "enableSourceMap" true) }} + {{ $codestyle := resources.Get "scss/highlight-light.scss" | resources.ToCSS $codeoptions }} + + +{{ end }} + + + +{{ $htoptions := (dict "targetPath" "/css/hugo-tufte.min.css" "outputStyle" "compressed" "enableSourceMap" true) }} +{{ $htstyle := resources.Get "scss/hugo-tufte.scss" | resources.ToCSS $htoptions }} + + + + diff --git a/static/css/syntax.css b/static/css/syntax.css deleted file mode 100644 index 20458cb..0000000 --- a/static/css/syntax.css +++ /dev/null @@ -1,82 +0,0 @@ -/* Background */ .chroma { background-color: #ffffff } -/* Other */ .chroma .x { } -/* Error */ .chroma .err { } -/* 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 { font-weight: bold } -/* KeywordConstant */ .chroma .kc { font-weight: bold } -/* KeywordDeclaration */ .chroma .kd { font-weight: bold; font-style: italic } -/* KeywordNamespace */ .chroma .kn { font-weight: bold } -/* KeywordPseudo */ .chroma .kp { font-weight: bold } -/* KeywordReserved */ .chroma .kr { font-weight: bold } -/* KeywordType */ .chroma .kt { font-weight: bold } -/* Name */ .chroma .n { } -/* NameAttribute */ .chroma .na { } -/* NameBuiltin */ .chroma .nb { font-weight: bold; font-style: italic } -/* NameBuiltinPseudo */ .chroma .bp { font-weight: bold; font-style: italic } -/* NameClass */ .chroma .nc { color: #666666; font-weight: bold; font-style: italic } -/* NameConstant */ .chroma .no { color: #666666; font-weight: bold; font-style: italic } -/* NameDecorator */ .chroma .nd { } -/* NameEntity */ .chroma .ni { } -/* NameException */ .chroma .ne { } -/* NameFunction */ .chroma .nf { color: #666666; font-weight: bold; font-style: italic } -/* NameFunctionMagic */ .chroma .fm { } -/* NameLabel */ .chroma .nl { } -/* NameNamespace */ .chroma .nn { color: #666666; font-weight: bold; font-style: italic } -/* NameOther */ .chroma .nx { } -/* NameProperty */ .chroma .py { } -/* NameTag */ .chroma .nt { } -/* NameVariable */ .chroma .nv { color: #666666; font-weight: bold; font-style: italic } -/* NameVariableClass */ .chroma .vc { } -/* NameVariableGlobal */ .chroma .vg { } -/* NameVariableInstance */ .chroma .vi { } -/* NameVariableMagic */ .chroma .vm { } -/* Literal */ .chroma .l { } -/* LiteralDate */ .chroma .ld { } -/* LiteralString */ .chroma .s { color: #666666; font-style: italic } -/* LiteralStringAffix */ .chroma .sa { color: #666666; font-style: italic } -/* LiteralStringBacktick */ .chroma .sb { color: #666666; font-style: italic } -/* LiteralStringChar */ .chroma .sc { color: #666666; font-style: italic } -/* LiteralStringDelimiter */ .chroma .dl { color: #666666; font-style: italic } -/* LiteralStringDoc */ .chroma .sd { color: #666666; font-style: italic } -/* LiteralStringDouble */ .chroma .s2 { color: #666666; font-style: italic } -/* LiteralStringEscape */ .chroma .se { color: #666666; font-style: italic } -/* LiteralStringHeredoc */ .chroma .sh { color: #666666; font-style: italic } -/* LiteralStringInterpol */ .chroma .si { color: #666666; font-style: italic } -/* LiteralStringOther */ .chroma .sx { color: #666666; font-style: italic } -/* LiteralStringRegex */ .chroma .sr { color: #666666; font-style: italic } -/* LiteralStringSingle */ .chroma .s1 { color: #666666; font-style: italic } -/* LiteralStringSymbol */ .chroma .ss { color: #666666; font-style: italic } -/* LiteralNumber */ .chroma .m { } -/* LiteralNumberBin */ .chroma .mb { } -/* LiteralNumberFloat */ .chroma .mf { } -/* LiteralNumberHex */ .chroma .mh { } -/* LiteralNumberInteger */ .chroma .mi { } -/* LiteralNumberIntegerLong */ .chroma .il { } -/* LiteralNumberOct */ .chroma .mo { } -/* Operator */ .chroma .o { } -/* OperatorWord */ .chroma .ow { font-weight: bold } -/* Punctuation */ .chroma .p { } -/* Comment */ .chroma .c { color: #888888; font-style: italic } -/* CommentHashbang */ .chroma .ch { color: #888888; font-style: italic } -/* CommentMultiline */ .chroma .cm { color: #888888; font-style: italic } -/* CommentSingle */ .chroma .c1 { color: #888888; font-style: italic } -/* CommentSpecial */ .chroma .cs { color: #888888; font-weight: bold } -/* CommentPreproc */ .chroma .cp { color: #888888; font-weight: bold } -/* CommentPreprocFile */ .chroma .cpf { color: #888888; font-weight: bold } -/* Generic */ .chroma .g { } -/* GenericDeleted */ .chroma .gd { } -/* GenericEmph */ .chroma .ge { } -/* GenericError */ .chroma .gr { } -/* GenericHeading */ .chroma .gh { } -/* GenericInserted */ .chroma .gi { } -/* GenericOutput */ .chroma .go { } -/* GenericPrompt */ .chroma .gp { } -/* GenericStrong */ .chroma .gs { } -/* GenericSubheading */ .chroma .gu { } -/* GenericTraceback */ .chroma .gt { } -/* GenericUnderline */ .chroma .gl { } -/* TextWhitespace */ .chroma .w { }