3 files changed, 31 insertions, 2 deletions
diff --git a/cgithub/public/static/style.css b/cgithub/public/static/style.css
index a83e128..1d277b7 100644
--- a/cgithub/public/static/style.css
+++ b/cgithub/public/static/style.css
@@ -286,6 +286,10 @@ object.pdf {
 pre.box {
   /* Instead of scrolling overflow for long lines, grow the box. */
   width: fit-content;
+
+  span:target {
+    background: var(--shade-background);
+  }
 }
 
 .overview, .release, .wiki {
diff --git a/cgithub/src/app.test.ts b/cgithub/src/app.test.ts
index 3ecebd0..265465e 100644
--- a/cgithub/src/app.test.ts
+++ b/cgithub/src/app.test.ts
@@ -124,6 +124,29 @@ describe("blob view", () => {
     assert.match(html, /This file cannot be displayed\./);
   });
 
+  it("should give each syntax-highlighted line an anchor", () => {
+    const html = eta.render("blob.eta", {
+      ...blob,
+      path: "src/app.ts",
+      htmlLines: ['<span class="pl-k">const</span> x;', "x++;"],
+    });
+
+    assert.match(
+      html,
+      /<code><span id="L1"><span class="pl-k">const<\/span> x;<\/span>\n<span id="L2">x\+\+;<\/span><\/code>/,
+    );
+  });
+
+  it("should give each plain-text line an anchor", () => {
+    const html = eta.render("blob.eta", {
+      ...blob,
+      path: "notes.txt",
+      textLines: ["a < b", "c"],
+    });
+
+    assert.match(html, /<code><span id="L1">a &lt; b<\/span>\n<span id="L2">c<\/span><\/code>/);
+  });
+
   it("should offer the raw file when there is nothing to display", () => {
     const html = eta.render("blob.eta", blob);
 
diff --git a/cgithub/views/blob.eta b/cgithub/views/blob.eta
index 444508e..be9a57e 100644
--- a/cgithub/views/blob.eta
+++ b/cgithub/views/blob.eta
@@ -22,9 +22,11 @@
 <% } else if (it.htmlContent) { %>
   <div class="box"><%~ it.htmlContent %></div>
 <% } else if (it.htmlLines) { %>
-  <pre class="box"><code><%~ it.htmlLines.join("\n") %></code></pre>
+  <pre class="box"><code><% for (const [i, line] of it.htmlLines.entries()) {
+    %><%= i ? "\n" : "" %><span id="L<%= i + 1 %>"><%~ line %></span><% } %></code></pre>
 <% } else if (it.textLines) { %>
-  <pre class="box"><code><%= it.textLines.join("\n") %></code></pre>
+  <pre class="box"><code><% for (const [i, line] of it.textLines.entries()) {
+    %><%= i ? "\n" : "" %><span id="L<%= i + 1 %>"><%= line %></span><% } %></code></pre>
 <% } else { %>
   <div class="box">This file cannot be displayed.</div>
 <% } %>