style: use Neovim theme for codeblock highlighting

README.md

@@ -39,3 +39,16 @@ Notes:
     - The javascript and UI container were setup in [this commit](https://github.com/neovim/neovim.github.io/commit/ce9aef12eb1c98135965e3a9c5c792bf9e506a76).
     - 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.
     - Admin: https://www.algolia.com/apps/X185E15FPG/dashboard
+- Codeblock highlighting
+    - The highlighting for the generated help docs (`/doc/user/`) is done by:
+        - `static/css/neovim-hi.css`
+        - `static/highlight/styles/neovim.min.css`
+        - [gen_help_html.lua](https://github.com/neovim/neovim/blob/a88c7962a82f1427aa90d1c0a08514423516f9f2/src/gen/gen_help_html.lua#L884-L887)
+          references those css files.
+    - Hugo can provide highlighting for markdown codeblocks, see the `[markup]` section in `hugo.toml`.
+        - To list/generate Hugo syntax themes:
+          ```
+          hugo gen chromastyles --style nord > static/css/syntax.css
+          ```
+        - 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
+          - And fiddle with the `[markup]` section in `hugo.toml`.

hugo.toml

@@ -18,9 +18,14 @@ title = 'Neovim'
     feed = "/news/index.xml"
 
 [markup]
-  [markup.goldmark]
-    [markup.goldmark.renderer]
-      unsafe = true
+  # [markup.goldmark]
+  #   [markup.goldmark.renderer]
+  #     unsafe = true
+
+  # XXX: somehow this accidentally enables use of the Neovim palette (css/neovim-hi.css),
+  # presumably those css classes match whatever Hugo is using to provide syntax highlighting.
+  [markup.highlight]
+    noClasses = false
 
 [[menus.main]]
   name = "About"

layouts/_default/baseof.html

@@ -24,6 +24,8 @@
     <link href="/css/bootstrap.min.css" rel="stylesheet">
 
     <link href="/css/main.css" rel="stylesheet">
+    <!-- Hugo-generated palette for highlighting markdown code blocks. -->
+    <!-- <link href="/css/syntax.css" rel="stylesheet"> -->
     <link href="/css/neovim-hi.css" rel="stylesheet">
     {{ if ne .RelPermalink "/404.html" }}
     <link rel="canonical" href="{{ .Permalink }}" />

static/css/neovim-hi.css

@@ -1,69 +1,71 @@
+/*
+ * Neovim color palette for highlighting markdown codeblocks.
+ * For use with Hugo.
+ * See also: static/highlight/styles/neovim.min.css
+ * License: Apache-2.0
+ */
 
 :root {
-  /* regular */
-  --hi-black: #565f89;
-  --hi-red: #8c4351;
-  --hi-green: #145126;
-  --hi-yellow: #965027;
-  --hi-blue: #0f2d86;
-  --hi-purple: #5a4a78;
-  --hi-cyan: #166775;
-  --hi-white: #444;
+  /* Neovim dark palette - regular/non-bright */
+  --hi-black: #2c2e33;
+  --hi-red: #5e0009;
+  --hi-green: #015825;
+  --hi-yellow: #6e5600;
+  --hi-blue: #005078;
+  --hi-cyan: #007676;
+  --hi-white: #4f5258;
 
-  /* bright */
-  --hi-b-black: #565f89;
-  --hi-b-red: #8c4351;
-  --hi-b-green: #005136;
-  --hi-b-yellow: #8f5e15;
-  --hi-b-blue: #34548a;
-  --hi-b-purple: #5329a2;
-  --hi-b-cyan: #166775;
-  --hi-b-white: #343b58;
+  /* Neovim dark palette - bright */
+  --hi-b-black: #4f5258;
+  --hi-b-red: #5e0009;
+  --hi-b-green: #015825;
+  --hi-b-yellow: #6e5600;
+  --hi-b-blue: #005078;
+  --hi-b-cyan: #007676;
+  --hi-b-white: #9b9ea4;
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
-    /* regular */
-    --hi-black: #565f89;
-    --hi-red: #f7768e;
-    --hi-green: #73daca;
-    --hi-yellow: #a7d012 ;
-    --hi-blue: #7aa2f7;
-    --hi-purple: #bb9af7;
-    --hi-cyan: #4baebf;
-    --hi-white: #9aa5ce;
+    /* Neovim light palette - regular/non-bright */
+    --hi-black: #9b9ea4;
+    --hi-red: #ffbcb5;
+    --hi-green: #aaedb7;
+    --hi-yellow: #f4d88c;
+    --hi-blue: #9fd8ff;
+    --hi-cyan: #83efef;
+    --hi-white: #d7dae1;
 
-    /* bright */
-    --hi-b-black: #565f89;
-    --hi-b-red: #f7768e;
-    --hi-b-green: #9ece6a;
-    --hi-b-yellow: #ff9e64;
-    --hi-b-blue: #7aa2f7;
-    --hi-b-purple: #bb9af7;
-    --hi-b-cyan: #2ac3de;
-    --hi-b-white: #c0caf5;
+    /* Neovim light palette - bright */
+    --hi-b-black: #c4c6cd;
+    --hi-b-red: #ffbcb5;
+    --hi-b-green: #aaedb7;
+    --hi-b-yellow: #f4d88c;
+    --hi-b-blue: #9fd8ff;
+    --hi-b-cyan: #83efef;
+    --hi-b-white: #ebeef5;
   }
 }
 
-/*! zenburn syntax highlighting - from http://userstyles.org/styles/88895/github-zenburn */
+/*! Neovim-based syntax highlighting */
 .highlight,.highlight pre,.highlight table { color: var(--hi-b-white) !important; }
-.highlight .err { color: var(--hi-yellow) !important; }
-.highlight .cs { color:#dca3a3 !important; }
+.highlight .err { color: var(--hi-b-red) !important; }
+.highlight .cs { color: var(--hi-cyan) !important; }
 .highlight .nf { color: var(--hi-b-blue) !important; }
-.highlight .c,.highlight .cm,.highlight .c1 { color: var(--hi-white) !important; }
+.highlight .c,.highlight .cm,.highlight .c1 { color: #9b9ea4 !important; }
 .highlight .g,.highlight .l,.highlight .x,.highlight .ge,.highlight .gs,.highlight .ld,.highlight .ni,
 .highlight .nl,.highlight .nx,.highlight .py,.highlight .n,.highlight .go,
-.highlight .h { color: var(--hi-cyan) !important; }
-.highlight .k { color: var(--hi-b-yellow) !important; }
-.highlight .s1 { color:#bc8383 !important; }
-.highlight .nb,.highlight .bp { color: var(--hi-yellow) !important; }
-.highlight .nc,.highlight .nn { color:var(--hi-cyan) !important; }
-.highlight .o,.highlight .p,.highlight .na,.highlight .ne { color: var(--hi-purple) !important; }
-.highlight .gp,.highlight .w,.highlight .gh,.highlight .gu { color:#656555 !important; }
+.highlight .h { color: var(--hi-b-cyan) !important; }
+.highlight .k { color: var(--hi-b-blue) !important; }
+.highlight .s1 { color: var(--hi-b-green) !important; }
+.highlight .nb,.highlight .bp { color: var(--hi-b-yellow) !important; }
+.highlight .nc,.highlight .nn { color: var(--hi-b-cyan) !important; }
+.highlight .o,.highlight .p,.highlight .na,.highlight .ne { color: var(--hi-b-blue) !important; }
+.highlight .gp,.highlight .w,.highlight .gh,.highlight .gu { color: var(--hi-white) !important; }
 .highlight .cp,.highlight .s,.highlight .sb,.highlight .sc,.highlight .sd,.highlight .s2,.highlight .se,
 .highlight .sh,.highlight .si,.highlight .ss,.highlight .kc,.highlight .kd,.highlight .kn,.highlight .kp,
-.highlight .kr,.highlight .kt,.highlight .nt,.highlight .ow { color: var(--hi-green) !important; }
+.highlight .kr,.highlight .kt,.highlight .nt,.highlight .ow { color: var(--hi-b-green) !important; }
 .highlight .gr,.highlight .gt,.highlight .m,.highlight .mf,.highlight .mh,.highlight .mi,
-.highlight .mo,.highlight .sr,.highlight .il { color:#9c6363 !important; }
+.highlight .mo,.highlight .sr,.highlight .il { color: var(--hi-b-cyan) !important; }
 .highlight .no,.highlight .nv,.highlight .vc,.highlight .vg,.highlight .vi,.highlight .nd,
-.highlight .sx { color:#dfaf8f !important; }
+.highlight .sx { color: var(--hi-b-yellow) !important; }

static/highlight/styles/neovim.min.css

@@ -1,9 +1,96 @@
 /*!
-  Theme: neovim 
-  origin: https://github.com/highlightjs/highlight.js/blob/main/src/styles/tokyo-night-dark.css
-  Description: Original highlight.js style
-  Author: (c) Henri Vandersleyen <hvandersleyen@gmail.com>
-  Author: (c) Dave Lage <rockerboo@gmail.com>
-  License: BSD 3-Clause License  
-	Touched: 2022
-*/: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}
+ * Neovim color palette for highlighting markdown codeblocks.
+ * For use with "highlight.js" (used by the :help docs generated HTML).
+ * See also: static/css/neovim-hi.css
+ * License: Apache-2.0
+*/
+
+:root {
+  /* Light-mode palette - default */
+  --hljs-black: #2c2e33;
+  --hljs-red: #5e0009;
+  --hljs-green: #0daa80;
+  --hljs-yellow: #6e5600;
+  --hljs-blue: #005078;
+  --hljs-cyan: #007676;
+  --hljs-white: #4f5258;
+  --hljs-b-black: #4f5258;
+  --hljs-b-red: #5e0009;
+  --hljs-b-green: #0daa80;
+  --hljs-b-yellow: #6e5600;
+  --hljs-b-blue: #005078;
+  --hljs-b-cyan: #007676;
+  --hljs-b-white: #9b9ea4
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    /* Dark-mode palette */
+    --hljs-black: #9b9ea4;
+    --hljs-red: #ffbcb5;
+    --hljs-green: #aaedb7;
+    --hljs-yellow: #f4d88c;
+    --hljs-blue: #9fd8ff;
+    --hljs-cyan: #83efef;
+    --hljs-white: #d7dae1;
+    --hljs-b-black: #c4c6cd;
+    --hljs-b-red: #ffbcb5;
+    --hljs-b-green: #aaedb7;
+    --hljs-b-yellow: #f4d88c;
+    --hljs-b-blue: #9fd8ff;
+    --hljs-b-cyan: #83efef;
+    --hljs-b-white: #ebeef5
+  }
+}
+
+.hljs-meta, .hljs-comment {
+  color: #4f5258
+}
+
+.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(--hljs-b-red)
+}
+
+.hljs-variable, .hljs-template-variable, .hljs-number, .hljs-literal, .hljs-type, .hljs-params, .hljs-link {
+  color: var(--hljs-b-cyan)
+}
+
+.hljs-built_in, .hljs-attribute {
+  color: var(--hljs-b-green)
+}
+
+.hljs-selector-tag {
+  color: var(--hljs-b-cyan)
+}
+
+.hljs-keyword, .hljs-title.function_, .hljs-title, .hljs-title.class_, .hljs-title.class_.inherited__, .hljs-subst, .hljs-property {
+  color: var(--hljs-b-blue)
+}
+
+.hljs-quote, .hljs-string, .hljs-symbol, .hljs-bullet, .hljs-addition {
+  color: var(--hljs-b-green)
+}
+
+.hljs-code, .hljs-function, .hljs-formula, .hljs-section {
+  color: var(--hljs-b-blue)
+}
+
+.hljs-name, .hljs-keyword, .hljs-operator, .hljs-char.escape_, .hljs-attr {
+  color: var(--hljs-b-cyan)
+}
+
+.hljs-punctuation {
+  color: var(--hljs-black)
+}
+
+.hljs {
+  color: var(--hljs-black)
+}
+
+.hljs-emphasis {
+  font-style: italic
+}
+
+.hljs-strong {
+  font-weight: bold
+}