style: add line numbering

Used only on editor, not visible, needs fix on top-padding and
bottom-padding

assets/css/highlight.css

@@ -83,7 +83,7 @@ code.zig .attribute {
   color: var(--attribute-color);
 }
 
-.line-numbers-js {
+.line-numbers-js pre code {
   /* Initialize CSS counter for each specific pre block */
   counter-reset: line;
 }

assets/js/highlight.js

@@ -0,0 +1,22 @@
+function addLineNumbersToPre() {
+  const preElements = document.querySelectorAll('div.line-numbers-js  pre ');
+
+  preElements.forEach(pre => {
+    const codeBlock = pre.querySelector('code');
+    if (!codeBlock) return;
+    const htmlContent = codeBlock.innerHTML;
+    const lines = htmlContent.split('\n');
+    const fragment = document.createDocumentFragment();
+
+    lines.forEach(lineHtml => {
+      if (lineHtml.length > 0) {
+        const lineWrapper = document.createElement('span');
+        lineWrapper.className = "ln";
+        lineWrapper.innerHTML = lineHtml;
+        fragment.appendChild(lineWrapper);
+      }
+    });
+    codeBlock.innerHTML = '';
+    codeBlock.appendChild(fragment);
+  });
+}

layouts/templates/base.shtml

@@ -24,7 +24,7 @@
     </nav>
     <script src="$site.asset('js/index.js').link()"></script>
     <script src="$site.asset('js/highlight.js').link()"></script>
-	<script>document.addEventListener('DOMContentLoaded', addLineNumbersRobust);</script>
+	<script>document.addEventListener('DOMContentLoaded', addLineNumbersToPre);</script>
     <super>
   </body>
 </html>