From e1a85aa5cd5894807b3652ad3cb41645c2f9d511 Mon Sep 17 00:00:00 2001 From: Allen Guan Date: Sun, 2 Oct 2022 17:38:42 +0800 Subject: [PATCH] refactor(highlight): extract common parts of styles and keep line number visible when scrolling (#681) * merge highlight.scss * show line number when scroll --- assets/scss/partials/highlight/common.scss | 427 +++++++++++++++++++++ assets/scss/partials/highlight/dark.scss | 388 +------------------ assets/scss/partials/highlight/light.scss | 413 +------------------- 3 files changed, 445 insertions(+), 783 deletions(-) create mode 100644 assets/scss/partials/highlight/common.scss 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";