As someone who writes about code, or at least provides a lot of code samples, I have been in pursuit of a quick and easy way to turn a block of code into something that will render nicely on the web. Traditionally doing so was very cumbersome because I would have to escape special characters, and in cases where I wanted to display line numbers I would have to embed my code in a table which was tedious to say the least. Then forget about syntax highlighting - who wants to manually wrap text blocks in span tags and then style them?

Then when first building the Six Apart Developer Center it occured to me that I could build a text filter in Movable Type that would allow me to automate this whole process. So in a couple of minutes I whipped together a Movable Type plugin (available at code.sixapart.com) that could filter a block of text through the Beautifier Perl Module and thus produce some pretty decent looking code. I was happy.

But then I saw the code samples at Yahoo's User Interface Library. Not only did their code samples have syntax highlighting, but they also included:

• line numbers
• alternating background colors for each line of code
• a facility to print the code sample
• the ability to quickly view the raw text of the code

Curious as to how they may have achieved these effects I discovered that the code sample "widget" (for lack of a better term) was the product of an open source Javascript Syntax Highllighter utility. Not only that, but using the tool was dead simple.

All one has to do is wrap a block of code in a textarea HTML element according to the tools instructions, and then run a javascript function will convert the text within the textarea into a nicely formated, fully functional, highlighted block of code. Let's see it in action.

Here is how I used to publish code samples online: I would take my text, escape special characters, and then wrap the code in a <pre> tag and a <code> tag. Then with a little CSS I would style the block of text like so:

#!/usr/bin/perl
# This is a test script written in Perl
my $who = "World";
if (@ARGV) {
  $who = $ARGV[0];
}
print "Hello $who!\n";

Here is the same code sample wrapped in a textarea element and processed through the Syntax Highlighter:

The HTML used to produce this output is as follows:

It didn't take long for me to apply this style across all the code samples on the developer site. And not just code samples, I also used to make it easier to read HTML and XML fragments as well because the utility is capable of highlighting a number of languages and markup.

It is an excellent tool and one I plan to use more of in more of my projects. It just makes writing about code easier and it makes the code I write about prettier. What's not to like?