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';
SyntaxHighlighter.all();
</script> 
<!-- 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;
    w.show();
    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;
    w.show();
    return a.exec();
}</pre>

To get the following XML code syntax highlighted:

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

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;class&gt;MainWindow&lt;/class&gt;
 &lt;widget class=&quot;QMainWindow&quot; name=&quot;MainWindow&quot;&gt;
  &lt;/widget&gt;
 &lt;layoutdefault spacing=&quot;6&quot; margin=&quot;11&quot;/&gt;
 &lt;resources/&gt;
 &lt;connections/&gt;
&lt;/ui&gt;</pre>

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.

Credits

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