From b82a5076bd99d0bb9079bf247c224db004f84004 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Igor=20T=C3=A1mara?= <igor.tamara@gmail.com>
Date: Thu, 6 Nov 2025 15:13:46 -0500
Subject: [PATCH] style: add line numbering

Used only on editor, not visible, needs fix on top-padding and
bottom-padding
---
 assets/css/highlight.css     |  2 +-
 assets/js/highlight.js       | 22 ++++++++++++++++++++++
 layouts/templates/base.shtml |  2 +-
 3 files changed, 24 insertions(+), 2 deletions(-)
 create mode 100644 assets/js/highlight.js

diff --git a/assets/css/highlight.css b/assets/css/highlight.css
index 2859b7b..735ce83 100644
--- a/assets/css/highlight.css
+++ b/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;
 }
diff --git a/assets/js/highlight.js b/assets/js/highlight.js
new file mode 100644
index 0000000..7528432
--- /dev/null
+++ b/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);
+  });
+}
diff --git a/layouts/templates/base.shtml b/layouts/templates/base.shtml
index bdb7265..fe95b31 100644
--- a/layouts/templates/base.shtml
+++ b/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>