How to install SyntaxHighlighter in Blogs

When publishing blogger posts/articles which contains text, image, audio and videos in it. but when you're a developer and wants to share your technical code snippets over your blog post with proper color highlighting and according language specific syntax, then unfortunately blogger doesn't really support. So we need to relay on third party tools to fulfill this need. Among many of Code/Syntax Highlighting tools over web, I was attracted to Syntax Highlighter tool by Alex Gorbatchev. Its pretty proven and widely used Syntax Highlighter on websites and over blogs. The big advantage of this tool is that it is built/written on pure Java Script and it can be easily integrated into your blogs.

Syntax Highlighter features:

• 100% client side, no server dependency
• Multiple languages support
• Easy to use and deploy, just copy files and link them in your templates
• Wide browser support
• Very lightweight, compressed core library is 11kb plus whatever brushes you need

In this tutorial you will learn how to add syntax highlighter on your blog on Google blogger. In order to the add the Syntax highlighter scripts and make it work on your blog follow the steps.

1. First, take backup of your current blogger template or try with sample template.

2. Navigate to Edit HTML mode. 

3. Copy syntax highlighter css code from below location

"http://syntaxhighlighter.googlecode.com/svn/trunk/Styles/SyntaxHighlighter.css"

4. Copy and Paste the code above </b:skin>

5. Copy paste the below given code before </head> tag in your template

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

NOTE: Here, You don't need all that brushes , just keep what you really need.

6. Copy Paste the below given code before tag.

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

7. Now click the save button to save all the changes you have made to your blogger template.

8. Now lets proceed, how to use it in your posts:

How to write source codes in pre-tag?, well, you need to do is just invoke the classes in pre tag.

For example, you might wants to java code, you should do this:

Some examples of codes in my Blog:

1. http://guruhowtodo.blogspot.in/2015/03/how-to-create-letterpress-text-effect.html

Examples:

Below is a comparison of a snippet of java code with standard and syntax highlighting :

Standard rendering 

/*

Java Hello World example.

*/

public class HelloJava

{

 public static void main(String args[])

{

   /*

    Use System.out.println() to print on console.

    */

    System.out.println("Welcome to Java!");

  }

}

Syntax highlighting

public class HelloJava
{
public static void main(String args[])
{
/*
Use System.out.println() to print on console.
*/
System.out.println("Welcome to Java!");
}
}

For more usage, demo and more information, Visit: http://alexgorbatchev.com/wiki/SyntaxHighlighter

Conclusion

So, this was all about How to install SyntaxHighlighter in Blogs. If you have any type of queries regarding this tutorial please feel free do let us know, We will try our best to resolve them. If you like this tutorial and find this useful and meaningful then please don’t forget to share this with your friends and social media too.