Skip to content

Commit d1470e0

Browse files
justinmkjustinmk
committed
style: use Neovim theme for codeblock highlighting
close #388
1 parent eb266d7 commit d1470e0

File tree

5 files changed

+179
-61
lines changed

5 files changed

+179
-61
lines changed

‎README.md‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,3 +39,16 @@ Notes:
3939
- The javascript and UI container were setup in [this commit](https://github.com/neovim/neovim.github.io/commit/ce9aef12eb1c98135965e3a9c5c792bf9e506a76).
4040
- The docs pages don't use the layout so they also need to [manually include](https://github.com/neovim/neovim/pull/23839) the javascript and define a UI container.
4141
- Admin: https://www.algolia.com/apps/X185E15FPG/dashboard
42+
- Codeblock highlighting
43+
- The highlighting for the generated help docs (`/doc/user/`) is done by:
44+
- `static/css/neovim-hi.css`
45+
- `static/highlight/styles/neovim.min.css`
46+
- [gen_help_html.lua](https://github.com/neovim/neovim/blob/a88c7962a82f1427aa90d1c0a08514423516f9f2/src/gen/gen_help_html.lua#L884-L887)
47+
references those css files.
48+
- Hugo can provide highlighting for markdown codeblocks, see the `[markup]` section in `hugo.toml`.
49+
- To list/generate Hugo syntax themes:
50+
```
51+
hugo gen chromastyles --style nord > static/css/syntax.css
52+
```
53+
- To use the them, commit `static/css/syntax.css` and enable it by uncommenting this line: https://github.com/neovim/neovim.github.io/blob/eb266d7929eff8693cc05ca96732a2daf431e834/layouts/_default/baseof.html#L27
54+
- And fiddle with the `[markup]` section in `hugo.toml`.

‎hugo.toml‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,14 @@ title = 'Neovim'
1818
feed = "/news/index.xml"
1919

2020
[markup]
21-
[markup.goldmark]
22-
[markup.goldmark.renderer]
23-
unsafe = true
21+
# [markup.goldmark]
22+
# [markup.goldmark.renderer]
23+
# unsafe = true
24+
25+
# XXX: somehow this accidentally enables use of the Neovim palette (css/neovim-hi.css),
26+
# presumably those css classes match whatever Hugo is using to provide syntax highlighting.
27+
[markup.highlight]
28+
noClasses = false
2429

2530
[[menus.main]]
2631
name = "About"

‎layouts/_default/baseof.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,8 @@
2424
<link href="/css/bootstrap.min.css" rel="stylesheet">
2525

2626
<link href="/css/main.css" rel="stylesheet">
27+
<!-- Hugo-generated palette for highlighting markdown code blocks. -->
28+
<!-- <link href="/css/syntax.css" rel="stylesheet"> -->
2729
<link href="/css/neovim-hi.css" rel="stylesheet">
2830
{{ if ne .RelPermalink "/404.html" }}
2931
<link rel="canonical" href="{{ .Permalink }}" />

‎static/css/neovim-hi.css‎

Lines changed: 52 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,71 @@
1+
/*
2+
* Neovim color palette for highlighting markdown codeblocks.
3+
* For use with Hugo.
4+
* See also: static/highlight/styles/neovim.min.css
5+
* License: Apache-2.0
6+
*/
17

28
:root {
3-
/* regular */
4-
--hi-black: #565f89;
5-
--hi-red: #8c4351;
6-
--hi-green: #145126;
7-
--hi-yellow: #965027;
8-
--hi-blue: #0f2d86;
9-
--hi-purple: #5a4a78;
10-
--hi-cyan: #166775;
11-
--hi-white: #444;
9+
/* Neovim dark palette - regular/non-bright */
10+
--hi-black: #2c2e33;
11+
--hi-red: #5e0009;
12+
--hi-green: #015825;
13+
--hi-yellow: #6e5600;
14+
--hi-blue: #005078;
15+
--hi-cyan: #007676;
16+
--hi-white: #4f5258;
1217

13-
/* bright */
14-
--hi-b-black: #565f89;
15-
--hi-b-red: #8c4351;
16-
--hi-b-green: #005136;
17-
--hi-b-yellow: #8f5e15;
18-
--hi-b-blue: #34548a;
19-
--hi-b-purple: #5329a2;
20-
--hi-b-cyan: #166775;
21-
--hi-b-white: #343b58;
18+
/* Neovim dark palette - bright */
19+
--hi-b-black: #4f5258;
20+
--hi-b-red: #5e0009;
21+
--hi-b-green: #015825;
22+
--hi-b-yellow: #6e5600;
23+
--hi-b-blue: #005078;
24+
--hi-b-cyan: #007676;
25+
--hi-b-white: #9b9ea4;
2226
}
2327

2428
@media (prefers-color-scheme: dark) {
2529
:root {
26-
/* regular */
27-
--hi-black: #565f89;
28-
--hi-red: #f7768e;
29-
--hi-green: #73daca;
30-
--hi-yellow: #a7d012 ;
31-
--hi-blue: #7aa2f7;
32-
--hi-purple: #bb9af7;
33-
--hi-cyan: #4baebf;
34-
--hi-white: #9aa5ce;
30+
/* Neovim light palette - regular/non-bright */
31+
--hi-black: #9b9ea4;
32+
--hi-red: #ffbcb5;
33+
--hi-green: #aaedb7;
34+
--hi-yellow: #f4d88c;
35+
--hi-blue: #9fd8ff;
36+
--hi-cyan: #83efef;
37+
--hi-white: #d7dae1;
3538

36-
/* bright */
37-
--hi-b-black: #565f89;
38-
--hi-b-red: #f7768e;
39-
--hi-b-green: #9ece6a;
40-
--hi-b-yellow: #ff9e64;
41-
--hi-b-blue: #7aa2f7;
42-
--hi-b-purple: #bb9af7;
43-
--hi-b-cyan: #2ac3de;
44-
--hi-b-white: #c0caf5;
39+
/* Neovim light palette - bright */
40+
--hi-b-black: #c4c6cd;
41+
--hi-b-red: #ffbcb5;
42+
--hi-b-green: #aaedb7;
43+
--hi-b-yellow: #f4d88c;
44+
--hi-b-blue: #9fd8ff;
45+
--hi-b-cyan: #83efef;
46+
--hi-b-white: #ebeef5;
4547
}
4648
}
4749

48-
/*! zenburn syntax highlighting - from http://userstyles.org/styles/88895/github-zenburn */
50+
/*! Neovim-based syntax highlighting */
4951
.highlight,.highlight pre,.highlight table { color: var(--hi-b-white) !important; }
50-
.highlight .err { color: var(--hi-yellow) !important; }
51-
.highlight .cs { color:#dca3a3 !important; }
52+
.highlight .err { color: var(--hi-b-red) !important; }
53+
.highlight .cs { color: var(--hi-cyan) !important; }
5254
.highlight .nf { color: var(--hi-b-blue) !important; }
53-
.highlight .c,.highlight .cm,.highlight .c1 { color: var(--hi-white) !important; }
55+
.highlight .c,.highlight .cm,.highlight .c1 { color: #9b9ea4 !important; }
5456
.highlight .g,.highlight .l,.highlight .x,.highlight .ge,.highlight .gs,.highlight .ld,.highlight .ni,
5557
.highlight .nl,.highlight .nx,.highlight .py,.highlight .n,.highlight .go,
56-
.highlight .h { color: var(--hi-cyan) !important; }
57-
.highlight .k { color: var(--hi-b-yellow) !important; }
58-
.highlight .s1 { color:#bc8383 !important; }
59-
.highlight .nb,.highlight .bp { color: var(--hi-yellow) !important; }
60-
.highlight .nc,.highlight .nn { color:var(--hi-cyan) !important; }
61-
.highlight .o,.highlight .p,.highlight .na,.highlight .ne { color: var(--hi-purple) !important; }
62-
.highlight .gp,.highlight .w,.highlight .gh,.highlight .gu { color:#656555 !important; }
58+
.highlight .h { color: var(--hi-b-cyan) !important; }
59+
.highlight .k { color: var(--hi-b-blue) !important; }
60+
.highlight .s1 { color: var(--hi-b-green) !important; }
61+
.highlight .nb,.highlight .bp { color: var(--hi-b-yellow) !important; }
62+
.highlight .nc,.highlight .nn { color: var(--hi-b-cyan) !important; }
63+
.highlight .o,.highlight .p,.highlight .na,.highlight .ne { color: var(--hi-b-blue) !important; }
64+
.highlight .gp,.highlight .w,.highlight .gh,.highlight .gu { color: var(--hi-white) !important; }
6365
.highlight .cp,.highlight .s,.highlight .sb,.highlight .sc,.highlight .sd,.highlight .s2,.highlight .se,
6466
.highlight .sh,.highlight .si,.highlight .ss,.highlight .kc,.highlight .kd,.highlight .kn,.highlight .kp,
65-
.highlight .kr,.highlight .kt,.highlight .nt,.highlight .ow { color: var(--hi-green) !important; }
67+
.highlight .kr,.highlight .kt,.highlight .nt,.highlight .ow { color: var(--hi-b-green) !important; }
6668
.highlight .gr,.highlight .gt,.highlight .m,.highlight .mf,.highlight .mh,.highlight .mi,
67-
.highlight .mo,.highlight .sr,.highlight .il { color:#9c6363 !important; }
69+
.highlight .mo,.highlight .sr,.highlight .il { color: var(--hi-b-cyan) !important; }
6870
.highlight .no,.highlight .nv,.highlight .vc,.highlight .vg,.highlight .vi,.highlight .nd,
69-
.highlight .sx { color:#dfaf8f !important; }
71+
.highlight .sx { color: var(--hi-b-yellow) !important; }

‎static/highlight/styles/neovim.min.css‎

Lines changed: 104 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,105 @@
11
/*!
2-
Theme: neovim
3-
origin: https://github.com/highlightjs/highlight.js/blob/main/src/styles/tokyo-night-dark.css
4-
Description: Original highlight.js style
5-
Author: (c) Henri Vandersleyen <[email protected]>
6-
Author: (c) Dave Lage <[email protected]>
7-
License: BSD 3-Clause License
8-
Touched: 2022
9-
*/:root{--hljs-black:#565f89;--hljs-red:#8c4351;--hljs-green:#33635c;--hljs-yellow:#965027;--hljs-blue:#0f2d86;--hljs-purple:#5a4a78;--hljs-cyan:#166775;--hljs-white:#444;--hljs-b-black:#565f89;--hljs-b-red:#8c4351;--hljs-b-green:#005136;--hljs-b-yellow:#8f5e15;--hljs-b-blue:#34548a;--hljs-b-purple:#5329a2;--hljs-b-cyan:#166775;--hljs-b-white:#343b58}@media (color-index:48){:root{--hljs-black:#565f89;--hljs-red:#f7768e;--hljs-green:#73daca;--hljs-yellow:#e18e11;--hljs-blue:#7aa2f7;--hljs-purple:#bb9af7;--hljs-cyan:#2ac3de;--hljs-white:#9aa5ce;--hljs-b-black:#565f89;--hljs-b-red:#f7768e;--hljs-b-green:#9ece6a;--hljs-b-yellow:#ff9e64;--hljs-b-blue:#7aa2f7;--hljs-b-purple:#bb9af7;--hljs-b-cyan:#2ac3de;--hljs-b-white:#c0caf5}}@media (color:48842621){:root{--hljs-black:#565f89;--hljs-red:#f7768e;--hljs-green:#73daca;--hljs-yellow:#e18e11;--hljs-blue:#7aa2f7;--hljs-purple:#bb9af7;--hljs-cyan:#2ac3de;--hljs-white:#9aa5ce;--hljs-b-black:#565f89;--hljs-b-red:#f7768e;--hljs-b-green:#9ece6a;--hljs-b-yellow:#ff9e64;--hljs-b-blue:#7aa2f7;--hljs-b-purple:#bb9af7;--hljs-b-cyan:#2ac3de;--hljs-b-white:#c0caf5}}@media (color-index:48){:root{--hljs-black:#565f89;--hljs-red:#f7768e;--hljs-green:#73daca;--hljs-yellow:#e18e11;--hljs-blue:#7aa2f7;--hljs-purple:#bb9af7;--hljs-cyan:#2ac3de;--hljs-white:#9aa5ce;--hljs-b-black:#565f89;--hljs-b-red:#f7768e;--hljs-b-green:#9ece6a;--hljs-b-yellow:#ff9e64;--hljs-b-blue:#7aa2f7;--hljs-b-purple:#bb9af7;--hljs-b-cyan:#2ac3de;--hljs-b-white:#c0caf5}}@media (color:48842621){:root{--hljs-black:#565f89;--hljs-red:#f7768e;--hljs-green:#73daca;--hljs-yellow:#e18e11;--hljs-blue:#7aa2f7;--hljs-purple:#bb9af7;--hljs-cyan:#2ac3de;--hljs-white:#9aa5ce;--hljs-b-black:#565f89;--hljs-b-red:#f7768e;--hljs-b-green:#9ece6a;--hljs-b-yellow:#ff9e64;--hljs-b-blue:#7aa2f7;--hljs-b-purple:#bb9af7;--hljs-b-cyan:#2ac3de;--hljs-b-white:#c0caf5}}@media (prefers-color-scheme:dark){:root{--hljs-black:#565f89;--hljs-red:#f7768e;--hljs-green:#73daca;--hljs-yellow:#e18e11;--hljs-blue:#7aa2f7;--hljs-purple:#bb9af7;--hljs-cyan:#2ac3de;--hljs-white:#9aa5ce;--hljs-b-black:#565f89;--hljs-b-red:#f7768e;--hljs-b-green:#9ece6a;--hljs-b-yellow:#ff9e64;--hljs-b-blue:#7aa2f7;--hljs-b-purple:#bb9af7;--hljs-b-cyan:#2ac3de;--hljs-b-white:#c0caf5}}.hljs-meta,.hljs-comment{color:#444;color:var(--hljs-white)}.hljs-tag,.hljs-doctag,.hljs-selector-id,.hljs-selector-class,.hljs-regexp,.hljs-template-tag,.hljs-selector-pseudo,.hljs-selector-attr,.hljs-variable.language_,.hljs-deletion{color:var(--hlsjs-red)}.hljs-variable,.hljs-template-variable,.hljs-number,.hljs-literal,.hljs-type,.hljs-params,.hljs-link{color:#0f2d86;color:var(--hljs-blue)}.hljs-built_in,.hljs-attribute{color:#8f5e15;color:var(--hljs-b-yellow);color:#005136;color:var(--hljs-b-green)}.hljs-selector-tag{color:#166775;color:var(--hljs-b-cyan)}.hljs-keyword,.hljs-title.function_,.hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-subst,.hljs-property{color:#0f2d86;color:var(--hljs-blue)}.hljs-selector-tag{color:#33635c;color:var(--hljs-green)}.hljs-quote,.hljs-string,.hljs-symbol,.hljs-bullet,.hljs-addition{color:#005136;color:var(--hljs-b-green)}.hljs-code,.hljs-function,.hljs-formula,.hljs-section{color:#0f2d86;color:var(--hljs-blue)}.hljs-name,.hljs-keyword,.hljs-operator,.hljs-keyword,.hljs-char.escape_,.hljs-attr{color:#166775;color:var(--hljs-cyan)}.hljs-punctuation{color:#343b58;color:var(--hljs-b-white)}.hljs{color:#343b58;color:var(--hljs-b-white)}@media (color-index:48){.hljs{color:#343b58;color:var(--hljs-b-white)}}@media (color:48842621){.hljs{color:#343b58;color:var(--hljs-b-white)}}@media (color-index:48){.hljs{color:#343b58;color:var(--hljs-b-white)}}@media (color:48842621){.hljs{color:#343b58;color:var(--hljs-b-white)}}@media (prefers-color-scheme:dark){.hljs{color:#343b58;color:var(--hljs-b-white)}}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:bold}
2+
* Neovim color palette for highlighting markdown codeblocks.
3+
* For use with "highlight.js" (used by the :help docs generated HTML).
4+
* See also: static/css/neovim-hi.css
5+
* License: Apache-2.0
6+
*/
7+
8+
:root {
9+
--hljs-black: #2c2e33;
10+
--hljs-red: #5e0009;
11+
--hljs-green: #015825;
12+
--hljs-yellow: #6e5600;
13+
--hljs-blue: #005078;
14+
--hljs-cyan: #007676;
15+
--hljs-white: #4f5258;
16+
--hljs-b-black: #4f5258;
17+
--hljs-b-red: #5e0009;
18+
--hljs-b-green: #015825;
19+
--hljs-b-yellow: #6e5600;
20+
--hljs-b-blue: #005078;
21+
--hljs-b-cyan: #007676;
22+
--hljs-b-white: #9b9ea4
23+
}
24+
25+
@media (prefers-color-scheme: dark) {
26+
:root {
27+
--hljs-black: #9b9ea4;
28+
--hljs-red: #ffbcb5;
29+
--hljs-green: #aaedb7;
30+
--hljs-yellow: #f4d88c;
31+
--hljs-blue: #9fd8ff;
32+
--hljs-cyan: #83efef;
33+
--hljs-white: #d7dae1;
34+
--hljs-b-black: #c4c6cd;
35+
--hljs-b-red: #ffbcb5;
36+
--hljs-b-green: #aaedb7;
37+
--hljs-b-yellow: #f4d88c;
38+
--hljs-b-blue: #9fd8ff;
39+
--hljs-b-cyan: #83efef;
40+
--hljs-b-white: #ebeef5
41+
}
42+
43+
.hljs-meta, .hljs-comment {
44+
color: #9b9ea4
45+
}
46+
47+
.hljs-tag, .hljs-doctag, .hljs-selector-id, .hljs-selector-class, .hljs-regexp, .hljs-template-tag, .hljs-selector-pseudo, .hljs-selector-attr, .hljs-variable.language_, .hljs-deletion {
48+
color: var(--hljs-b-red)
49+
}
50+
51+
.hljs-variable, .hljs-template-variable, .hljs-number, .hljs-literal, .hljs-type, .hljs-params, .hljs-link {
52+
color: #9fd8ff;
53+
color: var(--hljs-b-blue)
54+
}
55+
56+
.hljs-built_in, .hljs-attribute {
57+
color: #f4d88c;
58+
color: var(--hljs-b-yellow);
59+
color: #aaedb7;
60+
color: var(--hljs-b-green)
61+
}
62+
63+
.hljs-selector-tag {
64+
color: #83efef;
65+
color: var(--hljs-b-cyan)
66+
}
67+
68+
.hljs-keyword, .hljs-title.function_, .hljs-title, .hljs-title.class_, .hljs-title.class_.inherited__, .hljs-subst, .hljs-property {
69+
color: #9fd8ff;
70+
color: var(--hljs-b-blue)
71+
}
72+
73+
.hljs-quote, .hljs-string, .hljs-symbol, .hljs-bullet, .hljs-addition {
74+
color: #aaedb7;
75+
color: var(--hljs-b-green)
76+
}
77+
78+
.hljs-code, .hljs-function, .hljs-formula, .hljs-section {
79+
color: #9fd8ff;
80+
color: var(--hljs-b-blue)
81+
}
82+
83+
.hljs-name, .hljs-keyword, .hljs-operator, .hljs-char.escape_, .hljs-attr {
84+
color: #83efef;
85+
color: var(--hljs-b-cyan)
86+
}
87+
88+
.hljs-punctuation {
89+
color: #ebeef5;
90+
color: var(--hljs-b-white)
91+
}
92+
93+
.hljs {
94+
color: #ebeef5;
95+
color: var(--hljs-b-white)
96+
}
97+
}
98+
99+
.hljs-emphasis {
100+
font-style: italic
101+
}
102+
103+
.hljs-strong {
104+
font-weight: bold
105+
}

0 commit comments

Comments
 (0)