Add Syntax Highlighter into Blogger to display codes

Syntax Highlighter is a widely used code highlighter on websites and blogs, almost every web developer, web designers or any people who want display codes on their pages. In this tutorial you will learn how to add it on your blog on blogger.

Use the PrismJS,a simple and lightweight opensource syntax highlighting plugin
Syntax Highlighter is a tool by Alex Gorbatchev and thanks to him for developing such useful tool. In order to the add the Syntax highlighter scripts and make it work on your blog follow the steps.

Add the scripts

The script files i will be giving links to in the script tag is hosted on the developer's server, if you want to download it to host on your own server then click here to download Syntax Highlighter files.

<!-- SyntaxHighlighter starts -->
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCoreMDUltra.css' rel='stylesheet' type='text/css'/>
 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shLegacy.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushAS3.js' type='text/javascript'/>
 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushColdFusion.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDiff.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushErlang.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushGroovy.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJavaFX.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPowerShell.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushScala.js' type='text/javascript'/>
 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.defaults[&#39;auto-links&#39;] = false;
SyntaxHighlighter.config.clipboardSwf = &#39;http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf&#39;;
SyntaxHighlighter.all();
 
</script>
<!-- SyntaxHighlighter ends -->

Looks very heavy but all you have to with is to add it into your Template.

Add it to your blog's Template

And to do that Go to Blogger Dashboard -> Template -> Edit HTML -> Proceed -> Use CTRL+F to find </body> in the template and paste the codes above </body>

Tip : The codes can differ in your page loading time, if you don't display codes on your homepage then use this script, which is same to above scripts but only added blogger conditional tag around it to load it only on post pages.

<b:if cond='data:blog.pageType == "item"'>
<!-- SyntaxHighlighter starts -->
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCoreMDUltra.css' rel='stylesheet' type='text/css'/>
 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shLegacy.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushAS3.js' type='text/javascript'/>
 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushColdFusion.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDiff.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushErlang.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushGroovy.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJavaFX.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPowerShell.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushScala.js' type='text/javascript'/>
 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.defaults[&#39;auto-links&#39;] = false;
SyntaxHighlighter.config.clipboardSwf = &#39;http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf&#39;;
SyntaxHighlighter.all();
 
</script>
<!-- SyntaxHighlighter ends -->
</b:if>

The adding process is same as the above

Highlighting the codes in posts

Once you have added the code in your template, now you have to make the your code display in the Syntax highlighter and to do that you have to wrap your display codes into <pre> tag with special attributes into it to define what language you are displaying the code in.

Displaying the code if it's HTML

This is an example of how you have to markup the codes if you are display HTML codes.

<pre class='brush:xml'>
// HTML Code here
</pre>

The HTML code is wrapped into <pre> tag and with class='brush:xml' and it's what tells SyntaxHighlighter that it's an HTML code (HTML and XML both looks similar)

Brushes : There are more languages SyntaxHighlighter supports and here's the list of values you can put in the brush value. Following are the brushes you can apply on your codes

as3, bash, csharp, coldfusion, cpp, css, diff, erlang, groovy, jscript, java, javafx, perl, php, plain, powershell, phython, ruby, scala, sql, vb, xml

Add it to your post

Let's say you want to display a HTML code, the whole code with the wrapping <pre> tag will be this

<pre class="brush:xml">
<ul class='make-tea'>
<li>Tea</li>
<li>Water</li>
<li>Sugar</li>
<li>Milk</li>
</ul> 
</pre>

To add it open your Post Editor, switch to the HTML mode and paste the your HTML code between the <pre> tags.

Note : If you paste your display HTML raw, it will interpret itself and then it can't be displayed as HTML, to prevent it you must first convert your raw HTML into escaped characters. Use Quick Escape to convert your HTML to escape characters.
Example -
This is the Raw HTML before conversion

<ul class='maketea'>
<li>Tea</li>
<li>Water</li>
<li>Sugar</li>
<li>Milk</li> 
</ul>

This is the converted HTML codes.

&lt;ul class='maketea'&gt;
&lt;li&gt;Tea&lt;/li&gt;
&lt;li&gt;Water&lt;/li&gt;
&lt;li&gt;Sugar&lt;/li&gt;
&lt;li&gt;Milk&lt;/li&gt; 
&lt;/ul&gt;

Just put the converted Raw HTML code into the <pre> tag and you are ready to paste it into your post, just switch to HTML mode and paste it at the right place.

Customizing the SH skins

You can use different skins and colors for your SyntaxHighlighter, to make changes to the skins you just have to change the 2nd<link> tag in the SyntaxHighlighter scripts HTML. This is the link tag you have currently
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCoreMDUltra.css' rel='stylesheet' type='text/css'/>
You can use any of the following styles, just replace the yellow highlighted text with any style below (each style is separated by a comma).

shThemeRDark, shThemeMidnight, shThemeMDUltra, shThemeFadeToGrey, shThemeEmacs, shThemeEclipse, shThemeDjango, shThemeDefault, shCoreRDark, shCoreMidnight, shCoreMDUltra, shCoreFadeToGrey, shCoreEmacs, shCoreEclipse, shCoreDjango, shCoreDefault

For examply if you want to use shCoreEmacs skin then the href value in link tag will be this
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCoreEmacs.css' rel='stylesheet' type='text/css'/>
Simple as that.. Now choose whatever skin or theme you want and apply it.

Your feedback

I tried my best to keep this tutorial as easy as possible, but if there's something you can't understand or wrong then you can contact me. If you have successfully implemented SH in your blog using this tutorial then you can thank us by dropping your comments.

Subscribe to our blog for more blogger tricks updates.