How to setup syntax highlighter on blogger

We are going to use SyntaxHighlighter to highlight codes.
It's quite simple and easy but if you want to use the 'Dynamic Views' Template on Blogger, then you need a simple trick.


1. First, back up your current template.
    If something goes wrong, you can restore the original template anytime.

2. Open your template in 'Edit HTML' mode.

3. Copy and paste the following code right before </head>  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/shBrushXml.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/shBrushCSharp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDelphi.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/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'/>

4. If you are NOT using 'Dynamic Views' template,
    then copy and paste the following code just before </body> tag.

<script language='javascript'>
    SyntaxHighlighter.config.bloggerMode = true;
    SyntaxHighlighter.all();
</script>

5. Save template.


6. Now you are ready to use SyntaxHighlighter with <pre></pre> tag.
    Escape '<' and '>' to '&lt;' and '&gt;' in your code to highlight.
    Change class name depending on the code between pre tags.
    For html, xml, xhtml, xslt, <pre class='brush: html'>.
    For c# <pre class='brush: csharp'>.
    You can find more here.

<pre class="brush: html">
    &lt;div&gt;html div tag&lt;/div&gt;
</pre>

<pre class="brush: csharp">
    function void csharpFunction()
    {
        return;
    }
</pre>

7. If you are using 'Dynamic Views' template, copy and paste the following code at the bottom of every page in 'HTML' edit mode.

<script type="text/javascript">
$(document).ready(function () {
    $("pre").each(function () {
        SyntaxHighlighter.highlight(undefined, this);
    });
});
</script>