David Ruttka

I make computers do things

Getting Started With SyntaxHighlighter

Is it just me, or did it get far too quiet around here after we finished our GiveCamp recaps?

Before I start writing any new posts, I need to work out syntax highlighting so that any code posted here looks good and is easily accessible. I throw a lot of snippets at StackOverflow, but their editor takes care of the cosmetic stuff for me via toolbar buttons, ` characters, and four space indentations.

Getting code to look right in blog posts is probably old ancient news for anyone who has been blogging for a while, but it’s not something that I’ve had to do before. This post is dedicated to all my fellow newbs.

It turns out that a JavaScript solution called SyntaxHighlighter makes presenting code on the interwebs a wonderful dose of auto-magic! I should have known that Googling the topic would promptly direct me to Hanselman’s take on it. I’ve installed the recommended WLW plugin, but I also experimented with the integration in the WordPress editor.

WordPress Editor

When we started this thing, WordPress seemed to be the easiest, quickest, and cheapest option to get the wheels turning. What I found tonight is that the editor in wp-admin supports SyntaxHighlighter directly. Pop over to the HTML tab and make sure your code is wrapped like this:

[sourcecode language=“csharp”] public string Foo(){ return “Bar”; } [/sourcecode]

The language value can be any one of the supported brushes for the syntax highlighting. The result:

1
2
3
4
public string Foo()
{
return "Bar";
}

PreCode Plugin for Windows Live Writer

Well, all that switching between the Visual and HTML tabs can be a bit tedious, not to mention managing the indentation. Then there’s the camp that says you should never use the online web editor if you can use a dedicated app like Live Writer instead. Let’s take a look at one of the WLW plugin options.

PreCode is the plugin recommended on the post I found from Scott Hanselman. The installation process is exactly what you’d expect, so I’m not going to detail it here. I will briefly cover the workflow and some of the options.

Once again, I’m new to the blogging thing, so this is probably well known to most of you. The plugins are accessed from the Insert toolbar.

image

When you click it, you’ll get a full editor dedicated solely to the purpose of editing and formatting your code snippet.

image

Throw some in there. I will be wrapping my code in PRE tags rather than SCRIPT tags, but you can check the documentation to read up on the differences, advantages, and disadvantages.

You can flip a lot of other bits here: your highlighter class, whether to display the toolbar (for viewing source, copying to clipboard), etc. Also, don’t overlook the indentation management buttons! I experimented with some very broken indentation. I can’t say “Fix Indentation” always did the perfect thing, but it always came up with something decent.

Clicking “OK” with the options you see in the screenshot above result in what you see below.

public string Foo()
{
    return "Bar";
}

Summary

SyntaxHighlighter and the PreCode plugin for WLW have robbed me of one of the last excuses I had left to delay blogging. There are many other integration options as well as support for your directly handcrafted efforts. Here’s to beautiful code on the internet.

This post originally appeared on The DevStop.