Google Syntax Highlighter

October 11th, 2007

I just found a nice light-weight syntax highlighter called the Google Syntax Highlighter by Alex Gorbatchev. It is 100% client-side written in Javascript so it is extremely portable. I can already think of a few good uses for it starting with being the preferred highlight solution for this blog. This replaces the iG:Syntax Hiliter which is quite nice and powerful, but I am not nuts about the way it looks by default and too lazy to customize the style sheet. I went ahead and converted the last few articles to use it so you can see it in action below.

Also, if you happen to be on WordPress, you can just grab the Google Syntax Highlighter Plugin for WordPress.

Now on to creating some content that needs highlighting.

UPDATE: One pretty big drawback to this approach to highlighting is the code will not be highlighted until after the page loads. In the case of this blog, I am using the WordPress plugin so this highlighter is the last piece to run. This has resulted in a perceived load time for the blog that is much slower than if this highlighting was done server-side. As a result, I am probably going to move this blog back to a server-side solution with some customizations. I will share the details when I do.

It is worth mentioning that the Google syntax highlighter could probably be sped-up with a few customizations such as: bundling all the js in one file and compressing it, moving it higher up the load stack, and the Google Syntax highligher could be customized to render each element at load time instead of rendering the whole page at the end.

UPDATE 2: I am no longer using this plugin. I think the major slow-down is due to the multiple split JS files since each file blocks while executing. I switched to the Google Code Prettify which is much easier to use.

One Response to “Google Syntax Highlighter”

  1. Darko Bunic Says:

    Hi, I also use Google Syntax Highlighter on my site www.redips.net
    Just to inform you, I made plugin improvement to load only needed brushes to minimize traffic and speed up page loading. Load of brushes are moved to the page top.

    Thank you for article!

Leave a Reply