From d38663f65dad9814d0d2c2727c22678035010620 Mon Sep 17 00:00:00 2001 From: Richard van der Hoff <1389908+richvdh@users.noreply.github.com> Date: Tue, 29 Mar 2022 16:02:48 +0100 Subject: [PATCH] Fix syntax highlighting in rendered spec (#1008) * Configure syntax highlighter to use CSS classes the inline `style` attributes cause CSP errors (and don't work). Instead, we can use proper CSS classes. * Configure response headers for Hugo dev server make the dev server serve response headers which match the live site, for better testing. --- .github/_typos.toml | 2 +- assets/scss/custom.scss | 8 ++++ assets/scss/syntax.scss | 82 +++++++++++++++++++++++++++++++++++++++++ config.toml | 22 +++++++++++ 4 files changed, 113 insertions(+), 1 deletion(-) create mode 100644 assets/scss/syntax.scss diff --git a/.github/_typos.toml b/.github/_typos.toml index 4aff005f..e48ab53c 100644 --- a/.github/_typos.toml +++ b/.github/_typos.toml @@ -1,5 +1,5 @@ [files] -extend-exclude = ["/themes", "/attic", "/data-definitions", "*.css", "package-lock.json"] +extend-exclude = ["/themes", "/attic", "/data-definitions", "*.css", "syntax.scss", "package-lock.json"] [default] check-filename = true diff --git a/assets/scss/custom.scss b/assets/scss/custom.scss index b1200f94..25a11c81 100644 --- a/assets/scss/custom.scss +++ b/assets/scss/custom.scss @@ -21,6 +21,14 @@ Custom SCSS for the Matrix spec @import "variables_project"; @import "variables"; +/* Import the CSS classes for the syntax highlighter. + * + * This is generated with: + * + * hugo gen chromastyles --style=tango > assets/scss/syntax.scss + */ +@import "syntax.scss"; + /* Overrides for the navbar */ .td-navbar { box-shadow: 0px 0px 8px rgba(179, 179, 179, 0.25); diff --git a/assets/scss/syntax.scss b/assets/scss/syntax.scss new file mode 100644 index 00000000..029bfcd3 --- /dev/null +++ b/assets/scss/syntax.scss @@ -0,0 +1,82 @@ +/* Background */ .chroma { background-color: #f8f8f8 } +/* Other */ .chroma .x { color: #000000 } +/* Error */ .chroma .err { color: #a40000 } +/* 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: #204a87; font-weight: bold } +/* KeywordConstant */ .chroma .kc { color: #204a87; font-weight: bold } +/* KeywordDeclaration */ .chroma .kd { color: #204a87; font-weight: bold } +/* KeywordNamespace */ .chroma .kn { color: #204a87; font-weight: bold } +/* KeywordPseudo */ .chroma .kp { color: #204a87; font-weight: bold } +/* KeywordReserved */ .chroma .kr { color: #204a87; font-weight: bold } +/* KeywordType */ .chroma .kt { color: #204a87; font-weight: bold } +/* Name */ .chroma .n { color: #000000 } +/* NameAttribute */ .chroma .na { color: #c4a000 } +/* NameBuiltin */ .chroma .nb { color: #204a87 } +/* NameBuiltinPseudo */ .chroma .bp { color: #3465a4 } +/* NameClass */ .chroma .nc { color: #000000 } +/* NameConstant */ .chroma .no { color: #000000 } +/* NameDecorator */ .chroma .nd { color: #5c35cc; font-weight: bold } +/* NameEntity */ .chroma .ni { color: #ce5c00 } +/* NameException */ .chroma .ne { color: #cc0000; font-weight: bold } +/* NameFunction */ .chroma .nf { color: #000000 } +/* NameFunctionMagic */ .chroma .fm { color: #000000 } +/* NameLabel */ .chroma .nl { color: #f57900 } +/* NameNamespace */ .chroma .nn { color: #000000 } +/* NameOther */ .chroma .nx { color: #000000 } +/* NameProperty */ .chroma .py { color: #000000 } +/* NameTag */ .chroma .nt { color: #204a87; font-weight: bold } +/* NameVariable */ .chroma .nv { color: #000000 } +/* NameVariableClass */ .chroma .vc { color: #000000 } +/* NameVariableGlobal */ .chroma .vg { color: #000000 } +/* NameVariableInstance */ .chroma .vi { color: #000000 } +/* NameVariableMagic */ .chroma .vm { color: #000000 } +/* Literal */ .chroma .l { color: #000000 } +/* LiteralDate */ .chroma .ld { color: #000000 } +/* LiteralString */ .chroma .s { color: #4e9a06 } +/* LiteralStringAffix */ .chroma .sa { color: #4e9a06 } +/* LiteralStringBacktick */ .chroma .sb { color: #4e9a06 } +/* LiteralStringChar */ .chroma .sc { color: #4e9a06 } +/* LiteralStringDelimiter */ .chroma .dl { color: #4e9a06 } +/* LiteralStringDoc */ .chroma .sd { color: #8f5902; font-style: italic } +/* LiteralStringDouble */ .chroma .s2 { color: #4e9a06 } +/* LiteralStringEscape */ .chroma .se { color: #4e9a06 } +/* LiteralStringHeredoc */ .chroma .sh { color: #4e9a06 } +/* LiteralStringInterpol */ .chroma .si { color: #4e9a06 } +/* LiteralStringOther */ .chroma .sx { color: #4e9a06 } +/* LiteralStringRegex */ .chroma .sr { color: #4e9a06 } +/* LiteralStringSingle */ .chroma .s1 { color: #4e9a06 } +/* LiteralStringSymbol */ .chroma .ss { color: #4e9a06 } +/* LiteralNumber */ .chroma .m { color: #0000cf; font-weight: bold } +/* LiteralNumberBin */ .chroma .mb { color: #0000cf; font-weight: bold } +/* LiteralNumberFloat */ .chroma .mf { color: #0000cf; font-weight: bold } +/* LiteralNumberHex */ .chroma .mh { color: #0000cf; font-weight: bold } +/* LiteralNumberInteger */ .chroma .mi { color: #0000cf; font-weight: bold } +/* LiteralNumberIntegerLong */ .chroma .il { color: #0000cf; font-weight: bold } +/* LiteralNumberOct */ .chroma .mo { color: #0000cf; font-weight: bold } +/* Operator */ .chroma .o { color: #ce5c00; font-weight: bold } +/* OperatorWord */ .chroma .ow { color: #204a87; font-weight: bold } +/* Punctuation */ .chroma .p { color: #000000; font-weight: bold } +/* Comment */ .chroma .c { color: #8f5902; font-style: italic } +/* CommentHashbang */ .chroma .ch { color: #8f5902; font-style: italic } +/* CommentMultiline */ .chroma .cm { color: #8f5902; font-style: italic } +/* CommentSingle */ .chroma .c1 { color: #8f5902; font-style: italic } +/* CommentSpecial */ .chroma .cs { color: #8f5902; font-style: italic } +/* CommentPreproc */ .chroma .cp { color: #8f5902; font-style: italic } +/* CommentPreprocFile */ .chroma .cpf { color: #8f5902; font-style: italic } +/* Generic */ .chroma .g { color: #000000 } +/* GenericDeleted */ .chroma .gd { color: #a40000 } +/* GenericEmph */ .chroma .ge { color: #000000; font-style: italic } +/* GenericError */ .chroma .gr { color: #ef2929 } +/* GenericHeading */ .chroma .gh { color: #000080; font-weight: bold } +/* GenericInserted */ .chroma .gi { color: #00a000 } +/* GenericOutput */ .chroma .go { color: #000000; font-style: italic } +/* GenericPrompt */ .chroma .gp { color: #8f5902 } +/* GenericStrong */ .chroma .gs { color: #000000; font-weight: bold } +/* GenericSubheading */ .chroma .gu { color: #800080; font-weight: bold } +/* GenericTraceback */ .chroma .gt { color: #a40000; font-weight: bold } +/* GenericUnderline */ .chroma .gl { color: #000000; text-decoration: underline } +/* TextWhitespace */ .chroma .w { color: #f8f8f8; text-decoration: underline } diff --git a/config.toml b/config.toml index fb4890ae..eabc50e2 100644 --- a/config.toml +++ b/config.toml @@ -27,8 +27,14 @@ weight = 1 unsafe = true [markup.highlight] # See a complete list of available styles at https://xyproto.github.io/splash/docs/all.html + # If the style is changed, remember to regenerate the CSS with: + # + # hugo gen chromastyles --style=