Blogger: Awesome code syntax highlighting made easy

This post represents my to-date findings on the best way to paste source code into a Blogger based blog post. The goal is to have something with enough sugar for reading the post in the browser and also having it RSS reader compatible.

Several poor man solutions are out there. Examples are here and here.
Basically these are javascript based apps which take your code and apply some html escaping and wrap it with a <pre> tag and inline styles.

I remembered liking what YUI uses on their site. It is a syntax highlighter written by Alex Gorbatchev and can be found here. A summary of how to add it to your Blogger posts is here. This is more advanced in terms of display and user options.

While 'pretty', the Gorbatchev highlighter has the caveat that all the sugar goes away in RSS readers. I mean it works, however the result is just monospaced font.

By combining the Gorbatchev highlighter with the simplified source code formatters approach, I can have the best of both. Code that looks good in the browser and also when read with an RSS reader.

1. Edit your blogger template following the instructions outlined here to activate the Gorbatchev SyntaxHighlighter.

2. (Optional) Install this Firefox add-on Clippings to make pasting the required html into the blogger editor easy.

3. Use the following html to wrap your source code you paste into the editor. Remember that any source code must be html escaped ( < brackets must be escaped!)

<pre class="brush: xml;" style="font-family:Andale Mono, Lucida Console, Monaco, fixed, monospace, monospace;font-size:12px;border:1px dashed #CCCCCC;width:99%;height:auto;overflow:auto;background:#f0f0f0;padding:0px;color:#000000;text-align:left;line-height:14px;">
<!-- your code goes here -->
</pre>

The "brush: xml" part indicates what type of source code you are formatting. I suggest making a new clipping in the Clippings add-on (step 2) for each type source code you typically are pasting into your blog. See this page for more info on brushes and this page on how to specify additional parameters to the source code formatter.

Make sure to use the pre element version of the code block and not the script element version since script tags are removed in rss feeds.

4. Test it out. Create a new blog post, click the 'Edit Html' tab of the blogger editor. Make sure the Post Options include "Show HTML Literally" checked. Right click inside the editor textbox and select a clipping from the Clippings menu to paste a preconfigured pre block. Add some source code and publish your post.
Note: To see the full effect remember to publish your post since the popup preview window in Blogger editor only shows the simplified version of the formatting.

Here is an example of what code will look like when viewed in a browser.

/**
 * SyntaxHighlighter  
 */  
function foo()  
{  
  // it works!  
}

Here is an example of what RSS readers typically display. The class attribute will have no effect.

/**
 * SyntaxHighlighter  
 */  
function foo()  
{  
  // it works!  
}

Caveats:
1. The flash based toolbar will not show up on some mobile platforms for obvious reasons. Not a big deal as that is just sugar.
2. The described solution I use depends on using the Clippings add-on in Firefox and therefore the Firefox browser. Other browsers may have some similar plugins available - I dunno. Either way it is not critical.

If anyone has found a better solution please let me know.