[Code Hints] Formatting source code to post in Blogger

I've been thinking of a way to automatically format the source code samples posted on the blog. I made a quick search on Google and I found this free online tool called Source Code Formatter Tool which I have to credit for the formatting of the source code posted in the previous article.
I guess it's worth the try for a lightweight formatting tool, well except for the coloring feature which could be a priority for some.
Note that there are several online tools which do the same as Source Code Formatter Tool.

1. Thirst for effectiveness

I wasn't content with Source Code Formatter Tool, so I've told myself today, I'll try to find another tool to generated beautified source code, elsewise I'll make one. So, I started a more serious Googling campaign, five minutes later, I found this really mature project: SyntaxHighlighter.

SyntaxHighlighter is a Javascript and CSS based tool. With SyntaxHighlighter, you can format a colorful source code with line numbers. You can also highlight some of these lines.
This tool originally supports plain text and 22 languages, but, you can add your own source description file for syntax coloration. Obviously, some enthusiastic people have already shared their description files on the net. I guess the only drawback I can think of now is the integration of the tool in the blogger blog. I think it could be fully integrated in a HTML/JavaScript gadget but unless you are good with Javascript and CSS, it won't be a piece of cake. Hopefully, Alex Gorbatchev the project owner and maintainer offers a free hosting of the js and css files for everyone on the globe. How generous!
There are a couple howtos on SyntaxHighlighter integration in blogger on the website of the project. But, I will give a quick one one here.

2. Quick Howto

To begin with, I suggest to embed the current version in your blog.
In the following howto, I use the default theme and use highlights for C++ code source.

1- Go to Design -> Edit HTML in your blog back-end, backup your template and add this code at the end of the head element:

<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/shBrushCpp.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>

2- Preview your blog for unhappy incompatibilities with other embedded Javascript code. If it all goes good, save your template, otherwise debug your blog.

3- Test your new gadget with this sample:

<script type="syntaxhighlighter" class="brush:cpp"><![CDATA[
#include <iostream>

using namespace std;

int main()
{
   cout << "Goodbye cruel world!" << endl;
   return 0;
}
]]></script>

It should produce this output:

3. Other alternatives

If you want a ready to copy-and-paste source code, you can use an Eclipse plugin named CodeSnippet for Eclipse which does nearly the same as SyntaxHighlighter for a narrow set of languages. As for myself, I won't go as far as installing an IDE to beautify my source code.

4. Useful links

Source Code Formatter Tool
SyntaxHighlighter
CodeSnippet for Eclipse
HTML-encode a string