How To Add Syntax Highlighter for Blogger/Blogspot

Syntax Highlighter are generally used for blogs, which mainly focus on scripting tutorials. We could have seen in many popular blogs using script highlighter to highlight the script. It not only highlight the script, but also give us a clear idea, how the script was formulated. This javascript can be capable of displaying css, xml, jscript, python, c# and much more supported programing languages. Most of the blogs are using the older version of Syntax Highlighter created by Alexgorbatchev.  So here I am going to teach you, how to install syntax highlighter 2.1 (latest version) on your blogger / blogspot blogs. Before you could get in to the process, I recommend you to back up your template.

Syntax highlighter for blogger

Live demo
Step 1: I made the installation steps more simple to help people implement it without any mess. Navigate to Blogger dashboard > Layout > Edit HTML  and Expand Widget Templates. Search for <head> and replace it with the below code

<head>

<link href='http://sites.google.com/site/bloggermintcom/shCore.css' rel='stylesheet' type='text/css'/>

<link href='http://sites.google.com/site/bloggermintcom/shThemeDefault.css' rel='stylesheet' type='text/css'/>

<script src='http://sites.google.com/site/bloggermintcom/shCore.js' type='text/javascript'/>

<script src='http://sites.google.com/site/bloggermintcom/shBrushCss.js' type='text/javascript'/>

<script src='http://sites.google.com/site/bloggermintcom/shBrushJScript.js' type='text/javascript'/>

<script src='http://sites.google.com/site/bloggermintcom/shBrushXml.js' type='text/javascript'/>

<script type='text/javascript'>

SyntaxHighlighter.all()

</script>

Step 2: Whenever you publish a post with script, include the script within the <pre> section

<pre class=”brush: js”>
Your script here
</pre>

For an example

<pre class="brush: js">
<div id="tweets">
<script type='text/javascript'>
$(function(){
$('#tweets').tweetable({username: 'bloggermint', time: true, limit: 5});
});
</script>
</div>
</pre>

Will display like the below image on your blog post.

syntax highlighter for blogspot

Before adding any script within <pre>, make the script postable on your blogs. In order to do that use Postable by Elliotswan. This makes your script visible more faster on your blog. I tested in all the major web browser and it works perfectly fine.

February 24, 2010. This entry was posted in Blogger, Tutorials and tagged . Bookmark the permalink.

We Recommend HostGator Hosting

Bloggermint strongly recommends Hostgator Hosting for all of your web hosting needs. Sign up today for WordPress Hosting at just $4.95/month.

Use coupon code "bloggermint" to get 25% discount on any hosting packages. Get an account with Hostgator now!