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

11 comments


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.


If you want to use the same solution, you just need to:
  • 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:


Here is an example of a post using SyntaxHighligher:
<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. 

11 comments :

  1. Hi, It says:

    SyntaxHighlighter
    Can't find brush for: python

    How to install Python brush.

    pls check my post.
    http://nugjii.blogspot.com/2012/01/python-on-symbian.html

    ReplyDelete
  2. Seriously nice work here guys. I also added the instructions to my blog and linked back to yours since I'm using it.

    ReplyDelete
  3. How to add more brush??
    can i am put in your loader?

    ReplyDelete
  4. How to highlight code in C language? brush:C is not working. For java ,its working perfectly fine. Looking forward to your reply.

    ReplyDelete
  5. To all those asking for the extra brushes: you need to include the right brushes in the compiled js in Google Closure Compiler.

    ReplyDelete
    Replies
    1. It would be nice that someone would give some guidance on this. I am not very familiar with Javascript and it's hacky things

      Delete
    2. I have written a quick blog post for you to complete the task at hand :)

      http://www.maartenmensink.nl/2012/08/how-to-syntax-hightlighting-on-blogger.html

      Delete
  6. You saved my life :D
    Thanks, bro!

    ReplyDelete
  7. There's a workaround for dynamic views:
    http://stackoverflow.com/a/12854822/279307

    ReplyDelete