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

13 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. 

13 comments :

Post a Comment

Crux 4.0 Released!

No comments



Get it now here!

The great benefit of this version is performance. Crux no longer interprets metadada at runtime. Some of the screen building tasks that were made at runtime are now done at compile time.

The result is an amazing enhancement of 300% in speed for rendering the screen.

Another performance improvement is that Crux 4 only renders what is needed. Widgets that are not visible when the screen is rendered for the first time will be rendered lazily, only when and if necessary.

No comments :

Post a Comment