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.

5 files changed, 42 insertions, 14 deletions

diff --git a/source/blog/2014-12-23-mpv-launcher.md b/source/blog/2014-12-23-mpv-launcher.md
index bc4710e5..c8c2aee2 100644
--- a/source/blog/2014-12-23-mpv-launcher.md
+++ b/source/blog/2014-12-23-mpv-launcher.md
@@ -7,7 +7,9 @@ date-display: December 23, 2014
 
 I just noticed that `daemonize` doesn't play too well with the OS; in particular, when you use dark menu bar on OS X Yosemite, apps launched with `daemonize` won't conform to that. So a native shell solution would be using `/bin/zsh` and run
 
-    mpv "$@" >/dev/null 2>&1 </dev/null &!
+```zsh
+mpv "$@" >/dev/null 2>&1 </dev/null &!
+```
 
 instead.
 
@@ -17,7 +19,9 @@ instead.
 
 Today I finally gave this issue some serious thought (I've been on a bug report/enhancement request spree these days so it's natural for me to start thinking about enhancements). Turns out that there's a pretty simple workaround. I created an automator app `mpv-launcher.app` that does one thing: "Run Shell Script" (pass input as arguments)
 
-    daemonize /usr/local/bin/mpv "$@"
+```bash
+daemonize /usr/local/bin/mpv "$@"
+```
 
 in the shell of your choice (for me the shell of choice is `zsh` since the env would be readily available from my `zshenv`). `daemonize`, as the name suggests, daemonizes the process so that the process doesn't block; this way, `mpv-launcher.app` immediately quits after launching, making multiple "instances" possible. (`daemonize` can be installed via `brew install daemonize`; note that you need to specify the full path of the command to daemonize, which in my case is `/usr/local/bin/mpv`). And there you go. Associate your video files to `mpv-launcher.app`. Launch as many instances as you want. Enjoy.
 
diff --git a/source/blog/2015-02-24-the-new-onedrive-api.md b/source/blog/2015-02-24-the-new-onedrive-api.md
index 9a74d89f..1a973d58 100644
--- a/source/blog/2015-02-24-the-new-onedrive-api.md
+++ b/source/blog/2015-02-24-the-new-onedrive-api.md
@@ -3,6 +3,6 @@ title: "The new OneDrive API"
 date: 2015-02-24T18:31:19-0800
 date-display: February 24, 2015
 ---
-Microsoft released the new OneDrive API today. See the blog post announcement [here](https://blog.onedrive.com/the-new-onedrive-api/). One highlight is that [large file upload](http://onedrive.github.io/items/upload_large_files.htm) is now officially supported. Previously, large file upload was handled with a semi-official API using the BITS protocol; the only documentation was a [gist](https://gist.github.com/rgregg/37ba8929768a62131e85). Now it is handled through standard HTTP `POST`. With this major release, there's likely a lot of work to be done with [python-onedrive](https://github.com/mk-fg/python-onedrive). I have opened an issue: `mk-fg/python-onedrive#52` — [New OneDrive API support](https://github.com/mk-fg/python-onedrive/issues/52).
+Microsoft released the new OneDrive API today. See the blog post announcement [here](https://blog.onedrive.com/the-new-onedrive-api/). One highlight is that [large file upload](http://onedrive.github.io/items/upload_large_files.htm) is now officially supported. Previously, large file upload was handled with a semi-official API using the BITS protocol; the only documentation was a [gist](https://gist.github.com/rgregg/37ba8929768a62131e85). Now it is handled through standard HTTP `POST`. With this major release, there's likely a lot of work to be done with [python-onedrive](https://github.com/mk-fg/python-onedrive). I have opened an issue: [mk-fg/python-onedrive#52 — New OneDrive API support](https://github.com/mk-fg/python-onedrive/issues/52).
 
 Interestingly, the new OneDrive API doc is hosted on GitHub Pages — [onedrive.github.io](http://onedrive.github.io), rather than MSDN. Exactly a week ago I wrote a piece, "[Microsoft is getting cool (but not its website)](/blog/2015-02-17-microsoft-is-getting-cool-but-not-its-website.html)". Looks like they are doing something about their website (or better put, their online identity), too.
diff --git a/source/blog/2015-04-26-using-python-3-with-emacs-jedi.md b/source/blog/2015-04-26-using-python-3-with-emacs-jedi.md
index 5171d584..1d95f506 100644
--- a/source/blog/2015-04-26-using-python-3-with-emacs-jedi.md
+++ b/source/blog/2015-04-26-using-python-3-with-emacs-jedi.md
@@ -18,7 +18,7 @@ virtualenv -p /usr/local/bin/python3 ~/.emacs.d/.python-environments/jedi  # or
 
 And that's it. Put the following in your `~/.emacs`:
 
-```emacs-lisp
+```commonlisp
 (add-hook 'python-mode-hook 'jedi:setup)
 (setq jedi:complete-on-dot t)
 (setq jedi:environment-root "jedi")
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%;
diff --git a/source/key.md b/source/key.md
index 21a58bdf..f425f537 100644
--- a/source/key.md
+++ b/source/key.md
@@ -58,6 +58,5 @@ DfzWWr45PX+1JO3v2syPqeVn4O8FVg74JMiNLjcMR7p1iNSIAC+RQTIa9Z8YvS8S
 HNSeBk1A1wT9lfQ/V6nzcu+p2jdc2PjDop/eprGQbJuIqN38mhmjABMhtsvbgs5d
 01Ii48sdMukeqyHXqz5FQlyLxnlMtfUbhtw55OJHBsY0Brgv
 =0NyM
------END PGP PUBLIC KEY BLOCK-----
-</code>
+-----END PGP PUBLIC KEY BLOCK-----</code>
 </pre>