fd Blog

Daniel Hilgarth on software development

Syntax Highlighting in the Blog

After Octopress was up and running, I performed some tests. Being a developer, the first and most important test was about code.

And it was pretty sobering, indeed:

public GreetingTemplatesTableSource(HighLevelClient apiClient, UINavigationController navigationController)
{
    if (apiClient == null)
        throw new ArgumentNullException("apiClient");
    if (navigationController == null)
        throw new ArgumentNullException("navigationController");
    _apiClient = apiClient;
    _navigationController = navigationController;
}

No highlighting at all! I used 4-space indenting, without any specification of the language. I guess the highlighter isn’t smart enough to infer the language - or at least its family - from the code itself.

The next thing I tried was GitHub flavored, fenced code blocks.
Without specifying a language, it expectedly yielded the same result as above.
But when I did specify the language all generated pages were blank - zero byte in size!
As this only happened on Windows but not on Ubuntu, I think it actually is some kind of bug and reported it.
The fenced code blocks on Ubuntu and the liquid code blocks seem to yield the same result. While not so bad - there is some highlighting - I didn’t like the fact that the name and the type of a method parameter had the same color. Examining the generated HTML showed that they both have the same CSS class, so there was nothing I could do.

Next, I tried CodeRay but it became evident quite fast that it wasn’t for me either: There is no C# support.

Finally, I decided to use Google’s code prettify. It is a JavaScript library, so the syntax highlighting actually happens on page load on the client side and not during generation of the static HTML pages. But I figured that it probably is good enough for my blog when it is good enough for Stack Overflow ;-)

The highlighted code now looks like this:

public GreetingTemplatesTableSource(HighLevelClient apiClient, UINavigationController navigationController)
{
    if (apiClient == null)
        throw new ArgumentNullException("apiClient");
    if (navigationController == null)
        throw new ArgumentNullException("navigationController");
    _apiClient = apiClient;
    _navigationController = navigationController;
}

Not bad, not bad at all :-)

To make that work, I had to add the required script tag to the file source/_includes/custom/head.html. You can simply load the code from googlecode.com as indicated on their “Getting Started” page:

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

Out of the box, I now have two options to actually get highlighted code:

Option 1:

Add <?prettify?> before the indented code block:

<?prettify?>

    public GreetingTemplatesTableSource(HighLevelClient apiClient, UINavigationController navigationController)
    {
        if (apiClient == null)
            throw new ArgumentNullException("apiClient");
        if (navigationController == null)
            throw new ArgumentNullException("navigationController");
        _apiClient = apiClient;
        _navigationController = navigationController;
    }

Option 2:

Add {:.prettyprint} after the indented code block:

    public GreetingTemplatesTableSource(HighLevelClient apiClient, UINavigationController navigationController)
    {
        if (apiClient == null)
            throw new ArgumentNullException("apiClient");
        if (navigationController == null)
            throw new ArgumentNullException("navigationController");
        _apiClient = apiClient;
        _navigationController = navigationController;
    }
{:.prettyprint}

Comments