Beginning the render the parsed content.

static/script.js

@@ -14,6 +14,21 @@ function abortableFetch(request, options) {
 
 async function renderParseResponse(response) {
     console.log(response);
+    outputElement.innerHTML = "";
+    const lines = response.input.split(/\r?\n/);
+    const numLines = lines.length;
+    const numDigits = Math.log10(numLines) + 1;
+
+    // outputElement.style.counterSet = "code_line_number 0;";
+    outputElement.style.paddingLeft = `calc(${numDigits + 1}ch + 10px);`;
+
+    // TODO: Do I need to set counter-set?
+    console.log(lines);
+    for (let line of lines) {
+        let wrappedLine = document.createElement("code");
+        wrappedLine.textContent = line;
+        outputElement.appendChild(wrappedLine);
+    }
 }
 
 inputElement.addEventListener("input", async () => {
@@ -34,3 +49,15 @@ inputElement.addEventListener("input", async () => {
     let response = await inFlightRequest.ready;
     renderParseResponse(await response.json());
 });
+
+function highlightLine(htmlName, lineOffset) {
+  const childOffset = lineOffset + 1;
+    const codeLineElement = document.querySelector(`.${htmlName} > code:nth-child(${childOffset})`);
+  codeLineElement?.classList.add("highlighted")
+}
+
+function unhighlightLine(htmlName, lineOffset) {
+  const childOffset = lineOffset + 1;
+    const codeLineElement = document.querySelector(`.${htmlName} > code:nth-child(${childOffset})`);
+  codeLineElement?.classList.remove("highlighted")
+}

static/style.css

@@ -35,6 +35,7 @@ h7 {
 .code_block > code {
     display: table;
     counter-increment: code_line_number;
+    min-height: 1.4em;
 }
 
 .code_block > code::before {