Skip to content

Commit d38663f

Browse files
richvdhrichvdh
authored
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.
1 parent 5a54ca6 commit d38663f

File tree

4 files changed

+113
-1
lines changed

4 files changed

+113
-1
lines changed

‎.github/_typos.toml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
[files]
2-
extend-exclude = ["/themes", "/attic", "/data-definitions", "*.css", "package-lock.json"]
2+
extend-exclude = ["/themes", "/attic", "/data-definitions", "*.css", "syntax.scss", "package-lock.json"]
33

44
[default]
55
check-filename = true

‎assets/scss/custom.scss‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,14 @@ Custom SCSS for the Matrix spec
2121
@import "variables_project";
2222
@import "variables";
2323

24+
/* Import the CSS classes for the syntax highlighter.
25+
*
26+
* This is generated with:
27+
*
28+
* hugo gen chromastyles --style=tango > assets/scss/syntax.scss
29+
*/
30+
@import "syntax.scss";
31+
2432
/* Overrides for the navbar */
2533
.td-navbar {
2634
box-shadow: 0px 0px 8px rgba(179, 179, 179, 0.25);

‎assets/scss/syntax.scss‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
/* Background */ .chroma { background-color: #f8f8f8 }
2+
/* Other */ .chroma .x { color: #000000 }
3+
/* Error */ .chroma .err { color: #a40000 }
4+
/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
5+
/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; width: auto; overflow: auto; display: block; }
6+
/* LineHighlight */ .chroma .hl { display: block; width: 100%;background-color: #ffffcc }
7+
/* LineNumbersTable */ .chroma .lnt { margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
8+
/* LineNumbers */ .chroma .ln { margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
9+
/* Keyword */ .chroma .k { color: #204a87; font-weight: bold }
10+
/* KeywordConstant */ .chroma .kc { color: #204a87; font-weight: bold }
11+
/* KeywordDeclaration */ .chroma .kd { color: #204a87; font-weight: bold }
12+
/* KeywordNamespace */ .chroma .kn { color: #204a87; font-weight: bold }
13+
/* KeywordPseudo */ .chroma .kp { color: #204a87; font-weight: bold }
14+
/* KeywordReserved */ .chroma .kr { color: #204a87; font-weight: bold }
15+
/* KeywordType */ .chroma .kt { color: #204a87; font-weight: bold }
16+
/* Name */ .chroma .n { color: #000000 }
17+
/* NameAttribute */ .chroma .na { color: #c4a000 }
18+
/* NameBuiltin */ .chroma .nb { color: #204a87 }
19+
/* NameBuiltinPseudo */ .chroma .bp { color: #3465a4 }
20+
/* NameClass */ .chroma .nc { color: #000000 }
21+
/* NameConstant */ .chroma .no { color: #000000 }
22+
/* NameDecorator */ .chroma .nd { color: #5c35cc; font-weight: bold }
23+
/* NameEntity */ .chroma .ni { color: #ce5c00 }
24+
/* NameException */ .chroma .ne { color: #cc0000; font-weight: bold }
25+
/* NameFunction */ .chroma .nf { color: #000000 }
26+
/* NameFunctionMagic */ .chroma .fm { color: #000000 }
27+
/* NameLabel */ .chroma .nl { color: #f57900 }
28+
/* NameNamespace */ .chroma .nn { color: #000000 }
29+
/* NameOther */ .chroma .nx { color: #000000 }
30+
/* NameProperty */ .chroma .py { color: #000000 }
31+
/* NameTag */ .chroma .nt { color: #204a87; font-weight: bold }
32+
/* NameVariable */ .chroma .nv { color: #000000 }
33+
/* NameVariableClass */ .chroma .vc { color: #000000 }
34+
/* NameVariableGlobal */ .chroma .vg { color: #000000 }
35+
/* NameVariableInstance */ .chroma .vi { color: #000000 }
36+
/* NameVariableMagic */ .chroma .vm { color: #000000 }
37+
/* Literal */ .chroma .l { color: #000000 }
38+
/* LiteralDate */ .chroma .ld { color: #000000 }
39+
/* LiteralString */ .chroma .s { color: #4e9a06 }
40+
/* LiteralStringAffix */ .chroma .sa { color: #4e9a06 }
41+
/* LiteralStringBacktick */ .chroma .sb { color: #4e9a06 }
42+
/* LiteralStringChar */ .chroma .sc { color: #4e9a06 }
43+
/* LiteralStringDelimiter */ .chroma .dl { color: #4e9a06 }
44+
/* LiteralStringDoc */ .chroma .sd { color: #8f5902; font-style: italic }
45+
/* LiteralStringDouble */ .chroma .s2 { color: #4e9a06 }
46+
/* LiteralStringEscape */ .chroma .se { color: #4e9a06 }
47+
/* LiteralStringHeredoc */ .chroma .sh { color: #4e9a06 }
48+
/* LiteralStringInterpol */ .chroma .si { color: #4e9a06 }
49+
/* LiteralStringOther */ .chroma .sx { color: #4e9a06 }
50+
/* LiteralStringRegex */ .chroma .sr { color: #4e9a06 }
51+
/* LiteralStringSingle */ .chroma .s1 { color: #4e9a06 }
52+
/* LiteralStringSymbol */ .chroma .ss { color: #4e9a06 }
53+
/* LiteralNumber */ .chroma .m { color: #0000cf; font-weight: bold }
54+
/* LiteralNumberBin */ .chroma .mb { color: #0000cf; font-weight: bold }
55+
/* LiteralNumberFloat */ .chroma .mf { color: #0000cf; font-weight: bold }
56+
/* LiteralNumberHex */ .chroma .mh { color: #0000cf; font-weight: bold }
57+
/* LiteralNumberInteger */ .chroma .mi { color: #0000cf; font-weight: bold }
58+
/* LiteralNumberIntegerLong */ .chroma .il { color: #0000cf; font-weight: bold }
59+
/* LiteralNumberOct */ .chroma .mo { color: #0000cf; font-weight: bold }
60+
/* Operator */ .chroma .o { color: #ce5c00; font-weight: bold }
61+
/* OperatorWord */ .chroma .ow { color: #204a87; font-weight: bold }
62+
/* Punctuation */ .chroma .p { color: #000000; font-weight: bold }
63+
/* Comment */ .chroma .c { color: #8f5902; font-style: italic }
64+
/* CommentHashbang */ .chroma .ch { color: #8f5902; font-style: italic }
65+
/* CommentMultiline */ .chroma .cm { color: #8f5902; font-style: italic }
66+
/* CommentSingle */ .chroma .c1 { color: #8f5902; font-style: italic }
67+
/* CommentSpecial */ .chroma .cs { color: #8f5902; font-style: italic }
68+
/* CommentPreproc */ .chroma .cp { color: #8f5902; font-style: italic }
69+
/* CommentPreprocFile */ .chroma .cpf { color: #8f5902; font-style: italic }
70+
/* Generic */ .chroma .g { color: #000000 }
71+
/* GenericDeleted */ .chroma .gd { color: #a40000 }
72+
/* GenericEmph */ .chroma .ge { color: #000000; font-style: italic }
73+
/* GenericError */ .chroma .gr { color: #ef2929 }
74+
/* GenericHeading */ .chroma .gh { color: #000080; font-weight: bold }
75+
/* GenericInserted */ .chroma .gi { color: #00a000 }
76+
/* GenericOutput */ .chroma .go { color: #000000; font-style: italic }
77+
/* GenericPrompt */ .chroma .gp { color: #8f5902 }
78+
/* GenericStrong */ .chroma .gs { color: #000000; font-weight: bold }
79+
/* GenericSubheading */ .chroma .gu { color: #800080; font-weight: bold }
80+
/* GenericTraceback */ .chroma .gt { color: #a40000; font-weight: bold }
81+
/* GenericUnderline */ .chroma .gl { color: #000000; text-decoration: underline }
82+
/* TextWhitespace */ .chroma .w { color: #f8f8f8; text-decoration: underline }

‎config.toml‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,14 @@ weight = 1
2727
unsafe = true
2828
[markup.highlight]
2929
# See a complete list of available styles at https://xyproto.github.io/splash/docs/all.html
30+
# If the style is changed, remember to regenerate the CSS with:
31+
#
32+
# hugo gen chromastyles --style=<style> > assets/scss/syntax.scss
3033
style = "tango"
3134

35+
# we enable CSS classes (instead of using inline styles) for compatibility with the CSP.
36+
noClasses = false
37+
3238
# Everything below this are Site Params
3339

3440
[params]
@@ -82,3 +88,19 @@ rendered_data_collapsed = false
8288
url = "https://twitter.com/matrixdotorg"
8389
icon = "fab fa-twitter"
8490
desc = "Matrix on Twitter"
91+
92+
93+
# configuration for the hugo development server
94+
[server]
95+
96+
# set HTTP response headers to match the production site. Compare the Apache config for `spec.matrix.org`.
97+
[[server.headers]]
98+
for = '/**'
99+
[server.headers.values]
100+
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'"
101+
X-XSS-Protection = "1; mode=block"
102+
X-Content-Type-Options = "nosniff"
103+
# Strict-Transport-Security = "max-age=31536000; includeSubDomains; preload"
104+
X-Frame-Options = "sameorigin"
105+
Access-Control-Allow-Origin = "*"
106+
Access-Control-Allow-Methods = "GET"

0 commit comments

Comments
 (0)