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

Post a Comment

Thanks for doing this tutorial. I've been having hard time in pasting codes on my blogger posts especially when I create posts about tutorials. Bu I got one solution also. Parse the code at BlogCrowds.

Thank you, this tutorial was just what was needed, most were missing key tips and it wasn't working for me correctly.

How do you get the print button at the top though? For some reason it is not appearing on mine.

You are using the latest Syntax Highlighter ,it doesn't have these buttons. Just replace the scripts with the scripts provided in this tutorial.

why is not working anymore?

Blogger Proo Indonesia

The place where the scripts are hosted (Amazon S3) has gone down . Most probably it will be up and running in the next few days. If it doesn't work then I will change the links

Anonymous said...

The first four links are broken. Please, fix them!!

The links have been fixed

Anonymous said...

works like charm .
thank you
tushar

Asim Ali said...

Thanks Brother