How to format source code for blogger with SyntaxHighlighter by Alex Gorbatchev

Why Should one format code on their blogs?

Your code in the blog can go from loking like this.....

 public class Test {

    /** Prints "Hello World!" onto the consle */
    public static void main(String[] args) {
      
        String helloWorld = "Hello World!";
      
        System.out.println(helloWorld);
    }

}

TO This.....

public class Test {

 /** Prints "Hello World!" onto the consle */
 public static void main(String[] args) {
  
  String helloWorld = "Hello World!";
  
  System.out.println(helloWorld);
 }

}

Ain't that a looker!!!
All credit goes to Alex Gorbatchev who created the CSS styles for us to use.This is the best formatter out there!
Lets go step by step into integrating this into our blog in blogger:

1. Click on the Edit HTML  in the Templates section of the dashboard

2. Click on Proceed.

3. Search for </head> tag.

 

 4. Copy and paste the following text just above the tag

 

<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 src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'/>
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>

5.  Click on Preview to check that your blog is not screwed up and save the template.

6. Using the CSS to format your code: 

The code that needs to be formatted must be enclosed within the <pre> tag. If you are formatting java code then :

<pre class="brush:java">
  Awesome java code goes here....
</pre>

Similarly styles for css --> "brush:css", for php --> "brush:php", for html --> "brush:html".
There's one catch though, when you are using "brush:html" blogger might show an error that there's an error with the HTML.In that case go use HTML Escape Tool to convert your HTML code into an escaped format and use this escaped format in between the <pre> tags.
Hope you liked my article. If you did, some comments below will make my day!