10 June 2013

How to Add Syntax Highlighter in Blogger Blog

How to Add Syntax Highlighter in Blogger Blog
Syntax Highlighter
Syntax Highlighter is a very useful for the bloggers who uses codes such as java, python, ruby, html, css, java scripts etc. It also gives a professional feel to the readers. It is needless that almost every professional blogger who needs to show some coding work uses Syntax Highlighter. There are tons of tutorials on the web for setting up of Syntax Highlighter, but I can assure you that you will not find easier than this tutorial.




So give it a try if you want to, but before that:-


Step-wise Tutorial on How to Add Syntax Highlighter in Blogger Blog

 Step 1 : Go to Blogger Dashboard

 Step 2 : Click on Template

Step 3 : Click on Edit HTML

Step 4 : Now press Ctrl + F and find </head>, Paste the following code before </head> tag.

<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCpp.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCSharp.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushDelphi.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJava.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPhp.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPython.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushRuby.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushSql.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushVb.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js' type='text/javascript'></script>

Step 5 : Now press Ctrl + F and find </body> and paste the following code before </body> tag.

<script language='javascript'>
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script>

Step 6 : Now click on Save Template

 Step 7 : Copy the all CSS given in this link

 Step 8 : Now go to Template >> Click on Customize >> Click on Advanced >>
Now scroll down and click on Add CSS >> Now paste the code into the box

 Step 9 : Click on Apply to Blog

You can start using Syntax Highlighting, just use it with <pre></pre> tag.



<pre name="code" class="css">

 ---your code goes here---

</pre>

Example:


<pre name="code" class="css">

background: none;
border: none;
padding: 0;
margin: 0;

</pre>



Note 1 : You should escape your code before using Quick Escape Tool

Note 2 : List of supported language and their alises for <class> attribute.

I hope you will easily set up the Syntax Highlighter in your Blogger Blog. If you still get stuck at any point of time, feel free to contact me.

 Happy Blogging!!!


Labels :