Posting Source Code on Blogger

Hi Folks,

in todays post, I want to test and show you how to post nicely formatted, syntax highlighted source code on Google Blogspot. This task was actually more difficult than I thought it would be, heck, Blogger didn't want to do it at all in the beginning. But beeing an IT engineer, and a very serious IT guy, I managed to pull it off. ;)

Here's how to do it.

At first you need a JavaScript Library which will format our code. There are some out there, but most popular is SyntaxHighlighter version 3, by Alex Gorbatchev. You can head over to http://alexgorbatchev.com/SyntaxHighlighter/ for more details. After diggin' into how to use his library, I found most guides out there were outdated and working only with older version than version 3. So I show you now how to integrate SyntaxHighlighter v3 into Blogger.

First you need to edit your Blogs Template.

Go to your blog settings, choose template and then click on Edit HTML from your active template. Now in your template hit CTRL+F and search for </head> Tag.

Then you have to enter the following lines BEFORE the closing </head> Tag:

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCoreDefault.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 src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
<script type='text/javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>

The first two lines import CSS-Stylesheets, the core css and the default theme. There are several other themes available, you can look them up here. I use the default theme because it is solid enough and gives a nice contrast to the rest of my blog. Use whatever theme you like (you can even create your own theme, there's a tutorial on Alex Gorbatchev's site). After that, three JavaScripts are loaded, the first being the core (obviously ;-) and the other two being brushes for highlighting distinct languages. I use the C++ and XML brush to highlight C++ and HTML. If you are in need for other languages look up the alias list here.

Until now, blogger won't render any code correctly. Therfore we must say SyntaxHighlighter that it's running on blogger, which was the hard part to find out at the beginning ( SyntaxHighlighter.config.bloggerMode = true; ) and tell him to render any found code pieces ( SyntaxHighlighter.all(); )

That's all for configuration, save your template end exit edit mode. Now let's look at how to use it. Create a new blog post. Enter some text and then copy the code piece you want to blog to your clipboard. Enter HTML edit mode, search for the place where you want to put your code and enter the following lines:

<pre class="brush: cpp">
*** paste your code here ***
</pre>

<pre>-Tags are used to display preformatted code. With the addition of the class-Parameter we can tell SyntaxHighlighter that here is code to highlight in the given syntax. So once set up correctly, the actual use of it is very easy. However there is a limitation to the <pre>-Tags, you cannot paste angle brackets directly. You must HTML-Escape angle brackets, < becoming &lt; and > becoming &gt;. Otherwise your browser will try to interpret whatever is written between the angle brackets, which obviously wouldn't make any sense, and more important, would not display it in the code fragment.

Well, we are now able to view our first code piece nicely formatted on blogger. When you now hit "Preview" you will be disappointed. In Preview mode blogger doesn't render Syntaxhighlighter. At first I thought it's all broken, but after publishing the post, I found out that it just renders perfectly ;)

And now let's use it in action, and therefore I teaser my next project, my 5th edition of the ground breaking game Pong!

#pragma once
#include "Main.hpp"
#include "Game.hpp"


int main() {
 Game *pangGame = new Game();

 if( pangGame->initAll() ) {
  pangGame->execGame();  
 } else {
  return EXIT_FAILURE;
 }

 delete pangGame;
 return EXIT_SUCCESS;
}

So, as we can see, we don't see much here, other than the main.cpp creating an instance of Game, initializing it, and if successfully initialized, the game will be executed. What the class Game actually does will be posted in the future ;-)

This is how it looks atm:

 

Stay tuned for more, Cheers!

return 0;

 

P.S.: Get your daily dose of atheism http://www.youtube.com/watch?v=NfglcPPaLJk