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:

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.

Advertisements

About David Ruttka

I've been "making computers do things" since I first saw King's Quest on a 286 PC in the mid-80's, but I turned it into a career just over a decade ago. While the majority of my experience has been on the Microsoft stack (C#, .NET, ASP.NET), I've recently been diving deeper into JavaScript and exploring the Ruby universe. Occasionally, I'll do a public speaking gig or write a blog post. When I'm not coding, I enjoy spending time with my family, watching hockey, and playing the occasional video game. You can also find me on Stack Overflow, Google Plus, and Twitter. Microsoft Certified Programming in HTML5 with JavaScript and CSS3 Specialist; MCPD Windows Developer 3.5
This entry was posted in Meta. Bookmark the permalink.

4 Responses to Getting Started with SyntaxHighlighter

  1. Nice choice. The last sample (for example) comes through formatted nicely for me in Google Reader. Looks like it’s wrapped in a

     there (as you described), so I guess that's one place where this makes more sense than putting samples inside of a script tag.
  2. Whoops – looks like my pre tag in the last comment was not escaped. 😉

  3. Pingback: WordPress and syntax highligthing | Stanx unterwegs in …

  4. Pingback: WordPress and syntax highligthing « Hans Stanglmayr

Thoughts?

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s