How to set a syntax or code highlighter to blogger sites.

If you want to start a blog, blogger.com is the best free blogging platform. Because blog spot gives you the chance to start a blog. This is a great opportunity for bloggers. The main advantages of blogger.com is it’s template fully is under customization. You can arrange this with your own if you have some coding knowledge.We who are working on web-design and development or on programming and writing tutorial on programming or coding feel the necessity of syntax highlighter. Because without it, it is very much difficult for them to separate Coding and Writing. If you search in Google writing Syntax highlighter, you will find a huge number of results. Then you will be confused which one is correct and fit for your blog. Because you will find many syntax highlighters which do not work in your blog. Dear friends today I will tell you about a highlighter which is very much effective and beautiful to look at. It's name is Syntax Highlighter. This code highlighter is created by Alex Gorbatchev a famous software engineer. Especially this highlighter is fit for blogger site. So we who have a blog on blogger site, can try this. 

How to set this Syntax Highlighter in your blog 

 To set this highlighter in your blog is easy. At first go to your blogger site. Go to Dash Board  Signing in with your G-mail address and  password. You will see a Template option in your blogger Dash Board at the right. Click on it.

You will see the following window. Now backup your whole template in your computer. So that you can use it later, if any kind of wrong coding occurs. See the method bellow.

Image-1

Image-2

Image-3

After taking backup of your template, Click on Edit HTML. You will then see a html page.

Now click Edit template and click into page. Press Ctrl+F to search or find out Tags. You will find a small box at the right corner of the text page. Write </head>(End tag) in the box and hit Enter key. You can find out the easily with it. Now copy the following code ( select the whole code and press Ctrl+C to copy these).

<link href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css" rel="stylesheet" type="text/css"></link>
<link href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeEclipse.css" rel="stylesheet" type="text/css"></link>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushAS3.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushColdFusion.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.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/shBrushDelphi.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDiff.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushErlang.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushGroovy.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/shBrushJavaFX.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.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/shBrushPowerShell.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/shBrushScala.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.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>

Paste code just before the </head> tag. Now click on Save Template  button at the right.

Now Done!! your Syntax highlighter is ready. To check your syntax highlighter, go to New post option and write some code using the techniques

Go to HTML option and follow the techniques stated bellow.

Using Syntax Highlighter
When you will copy some code in your post page please copy them between the following tag.

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

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

</pre>