Tuesday, December 29, 2009

Syntax Highlight Blogger Posts Automatically

When posting source code in a blog post, you surely want it to be syntax highlighted. However, doing it manually is painful. I'll show you how to syntax highlight source code automatically, and works in Blogger.

Note: This isn't a Qt tip, but I bet you'll find it useful. :-)

My Old Technique: tohtml.com

At first I used tohtml.com's service to do syntax highlighting. Which works fine, by the way, but generates quite large HTML, especially if the code is long.

And it lacks the cool features like line numbering and copy-to-clipboard.

Enter... the JavaScript Syntax Highlighter!

Activating Alex Gorbatchev's JavaScript Syntax Highlighter

The syntax highlighting engine that we're gonna use is the excellent Syntax Highlighter by Alex Gorbatchev.

To install it, simply add the following code inside the blog template's HEAD:

<!-- Syntax Highlighter: Begin -->
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/> 
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'></script> 
<script language='javascript'> 
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
<!-- Syntax Highlighter: End -->

To edit the template in Blogger, go to Layout -> Edit HTML -> Edit Template.

Using Syntax Highlighter

To use it in a blog post, surround the code you want to post with PRE tag and either class="brush: xml" or class="brush: cpp" depending on the programming language (XML or C++ respectively).

You need to escape the content first before pasting into Blogger's post editor, using Quick Escape.

Syntax Highlighted Examples

Syntax highlighting for C++ (Qt!) code:

#include <QtGui/QApplication>
#include "mainwindow.h"

int main(int argc, char *argv[])
    QApplication a(argc, argv);
    MainWindow w;
    return a.exec();

Source HTML for the above is:

<pre class="brush: cpp">#include &lt;QtGui/QApplication&gt;
#include &quot;mainwindow.h&quot;

int main(int argc, char *argv[])
    QApplication a(argc, argv);
    MainWindow w;
    return a.exec();

To get the following XML code syntax highlighted:

<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
 <widget class="QMainWindow" name="MainWindow">
 <layoutdefault spacing="6" margin="11"/>

Put these in "Edit HTML": (WARNING! The following may hurt your eyes!)

<pre class="brush: xml">&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;
&lt;ui version=&quot;4.0&quot;&gt;
 &lt;widget class=&quot;QMainWindow&quot; name=&quot;MainWindow&quot;&gt;
 &lt;layoutdefault spacing=&quot;6&quot; margin=&quot;11&quot;/&gt;

Looks really ugly, huh? The escaping is unfortunately, necessary.

In Blogger, when you got from "Edit HTML" to "Compose" (WYSIWYG) it gets even uglier. This usually only applies for XML-ish code.

Quick Escape: My Version

As I'm writing this, the Quick Escape online service I previously mentioned goes down... leaving me powerless to escape my code examples.

Fortunately, escaping HTML is easy to do with any programming toolkit. Hereby I choose Ruby language.

Save the following code as escapehtml.rb:

#!/usr/bin/env ruby
require 'cgi'
print CGI::escapeHTML $stdin.read

You can use it by simply executing it in a terminal, typing something then press Ctrl+D. Or by piping any content or file into it.


I found this technique from Awesome syntax highlighting made easy by Carter Cole. In fact, I simply reiterate here what he wrote there.


  1. dude.. thank you very much for your help.. i understood everything you've told except for the final part about some terminal, ruby :(
    I am pure java programmer, do you have any solution for me?

    Thanks in advance,

  2. Bragadeesh,

    I have found out that the script is not necessary.

    You can use Blogger's new post editor:
    1. Turn on Blogger's beta interface.
    2. Go to your blog's settings, choose the new WYSIWYG post editor.

    While editing your blog post in WYSIWYG mode, on the options below the editor, make sure you choose "Show HTML literally". Now you can paste any source code directly without escaping.

    If you still want to use escaping, get Ruby from http://www.ruby-lang.org/

    Then run the script above by running from the command prompt:

    ruby escapehtml.rb

  3. Hendy buddy!!!!

    Thank you very very very much... I got it... Works perfectly, i dont need to use that ugly html escaper now..

    God bless you for your help,

  4. Glad it works for you, Bragadeesh. :-)

  5. Nice post bro, my codes look beautiful with it^_^


Be the first to comment!