website: enable code syntax highlighting via highlight.js

docs/highlight.css

@@ -0,0 +1 @@
+.hljs{display:block;overflow-x:auto;padding:.5em;color:#333;background:#f8f8f8}.hljs-comment,.hljs-quote{color:#998;font-style:italic}.hljs-keyword,.hljs-selector-tag,.hljs-subst{color:#333;font-weight:700}.hljs-literal,.hljs-number,.hljs-tag .hljs-attr,.hljs-template-variable,.hljs-variable{color:teal}.hljs-doctag,.hljs-string{color:#d14}.hljs-section,.hljs-selector-id,.hljs-title{color:#900;font-weight:700}.hljs-subst{font-weight:400}.hljs-class .hljs-title,.hljs-type{color:#458;font-weight:700}.hljs-attribute,.hljs-name,.hljs-tag{color:navy;font-weight:400}.hljs-link,.hljs-regexp{color:#009926}.hljs-bullet,.hljs-symbol{color:#990073}.hljs-built_in,.hljs-builtin-name{color:#0086b3}.hljs-meta{color:#999;font-weight:700}.hljs-deletion{background:#fdd}.hljs-addition{background:#dfd}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}

docs/index.html

@@ -7,6 +7,7 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <link rel="stylesheet" href="https://rsms.me/raster/raster.css?v=8">
   <script type="text/javascript" src="markdown.js"></script>
+  <script type="text/javascript" async src="highlight.js"></script>
   <style type="text/css">
 
 :root {
@@ -228,11 +229,13 @@ With default settings, markdown-wasm allows embedded HTML.
   </grid>
 
 <script type="text/javascript">
+
 // await the loading of the web assembly module
-window["markdown"].ready.then(function(markdown){
+window["markdown"].ready.then(markdown => {
 
 const inputEl = document.getElementById("markdown-input")
 const outputEl = document.getElementById("html-output")
+let hljsTimer
 
 function update() {
   let source = inputEl.value
@@ -240,13 +243,27 @@ function update() {
     parseFlags: markdown.ParseFlags.DEFAULT | markdown.ParseFlags.NO_HTML,
   })
   outputEl.innerHTML = html
+  updateCodeHighlight()
+}
+
+function updateCodeHighlight() {
+  clearTimeout(hljsTimer)
+  if (typeof hljs == "undefined") {
+    hljsTimer = setTimeout(updateCodeSyntaxHighlighting, 500)
+    return
+  }
+  document.querySelectorAll('pre code[class^="language-"]').forEach(block => {
+    hljs.highlightBlock(block)
+  })
 }
 
 inputEl.addEventListener("input", update)
 update()
 
-console.log({markdown})
+// load the markdown module to make it playable in the browser console
+console.log("markdown module API:", markdown)
 
 })</script>
+<link rel="stylesheet" href="highlight.css">
 </body>
 </html>