Easy Code Syntax Highlight on Blogger Dynamic Views (or everywhere you need!)

We were redesigning the Crux Blog this week, to adopt the new Blogger's Dynamic Views feature. We were very happy with all amazing layouts it provides and the simplicity of the edition tool. But one little thing was boring us: we were not able to highlight pieces of code in our posts, like we could do using Blogger's simple templates.

This was because the Dynamic Views do not allow us to edit the HTML template, so we could not import any JavaScript API to do the highlight job. After  a little brainstorm session and few failed attempts, we can now highlight our code using a single line of JavaScript.

• Open your post using the Blogger's HTML editor;
• Create a tag PRE and assign the CSS class related to the desired language (brush:java or brush:xml);
• Paste your source code inside this PRE tag;
• Import the loader at the final of your post;

• To install the CSS styles, required by SyntaxHighlighter, you will need to do this step only once: open the Blogger's Advanced Layout Designer and access the CSS editor. Copy and paste the contents of the following files:
• shCore.css
• shCoreDefault.css
• shThemeEclipse.css

<pre class="brush:java">

    public class SyntaxHighlighterWorksFineHere
    {
        public static void main(String[] args)
        {
            System.out.println("Yes!");
        }
    }

</pre>

<script src="http://crux-framework-tools.googlecode.com/(...)/highlightLoader.js">

The URL of the script was truncated just for preserving the layout... it is too long to fit the box. The complete URL is:
http://crux-framework-tools.googlecode.com/svn/trunk/misc/highlight/highlightLoader.js
It is nice to emphasize that you just need to include this script once in each post, no matter how many blocks of code it contains.


How It Works

We compiled the SyntaxHighlighter library (by Alex Gorbachev. Thank you, Alex!) using Google's Closure Compiler Service.

This compilation was necessary to:

1. Join highlighter Core, Java Brush and XML Brush in a single script file;
2. Minimize the code;
3. Append one line of code to automatically call the highlighter main function once script is loaded (
   SyntaxHighlighter.highlight() method). 

Then, we created a loader, to allow multiple inclusions of the highlighter script. This is necessary because the inclusion goes on the HTML of each post, once we can not edit the Dynamic Views template.