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


<link href='' rel='stylesheet' type='text/css'/>

<link href='' rel='stylesheet' type='text/css'/>

<script src='' type='text/javascript'/>

<script src='' type='text/javascript'/>

<script src='' type='text/javascript'/>

<script src='' type='text/javascript'/>

<script type='text/javascript'>



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

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

For an example

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

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!

30 Responses so far!

  1. Pingback: Pasang jQuery Syntax pada Post Korang | Firasat Kery

  2. 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!

  3. nice share, good article, very usefull for me…thanks

  4. 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.

  5. thanks for your tutorial, I’ve been trying this tutorial and it’s work but I think there is some error occured.

  6. Thanks my friend. This tutorial was so helpful. 😡
    .-= Alex Edwards´s last blog ..Welcome! =-.

  7. Thank for tutorial, and script host

  8. Thank you really help me!
    .-= Valter Henrique´s last blog ..Show ao vivo com um holograma no Japão- demais! =-.

  9. hi can u add the java brush?, i really need it .

  10. It doesn’t work on my Blog, when I put the script code, the syntax doesn’t appear.

  11. thanks a lot

  12. Awesome tutorial! I likey

  13. thanks a lot
    your tutorial is very helpful to me

  14. 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

  15. Thank you very much for the post.

  16. thanks dude …works nicely…keep up the good work…

  17. Thank you for the wonderful tutorial!

  18. Thanks for work effort.

  19. Zachary coldrick

    Very useful thanks.

  20. HI Franklin I did the above steps in my html page but this didn’t worked for me Here is my html page code :


    <pre class=”brush: js”>

    $(‘#tweets’).tweetable({username: ‘bloggermint’, time: true, limit: 5});

  21. Çok teşekkür ederim :) Bu yazından ilham alarak bir yazı yazdım Bu da Türkçe anlatım :)

  22. nice share, very usefull for me…thanks 😉

  23. Nice explaining.
    great help to solving highlighter

  24. Thanks for the explanation :)

  25. 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. Please give me solution.


  26. 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 :)

  27. nice.. but dont you think this will kill the speed ..

  28. Thanks! It worked.. I thought it it available only for WordPress. TFS!

Leave a Reply

Your email address will not be published. Required fields are marked *