Monday, May 17, 2010

Syntax Highlighting

I have been using a code snippet plug-in for Windows Live Writer from Leo Vildosola for quite some time. However, it generates a lot of markup so I thought I would do some experimenting with some other syntax highlighting options. 

Having been impressed with StackOverflow and how they display code I decided to try Google Prettify. This is a java based code snippet syntax highlighter which works with most code. It does a very good job highlighting the code and it has some options for specific language support.

Since I am using Blogger as my hosting service I had to add the references to my layout template. Fortunately several people had already done this and after a quick Google search I found an article on StackOverflow – How to use Prettify with Blogger/BlogSpot. The instructions were very straight forward making it fairly simple to test. I posted an example page using Google Prettify here.

Here are my impressions of Google Prettify:

  • Does a good job highlighting the syntax
  • Easy to designate code blocks with the <pre> or <code> html tags
  • Simple to specify highlight colors
  • No support for SQL or Delphi code
  • Line numbers must be added manually
  • Shading is a bit difficult

Another popular highlighter is SyntaxHighlighter by Alex Gorbatchev. This is also a java based code snippet syntax highlighter but it does a lot more formatting than Google Prettify. There are several themes available as well as instructions on creating your own. It also has support for many languages, including SQL and Delphi, as well as a good tutorial for adding new languages. In addition to the syntax highlighting features the plug-in also includes buttons for showing the code in a new window, copying the code to the clipboard and printing options.

I was able to find a great blog post from Carter Cole on how to configure SyntaxHighlighter for blogger. I setup an example page using SyntaxHighlighter here.

Here are my impressions of SyntaxHighlighter:

  • Does a good job highlighting the syntax
  • Easy to designate code blocks with <pre> or <script> tags
  • Support for all the languages I use
  • Good default formatting of code
  • Options for viewing, printing and copying the code
  • CSS themes are a bit complex
  • Load time can be a bit slow ( I am using the hosted model )

In the end I chose to use SyntaxHiglighter because it had more features and I liked the formatting better. It is easier to tweak the formatting for Google Prettify but it takes a lot more markup to get the look that I want for my code snippets.

The only real downfall to using either of these methods is that the formatting is only available when viewing the actual blog site. The formatting will not be shown in the RSS feed, so if you are looking at a big block of code you might want to open the post directly.

No comments: