refactor(highlight): extract common parts of styles and keep line number visible when scrolling (#681)

* merge highlight.scss

* show line number when scroll

3 files changed, 445 insertions, 783 deletions

diff --git a/assets/scss/partials/highlight/common.scss b/assets/scss/partials/highlight/common.scss
new file mode 100644
index 0000000..c9b70bb
--- /dev/null
+++ b/assets/scss/partials/highlight/common.scss
@@ -0,0 +1,427 @@
+/* Background */
+.chroma {
+    color: $color;
+    background-color: $background-color;
+}
+
+/* Other */
+.chroma .x {
+}
+
+/* Error */
+.chroma .err {
+    color: $error-color;
+}
+
+/* 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: 100%;
+    display: block;
+
+    > tbody {
+        display: block;
+        width: 100%;
+        > tr {
+            display: flex;
+            width: 100%;
+            > td:last-child {
+                overflow-x: auto;
+            }
+        }
+    }
+}
+
+/* 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: $keyword-color;
+}
+
+/* KeywordConstant */
+.chroma .kc {
+    color: $keyword-color;
+}
+
+/* KeywordDeclaration */
+.chroma .kd {
+    color: $keyword-color;
+}
+
+/* KeywordNamespace */
+.chroma .kn {
+    color: #f92672;
+}
+
+/* KeywordPseudo */
+.chroma .kp {
+    color: $keyword-color;
+}
+
+/* KeywordReserved */
+.chroma .kr {
+    color: $keyword-color;
+}
+
+/* KeywordType */
+.chroma .kt {
+    color: $keyword-color;
+}
+
+/* Name */
+.chroma .n {
+    color: $text-color;
+}
+
+/* NameAttribute */
+.chroma .na {
+    color: $name-color;
+}
+
+/* NameBuiltin */
+.chroma .nb {
+    color: $text-color;
+}
+
+/* NameBuiltinPseudo */
+.chroma .bp {
+    color: $text-color;
+}
+
+/* NameClass */
+.chroma .nc {
+    color: $name-color;
+}
+
+/* NameConstant */
+.chroma .no {
+    color: $keyword-color;
+}
+
+/* NameDecorator */
+.chroma .nd {
+    color: $name-color;
+}
+
+/* NameEntity */
+.chroma .ni {
+    color: $text-color;
+}
+
+/* NameException */
+.chroma .ne {
+    color: $name-color;
+}
+
+/* NameFunction */
+.chroma .nf {
+    color: $name-color;
+}
+
+/* NameFunctionMagic */
+.chroma .fm {
+    color: $text-color;
+}
+
+/* NameLabel */
+.chroma .nl {
+    color: $text-color;
+}
+
+/* NameNamespace */
+.chroma .nn {
+    color: $text-color;
+}
+
+/* NameOther */
+.chroma .nx {
+    color: $name-color;
+}
+
+/* NameProperty */
+.chroma .py {
+    color: $text-color;
+}
+
+/* NameTag */
+.chroma .nt {
+    color: #f92672;
+}
+
+/* NameVariable */
+.chroma .nv {
+    color: $text-color;
+}
+
+/* NameVariableClass */
+.chroma .vc {
+    color: $text-color;
+}
+
+/* NameVariableGlobal */
+.chroma .vg {
+    color: $text-color;
+}
+
+/* NameVariableInstance */
+.chroma .vi {
+    color: $text-color;
+}
+
+/* NameVariableMagic */
+.chroma .vm {
+    color: $text-color;
+}
+
+/* Literal */
+.chroma .l {
+    color: #ae81ff;
+}
+
+/* LiteralDate */
+.chroma .ld {
+    color: $literal-color;
+}
+
+/* LiteralString */
+.chroma .s {
+    color: $literal-color;
+}
+
+/* LiteralStringAffix */
+.chroma .sa {
+    color: $literal-color;
+}
+
+/* LiteralStringBacktick */
+.chroma .sb {
+    color: $literal-color;
+}
+
+/* LiteralStringChar */
+.chroma .sc {
+    color: $literal-color;
+}
+
+/* LiteralStringDelimiter */
+.chroma .dl {
+    color: $literal-color;
+}
+
+/* LiteralStringDoc */
+.chroma .sd {
+    color: $literal-color;
+}
+
+/* LiteralStringDouble */
+.chroma .s2 {
+    color: $literal-color;
+}
+
+/* LiteralStringEscape */
+.chroma .se {
+    color: #ae81ff;
+}
+
+/* LiteralStringHeredoc */
+.chroma .sh {
+    color: $literal-color;
+}
+
+/* LiteralStringInterpol */
+.chroma .si {
+    color: $literal-color;
+}
+
+/* LiteralStringOther */
+.chroma .sx {
+    color: $literal-color;
+}
+
+/* LiteralStringRegex */
+.chroma .sr {
+    color: $literal-color;
+}
+
+/* LiteralStringSingle */
+.chroma .s1 {
+    color: $literal-color;
+}
+
+/* LiteralStringSymbol */
+.chroma .ss {
+    color: $literal-color;
+}
+
+/* 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: $text-color;
+}
+
+/* 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: $name-color;
+}
+
+/* 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 {
+}
diff --git a/assets/scss/partials/highlight/dark.scss b/assets/scss/partials/highlight/dark.scss
index 2c13946..0d3f330 100644
--- a/assets/scss/partials/highlight/dark.scss
+++ b/assets/scss/partials/highlight/dark.scss
@@ -3,382 +3,12 @@
 *   https://xyproto.github.io/splash/docs/monokai.html
 */
 
-/* Background */
-.chroma {
-    color: #f8f8f2;
-    background-color: #272822
-}
-
-/* Other */
-.chroma .x {}
-
-/* Error */
-.chroma .err {
-    color: #bb0064;
-}
-
-/* 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
+$color: #f8f8f2;
+$background-color: #272822;
+$error-color: #bb0064;
+$keyword-color: #66d9ef;
+$text-color: $color;
+$name-color: #a6e22e;
+$literal-color: #e6db74;
+
+@import "common.scss";
diff --git a/assets/scss/partials/highlight/light.scss b/assets/scss/partials/highlight/light.scss
index 1798218..174b649 100644
--- a/assets/scss/partials/highlight/light.scss
+++ b/assets/scss/partials/highlight/light.scss
@@ -3,407 +3,12 @@
 *   https://xyproto.github.io/splash/docs/monokailight.html
 */
 
-/* Background */
-.chroma {
-    color: #272822;
-    background-color: #fafafa;
-}
-
-/* Other */
-.chroma .x {
-}
-
-/* Error */
-.chroma .err {
-    color: #960050;
-}
-
-/* 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 {
-    color: #f92672;
-}
-/* GenericEmph */
-.chroma .ge {
-    font-style: italic;
-}
-/* GenericError */
-.chroma .gr {
-}
-/* GenericHeading */
-.chroma .gh {
-}
-/* GenericInserted */
-.chroma .gi {
-    color: #7ca727;
-}
-/* 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 {
-}
+$color: #272822;
+$background-color: #fafafa;
+$error-color: #960050;
+$keyword-color: #00a8c8;
+$text-color: #111111;
+$name-color: #75af00;
+$literal-color: #d88200;
+
+@import "common.scss";