Yet Another Syntax Highlighter For the Web and Blogs

Today I was looking at the ol' tech blog thinking that while my current code syntax rendering is okay, it's not great. There must be something better. So I poked around the web for a bit looking, at a few other prominent technical blogs, and I came across an excellent JavaScript-based syntax highlighter appropriately named, well, SyntaxHighlighter. I know, sometimes fancy marketing names just don't make the to-do list.

The library is configurable on a number of fronts. Probably the most important feature is the ability to add what the creator calls brushes. These are essentially code files specifically tuned to the particular language's syntax you're looking to highlight. For instance, there are SQL, JavaScript, Java, and C# brushes, among others. Another nice add is the ability to tune the overall formatting via a CSS theme. This allows you to tweak the colors to various display types including but not limited to Eclipse and Emacs. Pretty nice indeed. Lastly, you don't even need to host the requisite files. The creator, Alex Gorbatchev, provides free hosting - all he asks is for a donation to help with the Amazon S3 costs.

Configuration

Configuration is also pretty much a breeze. If you're modifying an existing blog template on Blogger, as was the case for this site, you'll probably want to do a backup of your existing template. Login to your account and navigate to the Design tab. From here you'll be looking for the sub-menu option entitle Edit HTML. Backup your template via the supplied download link. That being done, search for "" in the template document in the textarea below. Just above the closing "" element is where you're going to insert the following code.

<!-- Syntax Highlighter code -->

<!-- SH::Setup CSS -->
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeEclipse.css' rel='stylesheet' type='text/css'/>

<!-- SH::Setup JS -->
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shAutoloader.js' type='text/javascript'/>

<!-- SH::Configure Brushes -->
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>

<!-- SH::Run syntax highlighter -->
<script type='text/javascript'>
     SyntaxHighlighter.config.bloggerMode = true;
     SyntaxHighlighter.all();
</script>

There are four main sections here:

1. CSS
2. JavaScript core files
3. Syntax brushes
4. Config and run highlighter

If you're running this in Blogger, you should include the line config.bloggerMode=true, as per the documentation. You'll notice I've included a number of brushes. There is also an autoloader feature that sounds like it should offload some downloading on pages that don't require all the brush files, but I haven't tried it out yet. The last thing to do is use the highlighter in a blog post. It really doesn't get much more complicated than the following:

<pre class="brush:js">
function testMeOut()
{
    alert("You should really try this out.");
}
</pre>

In this example I've decided to highlight a simple JavaScript function by specifying a brush type of "js" in my outer "<pre>" class definition.  One important thing to note is that there are actually two different ways to go about highlighting with this library. I've used the "<pre>" tag method, as this is the recommended method for blogs, but it requires you to HTML escape your code. It's a minor inconvenience, but still important to note because the syntax highlighting will not work if you have less-than "<" symbols in the code you are trying to highlight.

That should do it. If you're not seeing the correct results, make sure you've included all necessary files, referenced your brush types correctly, and escaped your HTML.

Links

• http://alexgorbatchev.com/SyntaxHighlighter