Skip to content

Commit

Permalink
Fix syntax highlighting in rendered spec (#1008)
Browse files Browse the repository at this point in the history
* 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.
richvdh authored Mar 29, 2022

Unverified

This commit is not signed, but one or more authors requires that any commit attributed to them is signed.
1 parent 5a54ca6 commit d38663f
Showing 4 changed files with 113 additions and 1 deletion.
2 changes: 1 addition & 1 deletion .github/_typos.toml
Original file line number Diff line number Diff line change
@@ -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
8 changes: 8 additions & 0 deletions assets/scss/custom.scss
Original file line number Diff line number Diff line change
@@ -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);
82 changes: 82 additions & 0 deletions assets/scss/syntax.scss
Original file line number Diff line number Diff line change
@@ -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 }
22 changes: 22 additions & 0 deletions config.toml
Original file line number Diff line number Diff line change
@@ -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=<style> > assets/scss/syntax.scss
style = "tango"

# we enable CSS classes (instead of using inline styles) for compatibility with the CSP.
noClasses = false

# Everything below this are Site Params

[params]
@@ -82,3 +88,19 @@ rendered_data_collapsed = false
url = "https://twitter.com/matrixdotorg"
icon = "fab fa-twitter"
desc = "Matrix on Twitter"


# configuration for the hugo development server
[server]

# set HTTP response headers to match the production site. Compare the Apache config for `spec.matrix.org`.
[[server.headers]]
for = '/**'
[server.headers.values]
Content-Security-Policy = "default-src 'self'; style-src 'self'; script-src 'self'; img-src 'self' data:; connect-src 'self'; font-src 'self' data:; media-src 'self'; child-src 'self'; form-action 'self'; object-src 'self'"
X-XSS-Protection = "1; mode=block"
X-Content-Type-Options = "nosniff"
# Strict-Transport-Security = "max-age=31536000; includeSubDomains; preload"
X-Frame-Options = "sameorigin"
Access-Control-Allow-Origin = "*"
Access-Control-Allow-Methods = "GET"

0 comments on commit d38663f

Please sign in to comment.