Syntax highlighting in blog posts - Prettify

Written on

Over the weekend I switched the way that my blog does code syntax highlighting.  Before, I copied my C# code manually into the tool over at which puts <span> tags and CSS classes around my code to format it. Then I manually used a HTML encoding tool, and put it into my blog posts. The reasons why this isn't great are obvious but I will spell them out anyway:

  • It's slow (for me to go through all those manual steps).
  • The HTML is larger and messier.

I have switched to client-side JavaScript highlighting. I use the Prettify project over on Google Code. I also considered Alex Gorbatchev's Syntax Highlighter which I heard was very good, but in the end went for Prettify. There are pro's and con's of moving towards a JavaScript highlighter, but the pro's far outweigh the con's in my scenario.

The con's are:

  • It's slower (for the reader - there is a noticeable lag).

The pro's are:

  • It's far quicker for me to post code samples.
  • I know that my posts are aimed at developers so they will have fast computers, modern browsers, and won't notice the client-side lag so much.
  • The code looks better in the browser.
  • The code looks better in the "view HTML source" option in your browser.

On a side note, I don't like posting code samples as images. It's harder for the reader to copy and paste, it's harder for search engines to index, and it's not accessible.