How to show codes in Blogger Post

I'm going to show step by step how to display code nicely in blogger posts using SyntaxHighlighter.

Step - 1.

First, we need to add the few lines html code below on the  our blogger template. To Accomplish this task, inside blogger:
  1. Select Template on the left hand side.
  2. Click Edit HTML.
  3. Then copy the code below just before the closing head tag (i.e). You can easily find it by using the search box accessing to it with Control+F.

<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/shThemeEclipse.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/shBrushXml.js' type='text/javascript'/>
<script language='javascript' type='text/javascript'>
    SyntaxHighlighter.config.bloggerMode = true;
    SyntaxHighlighter.all();
</script>

On line 4 (bold text), I'm loading the syntax template for XML code, but there are much more like PHP, Perl, SQL,... you can find the complete list here.

Step - 2:

Now that the blogger template is ready, we need to prepare the code to ensure correct rendering. Basically, we need to HTML escape some characters like right angle brackets, e.g. all < must be replaced with <. To do so, you can use one of the following online tools:
CodeFormatter

Step - 3 :

Once you have the code with escaped characters, you can copy it on your blogger post inside
<pre class="brush:xml;">
...
</pre>

Step - 4:

that's it, here is an example of html code using SyntaxHighlight
 <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/shThemeEclipse.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/shBrushJava.js' type='text/javascript'/>  
 <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>  
 <script language='javascript' type='text/javascript'>  
   SyntaxHighlighter.config.bloggerMode = true;  
   SyntaxHighlighter.all();  
 </script>  

Courtesy by: