Adding source code to your blog with Sytax Highlighter 2.0

Well, many readers are emailing me asking a very good question. How do you add source code to your blog? Many of you would have noticed by now that adding code is a pain. Not only is it horribly formatted, but many characters like < and such are interpreted by the browser as html code and this screws up a lot of the formatting for the rest of the post. You end up in a state where you have to type it all over again!

The solution is two fold, first you have to fix the formatting, and next you have to fix the escaping characters like < .

So first lets start with the latter, the dreaded less than sign, commonly written as < . WHOAAA! how did you do that without screwing up your post? Well, its simple, some basic knowledge of HTML tells us that if we want the actual character < , we have to replace every instance of < in our code with &lt. This signals the in built interpreter to view this as a character, not as part of the code. By the way lt stands for Less Than.

Next, the kind of harder part, how do you format it in the boss way that all the code is formatted on my blog? Well, its actually not my work at all, its all thanks to our good friend alex gorbatchev, you coded this wonderful css and javascript tool called SyntaxHighlighter. To use SyntaxHighlighter, download the files from
http://alexgorbatchev.com/wiki/SyntaxHighlighter:Download and once you have them, you upload the necessary files to your website, (blogger doesnt support uploads so you can use google pages which is also free), and then call them in your posts with the edit html tab. Well this is all fine and dandy, haha "dandy" what a corny word, but what if I am too lazy to upload files to a server?

Well, Mr. Gorbatchev has found a solution for that too. He has uploaded the files to his own server, so that we can just call those. So in the end it is quite simple. Here's a step by step process on how to get this set-up and how to use it.

1. Go to Layout and then Edit Html.

2. Now, very carefully, (I suggest that you copy paste the html into a txt file incase you mess it up), add the following lines after the tag "end outer wrapper".

<link href='http://alexgorbatchev.com/pub/sh/2.0.287/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/2.0.287/styles/shThemeMidnight.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.287/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.287/scripts/shBrushCpp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.287/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.287/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.287/scripts/shBrushJava.js' type='text/javascript'/>


<script type='text/javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.ClipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.0.287/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>

Note: You can also add additional languages by adding additional brushes. You have so far added C++, Java, JavaScript and CSS. Read the SyntaxHighlighter page here for more information on different brushes that you may want to add.

3. Save the template.

4. Now in a post, whenever you wish to add source code just type in:

<pre class ="brush:cpp">
//Code goes here
</pre>

You can replace the brush parameter with the type of code you want to type in for example "brush:java". Well, thats it, doesnt that make it so much easier and better looking to add source code to your blog? Thanks for reading and thanks to Mr. Gorbatchev for tearing down the wall, oops, making this possible. ;]