preparation for input matching

Author: dvd101x

index.html

@@ -24,9 +24,7 @@
     href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.6.1/github-markdown-light.css"
     integrity="sha512-tVO0ZLV54CEoiM+i1hvfZGcopGR3rxyyC3L2/P/6NRTVXlrp4OKyTFunluVG1BRNasDLnm6ZRPDKBGM0CkS99Q=="
     crossorigin="anonymous" referrerpolicy="no-referrer" />
-    <script src="//unpkg.com/alpinejs" defer></script>
-
-  
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js" defer></script>
 </head>
 <script>
   const mathWorker = new Worker("mathWorker.js", { type: "classic" });

main.js

@@ -119,21 +119,29 @@ mathWorker.onmessage = function (oEvent) {
               case "string":
                 div = document.createElement("code");
                 div.innerHTML = value;
+                div.setAttribute('data-from-line', e.from)
+                div.setAttribute('data-to-line', e.to)
                 pre.appendChild(div);
                 break;
               case "any":
                 div = document.createElement("div");
                 div.textContent = value;
+                div.setAttribute('data-from-line', e.from)
+                div.setAttribute('data-to-line', e.to)
                 pre.appendChild(div);
                 break;
               case "error":
                 div = document.createElement("div");
                 div.style.color = "red";
                 div.innerHTML = value;
+                div.setAttribute('data-from-line', e.from)
+                div.setAttribute('data-to-line', e.to)
                 pre.appendChild(div);
                 break;
               case "plot":
                 div = document.createElement("div");
+                div.setAttribute('data-from-line', e.from)
+                div.setAttribute('data-to-line', e.to)
                 try {
                   Plotly.newPlot(div, e.result.data, e.result.layout, e.result.config)
                 } catch (error) {
@@ -148,6 +156,8 @@ mathWorker.onmessage = function (oEvent) {
         break;
       case "markdown":
         const div = document.createElement("div");
+        div.setAttribute('data-from-line', out.from)
+        div.setAttribute('data-to-line', out.to)
         div.innerHTML = md.render(out.text);
         outputs.appendChild(div);
         break;

public/mathWorker.js

@@ -1,5 +1,5 @@
 importScripts(
-    "https://cdnjs.cloudflare.com/ajax/libs/mathjs/13.1.1/math.js",
+    "https://cdnjs.cloudflare.com/ajax/libs/mathjs/14.0.0/math.js",
     "coolprop.js",
     "fluidProperties.js",
     "molecularMass.js"
@@ -86,8 +86,7 @@ function makeDoc(code) {
             const formatedLine = lineType === 'md' ? line.slice(2) : line
             if (lastType === lineType) {
                 cells[cells.length - 1].source.push(formatedLine)
-            }
-            else {
+            } else {
                 cells.push({ cell_type: lineType, source: [formatedLine], from: lastLineNum, to: lineNum })
                 lastLineNum = lineNum
             }

style.css

@@ -14,6 +14,10 @@ main {
 	overflow: hidden;
 }
 
+div[data-from-line = "1"] {
+	background-color: pink;
+}
+
 main>article.markdown-body {
 	flex: 1;
 	overflow: auto;