Run highlight.js at build time instead of client-side

Author: kfranqueiro

11ty/CustomLiquid.ts

@@ -1,3 +1,4 @@
+import hljs from "highlight.js";
 import { Liquid, type Template } from "liquidjs";
 import type { LiquidOptions, RenderOptions } from "liquidjs/dist/liquid-options";
 import compact from "lodash-es/compact";
@@ -169,6 +170,15 @@ export class CustomLiquid extends Liquid {
         }
       }
 
+      $("pre code[class*='language-']").each((_, el) => {
+        const $el = $(el);
+        // Unescape any HTML entities (which were originally needed for client-side highlight.js)
+        const code = $el.html()!.replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&amp;/g, "&");
+        const language = $el.attr("class")!.replace(/^.*language-(\S+).*$/, "$1");
+        $el.html(hljs.highlight(code, { language }).value);
+        $el.addClass("hljs");
+      });
+
       const prependedIncludes = ["header"];
       const appendedIncludes = ["wai-site-footer", "site-footer"];
 

_includes/waiscript.html

@@ -1,8 +1,5 @@
-{% if isTechniques %}{% assign hljsPath = "../" %}{% endif %}
-<link rel="stylesheet" href="{{ hljsPath }}a11y-light.css">
-<script src="{{ hljsPath }}highlight.min.js"></script>
+<link rel="stylesheet" href="{% if isTechniques %}../{% endif %}a11y-light.css">
 <script>
-  hljs.highlightAll();
-  var translationStrings = {}; /* fix WAI JS */
+  var translationStrings = {}; // prevent errors in WAI main.js t() calls
 </script>
 <script src="https://www.w3.org/WAI/assets/scripts/main.js"></script>

eleventy.config.ts

@@ -193,7 +193,6 @@ export default async function (eleventyConfig: any) {
   eleventyConfig.addPassthroughCopy({
     "css/base.css": "techniques/base.css",
     "css/a11y-light.css": "techniques/a11y-light.css",
-    "script/highlight.min.js": "techniques/highlight.min.js",
   });
 
   eleventyConfig.addPassthroughCopy("understanding/*.css");
@@ -225,10 +224,6 @@ export default async function (eleventyConfig: any) {
       join(dir.input, "css", "a11y-light.css"),
       join(dir.output, "understanding", "a11y-light.css")
     );
-    await copyFile(
-      join(dir.input, "script", "highlight.min.js"),
-      join(dir.output, "understanding", "highlight.min.js")
-    );
 
     // Output guidelines/index.html and dependencies for PR runs (not for GH Pages or W3C site)
     const sha = process.env.COMMIT_REF; // Read environment variable exposed by Netlify

package-lock.json

@@ -22,6 +22,7 @@
     "cheerio": "^1.0.0",
     "glob": "^10.3.16",
     "gray-matter": "^4.0.3",
+    "highlight.js": "^11.11.1",
     "liquidjs": "^10.21.0",
     "lodash-es": "^4.17.21",
     "mkdirp": "^3.0.1",