I’ve been using several different ways of highlighting code on this blog over the years. Since I re-launched it about a year ago I use only Windows Live Writer as my tool for authoring the blog posts and have tried a number of plug-ins with varying success. The formatting of the code is usually quite allright, but the mark-up it spits out is just horrific. It looks like in the old days of pasting from word documents into dreamweaver and seeing something like this:

<p class=”MsoNormal”><p class=”MsoTac1><font size=”5” face=”Cambria”><span style=”font-family:Cambria;font-size:18.0pt;font-weight:bold”>The quick brown fox jumped all the hell around and spewed terrible html mark up to the left and right</span></font></p></p>

Absolutely terrifying. Anyway, I decided it was time for a spring cleaning and looked around at different options. I had a particular set of goals in mind:

  • Readability – it must be easy for consumers of the blog to read the code.
  • Extensibility – I must be able to extend functionality of the highlighting as I see fit.
  • Simplicity – It must be simple for me to paste and edit code with it using WLW.
  • Speed – It must load fast and be light as to not impact the load time of the blog negatively.
  • Languages – It must support different languages such as JavaScript, C#, markup, XML etc.

I stumbled around and tried a few until I found my perfect match: Prismjs! I selected the dark (almost Atom-like) theme Okaida by Ocodia just to get some contrast to the themes I used before.

Prismjs core is less than 2k, blazingly fast and uses semantic non-cluttering html 5 mark up. It’s also fully open source and supports most about every programming language you can think of.

Here’s what it looks like for some javascript:

var inputDelay = (function () {
    var timer = 0;
    return function (callback, ms) {
        clearTimeout(timer);
        timer = setTimeout(callback, ms);
    };
})();

Now that's nice, but what's even nicer is that I just copied this code-snippet and pasted it in Windows Live Writer and it automatically wrapped it in <pre> and <code> tags for me which is all prismjs needs to do its magic! In this case, as it’s javascript, I had to manually add the class=”language-javascript” attribute, but that’s a minor price to pay. I have defaulted my language to c# so if I were to paste som cool .net stuff in here like this:

public enum Suits
{
    Spades,
    Hearts,
    Clubs,
    Diamonds,
    NumSuits
}

public void PrintAllSuits()
{
    foreach (string name in Enum.GetNames(typeof(Suits)))
    {
        System.Console.WriteLine(name);
    }
}

I wouldn’t even have to add the class. It just automatically works. Now that’s simplicity!

To the cloud!

While i was in the mood for changing things up I also decided to move the hosting of my website to Azure. Not because I was dissatisfied with my current web hosting at Binero, but because I got inspired by Troy Hunt and his website http://worldsgreatestazuredemo.com/. The process of setting up a new site in Azure is dead simple. It takes about 5 minutes to have a brand new site up and running. In my case I set it up with deploy from GitHub, which means I actually write and publish my blog posts locally and then commit them into git. Azure automatically picks it up and deploys it. This brought one problem though… comments.

I previously handled comments as part of the blog post. Every comment would be stored in the XML representing a post and that was all fine and dandy. However, as I am now pushing my posts from source control that would mean that I would overwrite any comments with every commit. How do we get around that?

The cloud to the rescue! There are several different cloud based commenting solutions but I decided to go with disqus, a clean and simple api, support for facebook, twitter, google logins and an unobtrusive interface.

So what do you think of the new theme for code highlighting? Let me know in the (new) comments.