patx/gitman

fix line number styling

Commit 88b4a23 · patx · 2026-05-06T14:49:10-04:00

Changeset
88b4a237476320097912b3bdeb5a217bae1540d3
Parents
821a3a7c4f8167f30dcd878af904734f732bebb8

View source at this commit

Comments

No comments yet.

Log in to comment

Diff

diff --git a/static/styles.css b/static/styles.css
index 41fb15f..6ff4c1c 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -76,19 +76,15 @@ pre code.hljs { padding: 0; background: transparent; }
   min-width: 0;
   padding: 2.1rem .6rem .6rem;
 }
-.line-numbers {
-  display: flex;
+.copyable-code pre.line-numbers {
   flex: 0 0 auto;
-  flex-direction: column;
+  overflow: hidden;
   padding: 2.1rem .55rem .6rem .6rem;
   color: var(--muted);
   text-align: right;
   user-select: none;
   border-right: 1px solid var(--border);
 }
-.line-numbers span {
-  display: block;
-}
 .copy-button {
   position: absolute;
   top: .45rem;
diff --git a/templates/base.tpl b/templates/base.tpl
index db0fb2f..8586f99 100644
--- a/templates/base.tpl
+++ b/templates/base.tpl
@@ -9,7 +9,7 @@
 <link rel="apple-touch-icon" sizes="180x180" href="/static/git.svg">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css" media="(prefers-color-scheme: dark)">
-  <link rel="stylesheet" href="/static/styles.css">
+  <link rel="stylesheet" href="/static/styles.css?v=2">
 </head>
 <body>
   <header class="site-header">
@@ -56,18 +56,16 @@
 
         const text = rawText ?? code.textContent ?? "";
         const lineCount = Math.max(1, text.split("\n").length - (text.endsWith("\n") ? 1 : 0));
-        const lineNumbers = document.createElement("div");
-        const fragment = document.createDocumentFragment();
+        const numbers = [];
+        const lineNumbers = document.createElement("pre");
         lineNumbers.className = "line-numbers";
         lineNumbers.setAttribute("aria-hidden", "true");
 
         for (let line = 1; line <= lineCount; line += 1) {
-          const number = document.createElement("span");
-          number.textContent = line;
-          fragment.append(number);
+          numbers.push(line);
         }
 
-        lineNumbers.append(fragment);
+        lineNumbers.textContent = numbers.join("\n");
         viewer.insertBefore(lineNumbers, pre);
       };