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 <QtGui/QApplication>
#include "mainwindow.h"
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"><?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></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.
:
