Code Highlighting on Blogger

I'll let you all in on a little secret: I almost switched my entire blogging presence over to WordPress last week. if(!this)what(); and the NetAsylum blog. (Technically, I did, for all of about 30 minutes.) For two reasons.

One: I wanted a mobile blogging app that was worth a damn. The official Blogger app for Android is a steaming pile of crap. I don't understand how Google can't manage to put together a mobile interface for their own blogging platform on their own mobile platform. HUGE FAIL. (Update: Google seems to have updated their mobile blogging app a couple weeks ago for the first time in about a year. I have yet to try it, but don't hear many good things about the new version, either.)

Two: I wanted to be able to easily post code snippets that look all nice and pretty, formatted and syntax highlighted. I've tried a handful of solutions in the past, but was incredibly disappointed in them.

WordPress handles both of these things well, and I recognize its popularity and superiority in these areas. The downside? I want my blogs hosted on a major, stable cloud provider (not on my own server, which requires additional maintenance). Okay, that's all well and good for both services, but to point my domain names to WordPress "the right way" and to stylize my blog's appearance is an up-sell.

I'm a cheap bastard.

To combat the first problem, I eventually evaluated a number of mobile applications, and finally came upon one called BlogIt! that handles many of my needs well, including multiple blogs and image posting (which is something I haven't reliably been able to do for a while).

The second required a bit of research and evaluation on my part, and I've settled on Sunlight.js which is an extremely comprehensive multi-language highlighter and formatter. (It even handles nested languages!) It doesn't appear to be recently maintained, but it seems to be the easiest to implement on Blogger, and couldn't be simpler to use.

To add the functionality only requires a few tags in the page header:

<link href="/path/to/sunlight.default.css" rel="stylesheet" type="text/css"></link>
<script src="/path/to/sunlight-min.js" type="text/javascript"></script>
<script src="/path/to/sunlight.csharp-min.js" type="text/javascript"></script>

Then add the following bit of script right before the closing </body> tag:

<script type="text/javascript">
    Sunlight.highlightAll();
</script>

To mark a segment of text as code, you enclose it in a <pre> tag with a special class, as in:

<pre class="sunlight-highlight-javascript">
    function DoSomething() {
        // Your code here...
        return;
    }
</pre>

Which results in output that looks like this:

    function DoSomething() {
        // Your code here...
        return;
    }

And that's it. Can't get much more simple than that.

With that out of the way, I'll be sharing some of the principles behind some things I've been working on at the new job, which includes some WCF services, RESTful web API, MVVM, and other acronym-ish buzzwords as well.