Use JSDelivr CDN for highlight.js

- downside: is somebody else's CDN
- upside: changes hljs download size from >1MB to 33k

Feel free to debate this.

spec.js

@@ -19,11 +19,6 @@ 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,7 +40,6 @@ 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,7 +12,19 @@ class HighlightedCode extends ElemJS {
 				this.element.appendChild(child)
 			}
 		}
-		lazyLoad("./static/hljs.js").then(hljs => hljs.highlightBlock(this.element))
+		if (this.element.textContent.length > 80) {
+			/*
+			  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

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