Implementing Syntax Highlighter in Blogger

Syntax Highlighter is a simple JavaScript which is used to represent your Code in a more sophisticated manner.I have used this in nearly all my previous posts.In this tutorial I will be implementing Version 2.1.364 of SH. It has the ability to copy Code into the Clipboard and also supports 13 different brushes.

             

Steps to Add it to Blogger:

1.Login to the Blogger account

2.Go to Blogger Dashboard >Design>Edit HTML. First backup your Template (See how to Back it up)

3.Now copy the code from below and paste it just Above/Before </head> tag.

<link href='http://agorbatchev.typepad.com/pub/sh/2_1_364/styles/shCore.css' rel='stylesheet' type='text/css'/> 
<link href='http://agorbatchev.typepad.com/pub/sh/2_1_364/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/> 
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shCore.js' type='text/javascript'/>  
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushXml.js' type='text/javascript'/>
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushBash.js' type='text/javascript'/> 
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushCpp.js' type='text/javascript'/> 
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushCSharp.js' type='text/javascript'/> 
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushCss.js' type='text/javascript'/> 
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushJava.js' type='text/javascript'/> 
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushJScript.js' type='text/javascript'/> 
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushPhp.js' type='text/javascript'/> 
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushPython.js' type='text/javascript'/> 
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushRuby.js' type='text/javascript'/> 
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushSql.js' type='text/javascript'/> 
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushVb.js' type='text/javascript'/> 
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushPerl.js' type='text/javascript'/>

See only the first Three Line of code is necessary ,rest of the code is dependent on which Brush you want to use .For example if you want to use XML Brush then include only XML related file.

4.Now include the following code just Above/Before the </body> tag.

<script language='javascript'> 
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = &#39;http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/clipboard.swf&#39;;
SyntaxHighlighter.all();
</script>

5.Now for applying this to your code just paste the code in between the following code:

<pre class="brush: BRUSH-NAME">

Paste Your Code Here

</pre>

The "BRUSH-NAME" needs to be changed by the Brush you want to use. Like for example if you want to use xml Brush then change "BRUSH-NAME" with xml. All the code should be Escaped (Visit this Page to make your Code Escaped)

Now some extra features : For Highlighting the code see the following code:

<pre class="brush: xml;highlight: [2,4];">
This Line is Highlighted
This Line is not Highlighted
This Line is again Highlighted
</pre>

To Hide the Toolbar

<pre class="brush: xml; toolbar: false;">

If You observe ,there is no Toolbar

</pre>

             

Written by Prayag Verma

Find me on Twitter

Email Newsletter

Like what you read here in this post ?
Get new posts delivered straight to your inbox