From a3692ec213ded4de6e2ab57d98b810a45e474daa Mon Sep 17 00:00:00 2001 From: Michael Rose Date: Fri, 5 Jan 2018 14:54:51 -0500 Subject: [PATCH] Improve syntax highlighting styles Replace hardcoded hex values with Sass variables in [Base16](http://chriskempson.com/projects/base16/) --- .../basically-basic/_syntax-highlighting.scss | 423 +++++++++++++----- _sass/basically-basic/_variables.scss | 18 + 2 files changed, 323 insertions(+), 118 deletions(-) diff --git a/_sass/basically-basic/_syntax-highlighting.scss b/_sass/basically-basic/_syntax-highlighting.scss index eb5d512..47b641a 100644 --- a/_sass/basically-basic/_syntax-highlighting.scss +++ b/_sass/basically-basic/_syntax-highlighting.scss @@ -2,126 +2,313 @@ Syntax highlighting ========================================================================== */ -.highlight { - padding: 1em; - background-color: $code-background-color; +div.highlighter-rouge, +figure.highlight { + position: relative; + margin-bottom: 1em; + background: $base00; + color: $base05; + font-family: $monospace-font-family; + line-height: 1.8; + + > pre, + pre.highlight { + margin: 0; + padding: 1em; + } +} + +.highlight table { + margin-bottom: 0; + font-size: 1em; + border: 0; + + td { + padding: 0; + width: calc(100% - 1em); + border: 0; + + /* line numbers*/ + &.gutter { + padding-right: 1em; + width: 1em; + color: $base04; + border-right: 1px solid $base04; + text-align: right; + } + + /* code */ + &.code { + padding-left: 1em; + } + } pre { - width: 100%; margin: 0; } - - table { - margin: 0; - border: 0; - font-size: 1em; - - tr { - border: 0; - } - - td { - padding: 5px; - border: 0; - - /* line numbers gutter */ - &.gutter { - padding-right: 1rem; - } - } - - pre { - margin: 0; - } - } - - /* line numbers */ - .lineno { - color: tint($base-color, 50%); - } - - /* - Solarized Light - http://ethanschoonover.com/solarized - - SOLARIZED HEX ROLE - --------- -------- ------------------------------------------ - base01 #586e75 body text / default code / primary content - base1 #93a1a1 comments / secondary content - base3 #fdf6e3 background - orange #cb4b16 constants - red #dc322f regex, special keywords - blue #22b3eb reserved keywords - cyan #2aa198 strings, numbers - green #859900 operators, other keywords - ========================================================================== */ - - .c { color: #93a1a1; } /* Comment */ - .err { color: #586e75; } /* Error */ - .g { color: #586e75; } /* Generic */ - .k { color: #859900; } /* Keyword */ - .l { color: #586e75; } /* Literal */ - .n { color: #586e75; } /* Name */ - .o { color: #859900; } /* Operator */ - .x { color: #cb4b16; } /* Other */ - .p { color: #586e75; } /* Punctuation */ - .cm { color: #93a1a1; } /* Comment.Multiline */ - .cp { color: #859900; } /* Comment.Preproc */ - .c1 { color: #93a1a1; } /* Comment.Single */ - .cs { color: #859900; } /* Comment.Special */ - .gd { color: #2aa198; } /* Generic.Deleted */ - .ge { color: #586e75; font-style: italic; } /* Generic.Emph */ - .gr { color: #dc322f; } /* Generic.Error */ - .gh { color: #cb4b16; } /* Generic.Heading */ - .gi { color: #859900; } /* Generic.Inserted */ - .go { color: #586e75; } /* Generic.Output */ - .gp { color: #586e75; } /* Generic.Prompt */ - .gs { color: #586e75; font-weight: bold; } /* Generic.Strong */ - .gu { color: #cb4b16; } /* Generic.Subheading */ - .gt { color: #586e75; } /* Generic.Traceback */ - .kc { color: #cb4b16; } /* Keyword.Constant */ - .kd { color: #22b3eb; } /* Keyword.Declaration */ - .kn { color: #859900; } /* Keyword.Namespace */ - .kp { color: #859900; } /* Keyword.Pseudo */ - .kr { color: #22b3eb; } /* Keyword.Reserved */ - .kt { color: #dc322f; } /* Keyword.Type */ - .ld { color: #586e75; } /* Literal.Date */ - .m { color: #2aa198; } /* Literal.Number */ - .s { color: #2aa198; } /* Literal.String */ - .na { color: #586e75; } /* Name.Attribute */ - .nb { color: #b58900; } /* Name.Builtin */ - .nc { color: #22b3eb; } /* Name.Class */ - .no { color: #cb4b16; } /* Name.Constant */ - .nd { color: #22b3eb; } /* Name.Decorator */ - .ni { color: #cb4b16; } /* Name.Entity */ - .ne { color: #cb4b16; } /* Name.Exception */ - .nf { color: #22b3eb; } /* Name.Function */ - .nl { color: #586e75; } /* Name.Label */ - .nn { color: #586e75; } /* Name.Namespace */ - .nx { color: #586e75; } /* Name.Other */ - .py { color: #586e75; } /* Name.Property */ - .nt { color: #22b3eb; } /* Name.Tag */ - .nv { color: #22b3eb; } /* Name.Variable */ - .ow { color: #859900; } /* Operator.Word */ - .w { color: #586e75; } /* Text.Whitespace */ - .mf { color: #2aa198; } /* Literal.Number.Float */ - .mh { color: #2aa198; } /* Literal.Number.Hex */ - .mi { color: #2aa198; } /* Literal.Number.Integer */ - .mo { color: #2aa198; } /* Literal.Number.Oct */ - .sb { color: #93a1a1; } /* Literal.String.Backtick */ - .sc { color: #2aa198; } /* Literal.String.Char */ - .sd { color: #586e75; } /* Literal.String.Doc */ - .s2 { color: #2aa198; } /* Literal.String.Double */ - .se { color: #cb4b16; } /* Literal.String.Escape */ - .sh { color: #586e75; } /* Literal.String.Heredoc */ - .si { color: #2aa198; } /* Literal.String.Interpol */ - .sx { color: #2aa198; } /* Literal.String.Other */ - .sr { color: #dc322f; } /* Literal.String.Regex */ - .s1 { color: #2aa198; } /* Literal.String.Single */ - .ss { color: #2aa198; } /* Literal.String.Symbol */ - .bp { color: #22b3eb; } /* Name.Builtin.Pseudo */ - .vc { color: #22b3eb; } /* Name.Variable.Class */ - .vg { color: #22b3eb; } /* Name.Variable.Global */ - .vi { color: #22b3eb; } /* Name.Variable.Instance */ - .il { color: #2aa198; } /* Literal.Number.Integer.Long */ +} + +.highlight pre { + width: 100%; +} + +.highlight .hll { + background-color: $base06; +} +.highlight { + .c { + /* Comment */ + color: $base04; + } + .err { + /* Error */ + color: $base08; + } + .k { + /* Keyword */ + color: $base0e; + } + .l { + /* Literal */ + color: $base09; + } + .n { + /* Name */ + color: $base05; + } + .o { + /* Operator */ + color: $base0c; + } + .p { + /* Punctuation */ + color: $base05; + } + .cm { + /* Comment.Multiline */ + color: $base04; + } + .cp { + /* Comment.Preproc */ + color: $base04; + } + .c1 { + /* Comment.Single */ + color: $base04; + } + .cs { + /* Comment.Special */ + color: $base04; + } + .gd { + /* Generic.Deleted */ + color: $base08; + } + .ge { + /* Generic.Emph */ + font-style: italic; + } + .gh { + /* Generic.Heading */ + color: $base05; + font-weight: bold; + } + .gi { + /* Generic.Inserted */ + color: $base0b; + } + .gp { + /* Generic.Prompt */ + color: $base04; + font-weight: bold; + } + .gs { + /* Generic.Strong */ + font-weight: bold; + } + .gu { + /* Generic.Subheading */ + color: $base0c; + font-weight: bold; + } + .kc { + /* Keyword.Constant */ + color: $base0e; + } + .kd { + /* Keyword.Declaration */ + color: $base0e; + } + .kn { + /* Keyword.Namespace */ + color: $base0c; + } + .kp { + /* Keyword.Pseudo */ + color: $base0e; + } + .kr { + /* Keyword.Reserved */ + color: $base0e; + } + .kt { + /* Keyword.Type */ + color: $base0a; + } + .ld { + /* Literal.Date */ + color: $base0b; + } + .m { + /* Literal.Number */ + color: $base09; + } + .s { + /* Literal.String */ + color: $base0b; + } + .na { + /* Name.Attribute */ + color: $base0d; + } + .nb { + /* Name.Builtin */ + color: $base05; + } + .nc { + /* Name.Class */ + color: $base0a; + } + .no { + /* Name.Constant */ + color: $base08; + } + .nd { + /* Name.Decorator */ + color: $base0c; + } + .ni { + /* Name.Entity */ + color: $base05; + } + .ne { + /* Name.Exception */ + color: $base08; + } + .nf { + /* Name.Function */ + color: $base0d; + } + .nl { + /* Name.Label */ + color: $base05; + } + .nn { + /* Name.Namespace */ + color: $base0a; + } + .nx { + /* Name.Other */ + color: $base0d; + } + .py { + /* Name.Property */ + color: $base05; + } + .nt { + /* Name.Tag */ + color: $base0c; + } + .nv { + /* Name.Variable */ + color: $base08; + } + .ow { + /* Operator.Word */ + color: $base0c; + } + .w { + /* Text.Whitespace */ + color: $base05; + } + .mf { + /* Literal.Number.Float */ + color: $base09; + } + .mh { + /* Literal.Number.Hex */ + color: $base09; + } + .mi { + /* Literal.Number.Integer */ + color: $base09; + } + .mo { + /* Literal.Number.Oct */ + color: $base09; + } + .sb { + /* Literal.String.Backtick */ + color: $base0b; + } + .sc { + /* Literal.String.Char */ + color: $base05; + } + .sd { + /* Literal.String.Doc */ + color: $base04; + } + .s2 { + /* Literal.String.Double */ + color: $base0b; + } + .se { + /* Literal.String.Escape */ + color: $base09; + } + .sh { + /* Literal.String.Heredoc */ + color: $base0b; + } + .si { + /* Literal.String.Interpol */ + color: $base09; + } + .sx { + /* Literal.String.Other */ + color: $base0b; + } + .sr { + /* Literal.String.Regex */ + color: $base0b; + } + .s1 { + /* Literal.String.Single */ + color: $base0b; + } + .ss { + /* Literal.String.Symbol */ + color: $base0b; + } + .bp { + /* Name.Builtin.Pseudo */ + color: $base05; + } + .vc { + /* Name.Variable.Class */ + color: $base08; + } + .vg { + /* Name.Variable.Global */ + color: $base08; + } + .vi { + /* Name.Variable.Instance */ + color: $base08; + } + .il { + /* Literal.Number.Integer.Long */ + color: $base09; + } } diff --git a/_sass/basically-basic/_variables.scss b/_sass/basically-basic/_variables.scss index 6a7a232..40dfded 100644 --- a/_sass/basically-basic/_variables.scss +++ b/_sass/basically-basic/_variables.scss @@ -57,6 +57,24 @@ $code-background-color: tint($base-color, 95%) !default; $border-color: tint($base-color, 80%) !default; $overlay-color: $base-color !default; +/* Syntax highlighting (base16) colors */ +$base00: #1c2023 !default; +$base01: #393f45 !default; +$base02: #565e65 !default; +$base03: #747c84 !default; +$base04: #adb3ba !default; +$base05: #c7ccd1 !default; +$base06: #dfe2e5 !default; +$base07: #f3f4f5 !default; +$base08: #c7ae95 !default; +$base09: #c7c795 !default; +$base0a: #aec795 !default; +$base0b: #95c7ae !default; +$base0c: #95aec7 !default; +$base0d: #ae95c7 !default; +$base0e: #c795ae !default; +$base0f: #c79595 !default; + /* Max-width of the main content */ $main-max-width: $xlarge !default;