How to add Syntax Highlighter 3.0.83 in Blogger Template

Generally we see that different blogger are using syntax highlighter for highlighting the code block. That is carry an extra attention to the visitors. So for highlighting the code block in your blog I will share with you ready made code thus you can install syntax highlighter easily.  The latest version of syntax highlighter is 3.0.83. So now we will learn how to apply it in our blogger template. I have hosted the filefor CSS, Java Script, Ruby, Xml, xHtml, xslt, PHP, Java, Plain Text. Please go through the following steps-

Step 1 Log in to your Blogger account and Go to your Blogger Dashboard
Step 2 Now click on -> Template -> Edit HTML-> Proceed  
Step 3 Now Find this code </head> by pressing Ctrl+F
Step 4 Now Paste the below code Before/above </head>

 

<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>

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'></script>

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'></script>

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'></script>

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'></script>

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js' type='text/javascript'></script>

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'></script>

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'></script>

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'></script>

<script language="javascript" type="text/javascript">

            SyntaxHighlighter.config.bloggerMode = true;

            SyntaxHighlighter.all();

</script>

Step 5 Now save your templates.

How To Use?

First you have to make the code HTML escaped that means all < must be replaced with &lt; This will ensure correct rendering. You can also use the Code converter from Here.  For using Syntax Highlighter generally you have to write code between  <pre> and </pre> tags, as well as you have to define a class <pre class=''></pre> and give a brush name as <pre class='brush:js;'></pre>. 

If you want to use Java Script then you have to add js as a brush name.

<pre class='brush:[brushname];'>

<!--Put Your Code Here (must be HTML escaped/Encoded Code)-->

</pre>

Or

<pre class="brush:css, brush:html, brush:js, brush:php, brush:sql, brush:python">ADD THE PARSED CODE HERE</pre>

  And remember put you code in HTML mode instead of Compose mode.