2 files changed, 36 insertions, 7 deletions
diff --git a/assets/cgit.css b/assets/cgit.css
index dbd807c..540480c 100644
--- a/assets/cgit.css
+++ b/assets/cgit.css
@@ -127,6 +127,13 @@ div#cgit table {
   border-collapse: collapse;
 }
 
+div#cgit code,
+div#cgit kbd,
+div#cgit pre,
+div#cgit samp {
+  font-family: var(--font-mono);
+}
+
 div#cgit select,
 div#cgit input {
   font-family: inherit;
@@ -448,7 +455,6 @@ div#cgit div#about pre {
 div#cgit pre.plaintext {
   white-space: pre-wrap;
   overflow-wrap: anywhere;
-  font-family: var(--font-mono);
   line-height: 1.5;
   margin: 0;
 }
@@ -642,7 +648,20 @@ div#cgit table.blob td.linenumbers {
 div#cgit table.blob pre {
   padding: 0;
   margin: 0;
-  font-family: var(--font-mono);
+}
+
+/*
+ * The code is set exactly like the line numbers beside it, since in another
+ * font or size each line can come out taller than its number.
+ */
+div#cgit table.blob code {
+  font: inherit;
+}
+
+div#cgit span.escape {
+  color: var(--muted);
+  outline: 1px dashed var(--border-mid);
+  outline-offset: -1px;
 }
 
 div#cgit table.blob td.linenumbers a,
@@ -676,7 +695,6 @@ div#cgit table.blame {
 div#cgit div.line-hl {
   position: absolute;
   left: 0;
-  right: 0;
   background: var(--line-hl);
   pointer-events: none;
 }
@@ -744,7 +762,6 @@ div#cgit table.blame td.lines > div > pre {
   padding: 0 0 0 0.5em;
   position: absolute;
   top: 0;
-  font-family: var(--font-mono);
 }
 
 div#cgit table.blame .oid {
diff --git a/assets/cgit.js b/assets/cgit.js
index 2c0a828..807f15f 100644
--- a/assets/cgit.js
+++ b/assets/cgit.js
@@ -112,7 +112,7 @@ var bar = null;
 
 function place_bar() {
   var match, first, last, table;
-  var table_box, first_box, last_box, top, bottom;
+  var table_box, first_box, last_box, leading, origin, top, bottom;
 
   if (bar) {
     bar.remove();
@@ -131,12 +131,24 @@ function place_bar() {
   table_box = table.getBoundingClientRect();
   first_box = first.getBoundingClientRect();
   last_box = last.getBoundingClientRect();
-  top = Math.min(first_box.top, last_box.top) - table_box.top;
-  bottom = Math.max(first_box.bottom, last_box.bottom) - table_box.top;
+
+  // An anchor's box holds only its digits, centred in a line that the line
+  // height makes taller, so the bar reaches out by the difference to cover
+  // whole lines. A line height of normal leaves nothing to add.
+  leading = parseFloat(getComputedStyle(first).lineHeight);
+  leading = (leading - first_box.height) / 2 || 0;
+
+  // The bar is placed from inside the table's border, not from its edge.
+  origin = table_box.top + table.clientTop;
+  top = Math.min(first_box.top, last_box.top) - leading - origin;
+  bottom = Math.max(first_box.bottom, last_box.bottom) + leading - origin;
   bar = document.createElement("div");
   bar.className = "line-hl";
   bar.style.top = top + "px";
   bar.style.height = (bottom - top) + "px";
+  // A table too wide for the page scrolls sideways, and the bar has to run
+  // to the end of its longest line rather than to the edge of the view.
+  bar.style.width = table.scrollWidth + "px";
   table.appendChild(bar);
 
   // A browser only scrolls to a fragment that names a real id, which a range