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.
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.
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.
Pingback: Pasang jQuery Syntax pada Post Korang | Firasat Kery
Nice
Just want to say what a great blog you got here!
I’ve been around for quite a lot of time, but finally decided to show my appreciation of your work!
Thumbs up, and keep it going!
nice share, good article, very usefull for me…thanks
Hey I think you have a great blog going here, I found it on Bing and plan on returning regularly for the information that you all are providing.
thanks for your tutorial, I’ve been trying this tutorial and it’s work but I think there is some error occured.
Thanks my friend. This tutorial was so helpful.
.-= Alex Edwards´s last blog ..Welcome! =-.
Thank for tutorial, and script host
Thank you really help me!
.-= Valter Henrique´s last blog ..Show ao vivo com um holograma no Japão- demais! =-.
hi can u add the java brush?, i really need it .
thanks
It doesn’t work on my Blog, when I put the script code, the syntax doesn’t appear.
thanks a lot
Awesome tutorial! I likey
thanks a lot
your tutorial is very helpful to me
Thanks For the Post Franklin!
is there a way to Reduce the External Files?
Because Im Running My Blog on Blogger, and want to Shorten the Http Requests
Thank you very much for the post.
thanks dude …works nicely…keep up the good work…
Thank you for the wonderful tutorial!
Thanks for work effort.
Very useful thanks.
very usefull for me…thanks
HI Franklin I did the above steps in my html page but this didn’t worked for me Here is my html page code :
SyntaxHighlighter.all()
<pre class=”brush: js”>
$(function(){
$(‘#tweets’).tweetable({username: ‘bloggermint’, time: true, limit: 5});
});
Çok teşekkür ederim
Bu yazından ilham alarak bir yazı yazdım http://furkanozden.blogspot.com/2011/10/blogger-syntax-highlighter-eklentisi.html Bu da Türkçe anlatım 
nice share, very usefull for me…thanks
Nice explaining.
great help to solving highlighter
Thanks for the explanation
Hello Franklin,
I have problem about syntax highlighter. i have add it to before few months in my blog and works fine but now it not working. i haven’t change anything in my blog. You can see it from this link. http://ram-magento.blogspot.in/ Please give me solution.
Thanks.
Thanks for Syntax Highlighter i had tried for blogger i does’t find exactly finally i got through your site by my friend thanks for Bloggermint
nice.. but dont you think this will kill the speed ..
Thanks! It worked.. I thought it it available only for WordPress. TFS!