Add site syntax highlighting

site/decodal-site/src/scripts/playground.js

@@ -1,4 +1,5 @@
 import init, { evaluate } from '../wasm/decodal_wasm.js';
+import { highlightDecodal } from '../lib/highlight.js';
 
 const starter = `let
   Service = {
@@ -14,11 +15,22 @@ in
 `;
 
 const source = document.getElementById('source');
+const sourceHighlight = document.getElementById('source-highlight');
 const output = document.getElementById('output');
 const run = document.getElementById('run');
 const status = document.getElementById('status');
 
 source.value = starter;
+updateHighlight();
+
+function updateHighlight() {
+  sourceHighlight.innerHTML = `${highlightDecodal(source.value)}\n`;
+}
+
+function syncHighlightScroll() {
+  sourceHighlight.scrollTop = source.scrollTop;
+  sourceHighlight.scrollLeft = source.scrollLeft;
+}
 
 function execute() {
   const result = JSON.parse(evaluate(source.value));
@@ -36,6 +48,11 @@ try {
 }
 
 run.addEventListener('click', execute);
+source.addEventListener('input', () => {
+  updateHighlight();
+  syncHighlightScroll();
+});
+source.addEventListener('scroll', syncHighlightScroll);
 source.addEventListener('keydown', (event) => {
   if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') execute();
 });