Math & Code in Blogger

I use Blogger because of its simplicity and general lack of features. I’ve installed WordPress, and for me it’s a quagmire of tinkering and playing with plugins and themes, all in avoidance of writing. Blogger’s lack of features is itself a feature in the same way that full-screen text editors are a feature: it blocks out lots of potential time wasters.

Having said that, there are a few features I miss on Blogger, namely syntax highlighting and math formatting. Luckily there are a couple of easy javascript libraries that can do the job.

Syntax Highlighting with Google Code Prettify

Google has a javascript library for code syntax. It’s pretty basic in its formatting options, but good enough for me. Most importantly, installation is simple. I simply point to a javascript library hosted by google. Installation requires one line in the template:

<script src='https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js'/>

This add a css class, prettyprint. Use it in a pre tag for a code block. This HTML code:

<pre class="prettyprint">
int main(argc, argv[]) {
    printf("Hello, world!\n");
    return 0;
}
</pre>

is formatted like this:

int main(argc, argv[]) {
    printf("Hello, world!\n");
    return 0;
}

Tag inline code with <code> so that <code class="prettyprint">int i = 0;</code> becomes int i = 0;

Most "normal" (i.e., C-like) languages are recognized with the default. If you like oddball languages, like I do, you might need to specify your language. For example, I specify Scheme when I import the javascript like this:

<script src='https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?lang=scm'/>

and then again specify the language in side the class

<code class="pretty-print lang-scm">
(define (area-of-disk r) 
  (* 3.14 (* r r)))
</code>

Becomes

(define (area-of-disk r) 
  (* 3.14 (* r r)))

I stick with the default style, which is pretty subtle. If you like more emphatic highlighting, the README has instructions of changing themes and other options like line numbering. It also contains the definitive language list.

Math Formatting with MathJax

I don't do a lot of math, but when I do it's important to me that the notation is clear.MathJax is a javascript library to format math. If you use their CDN, installation is one line in the Blogger template:

<script src='//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML' type='text/javascript' />

Equations are delimited with \[ \]. Now by entering this:

∖[ x = ∖frac{-b ∖pm ∖sqrt{b^2 - 4ac}} {2a} ∖]

You'll get this:

\[ x = \frac{-b \pm \sqrt{b^2 - 4ac}} {2a} \]

Inline latex is delimited with \( \) so that ∖(e = mc^2 ∖) becomes \( e= mc^2 \).

I like working with MathJax so much, it makes me want to include more posts with math.

Drawbacks

One drawback of this method is that you're entering a lot raw HTML in <code> and <pre> tags. It would be nice

Another drawback is that every page is loading the CSS and JavaScript for code and math on every page, regardless of whether there's any need for it or not.

Finally, while MathJax is well maintained, Google Code Prettify is a bit less active. As I write this, the last commit to the subversion repository was Mon, 03 Mar 2014. I won't be holding my breath for a Swift lexer.