Stacking Code

This is post #4 in the Building Neno series. Please click here for a description of the Building Neno project and instructions on how to access the source code for this post.

It's all a bit hazy but I think I posted huge swathes of very ugly code on my blog last night. A quick check this morning confirms the unpleasantness. Time to rectify that with some syntax highlighting.

Working with Markdown

I'm loving Markdown so far. It makes writing decently formatted HTML a breeze without having to worry about tags. When pasting in a code sample, all I have to do is indent it four spaces (on each line) and Markdown will surround it with <pre> and <code> tags for me. As far as I can find though, I don't have the ability to set attributes on those tags without doing the tags manually. Markdown will let me write HTML tags if I really want to... But I don't really want to unless it's the rarest of cases. Considering this is a technical blog, posting code will not be that rare.

So that limits my choice of syntax highlighting libraries a little bit. Both the excellent SyntaxHighlighter and jQuery.Syntax libraries unfortunately require class attributes to set brushes -- a way of identifying the language that is being highlighted. If I don't want to do manual tags with class attributes, where do I turn?

So Pretty

Prettify to the rescue. Prettify requires a class attribute as well, but it's a standard value, not a language specific one. Prettify works by looking at the code and taking a best guess of what language it is and highlights it accordingly. It gets it right most of the time -- and even when it doesn't, it still looks acceptable.

The problem is getting that class attribute on my <pre><code> blocks. No problem, jQuery has been sitting in my scripts folder just itching for a chance to shine. Time to do some work, jQuery.

jQuery It Up

I add the prettify.css link to my head tag and include the jquery-1.4.1.min.js and prettify.js JavaScript files near the end of my body tag. Unless there's a clear need to move the JavaScript files higher, the end makes sense. It keeps the rendering of the page snappy.

Add a little bit of custom jQuery to find all my <pre><code> blocks and add a class to them...

<script language="javascript" type="text/javascript">
    $(document).ready(function () {
        $("pre code").addClass("prettyprint");
        prettyPrint();
    });
</script>

That's followed by the call to prettyPrint to do the highlighting. Prettify is normally installed with an onload="prettyPrint()" attribute on the body tag, but this is semantically equivalent. And somewhat prettier. A prettier Prettify? Love it.

EDIT: This doesn't work properly in IE8 and IE7. The line should actually be...

$("pre code").parent().addClass("prettyprint");

See this post for details.

Some CSS Too

My <pre><code> blocks weren't just suffering from a lack of colour. They were sprawling all over the place, going beyond their boundaries whenever they could. Time to reel those in with some CSS.

pre
{
    background-color: #fff;
    border: 0.5px solid #ddd;
    padding: 1px;
    overflow: auto;
    width: 100%;
}

pre code
{
    background-color: #fff;
    border: 0;
    padding: 0;
}

The overflow and width settings give the boxes a horizontal scrollbar which looks great in Firefox. I'm sure it's probably broken in IE but I'll check that later. The print version of the CSS has the overflow line commented out. Laser printed scrollbars have never worked -- they really should fix that one day.

The Result

The page renders fast, showing the code in their padded boxes with black text, then loads up jQuery and Prettify to add colour. Nothing moves on the screen, just the colour of the code changes. The effect is quite nice. And RSS readers and browsers with JavaScript disabled just see the black text in standard <pre><code> blocks.

I think I'm done.