spec.js

@@ -19,6 +19,11 @@ module.exports = [
 		source: "/js/main.js",
 		target: "/static/bundle.js"
 	},
+	{
+		type: "module",
+		source: "/js/hljs.js",
+		target: "/static/hljs.js"
+	},
 	{
 		type: "file",
 		source: "/assets/fonts/whitney-500.woff",

src/home.pug

@@ -40,6 +40,7 @@ html
       != JSON.stringify([...static.keys()].map(k => [k, getStatic(k)]))
       | )
     link(rel="stylesheet" type="text/css" href=getStatic("/sass/main.sass"))
+    link(rel="preload" as="script" href=getStatic("/js/hljs.js"))
     script(type="module" src=getStatic("/js/main.js"))
   body
     main.main

src/js/events/components.js

@@ -12,19 +12,7 @@ class HighlightedCode extends ElemJS {
 				this.element.appendChild(child)
 			}
 		}
-		if (this.element.textContent.length > 80) {
+		lazyLoad("./static/hljs.js").then(hljs => hljs.highlightBlock(this.element))
-			/*
-			  no need to highlight very short code blocks:
-			  - content inside might not be code, some users still use code blocks
-			    for plaintext quotes
-			  - language detection will almost certainly be incorrect
-			  - even if it's code and the language is detected, the user will
-			    be able to mentally format small amounts of code themselves
-
-			  feel free to change the threshold number
-			*/
-			lazyLoad("https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@10/build/highlight.min.js").then(hljs => hljs.highlightBlock(this.element))
-		}
 	}
 }
 

src/js/hljs.js

@@ -0,0 +1,2 @@
+const hljs = require("highlight.js")
+module.exports = hljs