Sunday, April 20, 2014

How to add syntax highlighter to blogger


Syntax Highlighter is a utility used to highlight the code from rest of the content in a web page so that the code readability is enhanced.In this blogpost we are going to add syntax highlighter to blogger.

SyntaxHighlighter by Alex Gorbatche is one of the most popular syntax highlighter available.
It is developed in javascript and can be easily installed in the blogger blogs.
It is used by Apache, Aptana, Wordpress, Smashing Magazine and others.
It supports almost all the major languages used.

It is highly modular in architecture and there are different javascript files for highlighting different languages code.For example for highlighting javascript code you need to include shBrushJScript.js
The javascript files used for different languages is know by alias of shBrush or Brush files.

There are two flavors of this plugin.

1. In the first flavor all the brushes you need will be loaded at once whether you are going to utilize it in that page or not.
2. In the second flavor the brushes that are actually needed will be only loaded.This is lazy loading of the brushes files.

Setup

For both the flavor we need to include the shCore.min.css, any theme css  and shCore.min.js

 
<link href='//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shCore.min.css' rel='stylesheet' type='text/css'/>

<!-- Default Theme -->

<link href='//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shThemeDefault.min.css

' rel='stylesheet' type='text/css'/> 

<script src='//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shCore.min.js' type='text/javascript'/>

Before continuing further go to your blog dashboard, click on the template, then edit HTML and go to the </body> tag in the template.
All the code mentioned in the below flavors need to be pasted just above the </body> tag of your template

1. First Flavor

In the first flavor we need to include individually the brushes that we required. If we want to highlight javascript code we include shBrushJScript.min.js
 
<script src='//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushJScript.min.js' type='text/javascript'/>
For highlighting HTML / XML  we need to include shBrushXml.min.js
 
<script src='//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushXml.min.js

' type='text/javascript'/>
 Then we need to start the plugin
 
<script type="text/javascript">

     SyntaxHighlighter.all()

</script>

Overall Code

<!-- Core css -->

<link href='//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shCore.min.css' rel='stylesheet' type='text/css'/>

<!-- Default Theme -->

<link href='//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shThemeDefault.min.css

' rel='stylesheet' type='text/css'/> 

<!-- Core javascript-->

<script src='//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shCore.min.js' type='text/javascript'/>

<!-- Javascript brush-->

<script src='//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushJScript.min.js' type='text/javascript'/>

<!-- HTML brush-->

<script src='//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushXml.min.js

' type='text/javascript'/>

<!-- Start the syntax highlighter-->

<script type="text/javascript">

     SyntaxHighlighter.all()

</script>


2. Second Flavor

In the second approach we will include an Autoloader script. In that script we will tell which brushes we are going to use and where that brushes javascript files are located. This autoloader will only load those brushes files that are being actually used in the page rather than loading all the brushes.
 
<script src='//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shAutoloader.min.js' type='text/javascript'/>
We start the plugin by using below javascript
 
<script type='text/javascript'>

      SyntaxHighlighter.autoloader(

        &#39;javascript  //cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushJScript.min.js&#39;,

        &#39;html            //cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushXml.min.js&#39;

      );

      

      SyntaxHighlighter.all();

      </script>

Overall Code

<!-- Core css -->

<link href='//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shCore.min.css' rel='stylesheet' type='text/css'/>

<!-- Default Theme -->

<link href='//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shThemeDefault.min.css

' rel='stylesheet' type='text/css'/> 

<!-- Core javascript-->

<script src='//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shCore.min.js' type='text/javascript'/>

<!-- Autoloader javascript-->

<script src='//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shAutoloader.min.js' type='text/javascript'/>

<!-- Start the autoloader script and syntax highlighter -->

<script type='text/javascript'>

      SyntaxHighlighter.autoloader(

        &#39;js jscript javascript  //cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushJScript.min.js&#39;,

        &#39;xml html            //cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushXml.min.js&#39;

      );

      

      SyntaxHighlighter.all();

      </script>


Usage

Now wrap the code that you wanted to highlight within <pre class="brush: javascript"></pre> like
 
<pre class="brush: javascript">

function Employee(){

    this.getName = function(){

            console.log("Calling getName of Employee class");

    };

};

</pre>


Themes

There are various themes present for the syntax highlighter.We just need to replace it with the default theme css in our code Some of them are

Default    (shThemeDefault.css)

<link href='//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shThemeDjango.min.css' rel='stylesheet' type='text/css'/> 


Django    (shThemeDjango.css)
 
<link href='//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shThemeDjango.min.css' rel='stylesheet' type='text/css'/> 

Eclipse    (shThemeEclipse.css)


<link href='//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shThemeEclipse.min.css' rel='stylesheet' type='text/css'/> 


Emacs    (shThemeEmacs.css)

<link href='//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shThemeEmacs.min.css' rel='stylesheet' type='text/css'/> 


Fade To Grey    (shThemeFadeToGrey.css)

<link href='//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shThemeFadeToGrey.min.css' rel='stylesheet' type='text/css'/> 


Midnight    (shThemeMidnight.css)

<link href='//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shThemeMidnight.min.css' rel='stylesheet' type='text/css'/> 


RDark    (shThemeRDark.css)

<link href='//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shThemeRDark.min.css' rel='stylesheet' type='text/css'/>


All the files used for this syntax highlighter is hosted on cdnjs (public cdn for javascript) To find more brushes and themes browse https://cdnjs.com/libraries/syntaxhighlighter Special thanks to SyntaxHighlighter creator

Alex Gorbatchev for this very useful plugin.

Kindly share your feedback in the comments section

1 comment: