Scott Hanselman

I get a few emails a day of folks asking what Syntax Highlighter I use in my blog for my code samples. Specifically, the newer code samples, as some of the old ones sucked as I was experimenting, trying to find the best one to settle on.

The tool I use is actually called SyntaxHighlighter and it's from Alex Gorbatchev. The trick is that the syntax highlighter is all javascript on the client side.

I was having all sorts of troubles with other code highlighters. First, there were ones that put css classes and stuff all through your code, trying to decorate each keyword. This just bloated my feed and site and made the code look weird in some Feed Readers. Then I tried using images for code, like ScottGu does, but that is just wrong. You can't copy paste the code, you can't search it, it's disrespectful for the blind, etc. Meh.

How I post code to my blog

I use Windows Live Writer to post all my blog posts, and it has a great plugin model. I've actually written a WLW plugin for the CueCat...it's really easy. I use a plugin from DasBlog contributor Anthony Bouch called PreCode that directly targets/supports SyntaxHighlighter from within WLW.

That means I see this from inside Live Writer. I slick Insert PreCode Snippet, and paste in my code.

If you're reading this blog post from inside an aggregator or feed reader, the next two code snippets look identical to you. However, if you visit my blog, you'll see that one is different.

// Hello3.cs
using System;

public class Hello3
{
   public static void Main(string[] args)
   {
      Console.WriteLine("Hello, World!");
      Console.WriteLine("You entered the following {0} command line arguments:",
         args.Length );
      for (int i=0; i < args.Length; i++)
      {
         Console.WriteLine("{0}", args[i]); 
      }
   }
}

// Hello3.cs
using System;

public class Hello3
{
   public static void Main(string[] args)
   {
      Console.WriteLine("Hello, World!");
      Console.WriteLine("You entered the following {0} command line arguments:",
         args.Length );
      for (int i=0; i < args.Length; i++)
      {
         Console.WriteLine("{0}", args[i]); 
      }
   }
}

One looks like this, as HTML:

// Hello3.cs
using System;

public class Hello3
{

   public static void Main(string[] args)
   {
      
Console.WriteLine("Hello, World!");
      Console.WriteLine("You entered 
the following {0} command line arguments:",
         args.Length );
      
for (int i=0; i < args.Length; i++)
      {
         
Console.WriteLine("{0}", args[i]); 
      }
   }
}

See the 'class="c#" name="code"' part? Alex's Javascript SyntaxHighlighter is looking for those and parsing them on the client side. I choose to add
breaks, but that's an option in PreCode. Other options for SyntaxHighlighter include line numbering, gutters, copy/paste support, a toolbar and more.

P.S. If you don't use Windows Live Writer (and seriously, stop and ask yourself, WHY NOT?) and use instead a web interface, you can integrate SyntaxHighlighter into your web-based rich text editor. For example, Darren made a SyntaxHighlighter Plugin for the popular FCKeditor. Perhaps we'll put that in DasBlog.

Installing SyntaxHighlighter to Your Blog

You install the SyntaxHighlighter by adding it to your blog's template. It doesn't care what blog engine you run, as it doesn't need anything on the server:

Just add the shCore library and just the languages you require. If you want your blog to feel snappy and you have some control over your server, don't forget to set the files/directories to cache on the client by making them expire far in the future. You don't want your user's browsers to keep asking for these scripts each page view.

Even better, you can create your own plugins for SyntaxHighlighter if you use a language Alex hasn't supported officially. This guy threw together a Scala SyntaxHighlighter file by editing the Java one and adding a regex.

There are a few bugs but I think folks forget that Alex is doing this all alone, so I have to give him mad props for the effort. It can be lonely and unforgiving when you do something awesome and either no one cares, or folks only care to complain.

UPDATE: There's some great un-bundled brushes collected here.

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

About   Newsletter

Hosting By