add source code line numbers

The way I handle line numbers and the pre block in general is inspired
by the MDN wiki. See, for instance,
https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript
a screenshot is here: https://i.imgur.com/982TBDc.png

Also tweaked other styles, e.g., changed the primary monospace font to
Consolas, and slightly tweaked a few old posts.

1 files changed, 33 insertions, 8 deletions

diff --git a/source/css/theme.css b/source/css/theme.css
index 19930c0f..7d140c80 100644
--- a/source/css/theme.css
+++ b/source/css/theme.css
@@ -51,16 +51,45 @@ h3 {
 }
 
 code {
-    font-family: 'Courier', monospace;
-    font-size: 10.5pt;
+    font-family: 'Consolas', 'Monaco', 'Andale Mono', 'Courier', monospace;
+    font-weight: thin;
 }
 
 pre {
-    margin: 0 2em;
+    padding: 1em;
+    background: #fbfbfb;
+    border-left: 0.4em solid #ddd;
+}
+
+pre[class*=sourceCode] {
+    position: relative;
+    padding-left: 2em;
+    margin: 0;
 }
 
 pre code {
-    font-size: 10pt;
+    font-size: 10.5pt;
+}
+
+.line-number {
+    position: absolute;
+    left: 0;
+    right: 0;
+    margin-top: 1em;
+    pointer-events: none;
+    white-space: pre;
+}
+
+.line-number:before {
+    content: attr(data-line);
+    position: absolute;
+    top: .4em;
+    left: .5em;
+    min-width: 2em;
+    color: #ccc;
+    font: 500 65%/1.5 sans-serif;
+    text-align: center;
+    vertical-align: .3em;
 }
 
 blockquote {
@@ -72,10 +101,6 @@ div.footnotes {
     font-size: 10pt;
 }
 
-div.footnotes code {
-    font-size: 9.5pt;
-}
-
 img {
     display: block;
     max-width: 100%;