Syntax highlighter is a tool that is used to display codes( CSS,HTML,PHP,JavaScript and other codes) in blogs.

If you will ask me – is it a good tool to display codes or not then I will probably say ‘NO’ as it is the Best tool to display codes in your blog.And if you are a developer then this tool is a must for you ,it will help you in representing the code more effectively.

integrate syntax highlighter in blogger

Putting syntax highlighter in your blog is not a big task but sometimes it actually don’t work for you and you don’t know what’s wrong with the code,is it the code that is wrong or your template is not supporting syntax highlighter….or you actually don’t know how to put the syntax highlighter in blog or how you can use syntax highlighter to display codes in blogger.

Well then this post is exclusively for you, in this post will we discuss all the things that you must do in order to get syntax highlighter working for you..

By using syntax highlighter you make the code look beautiful <3 and it also improves the appearance of the code. Thus will not only help your readers to get better understanding of the code but also make it more presentable to your readers.It also provides 9 very cool CSS themes ,so you can display code according to your blog theme.So lets Get started to integrate syntax highlighter in your Blog in less then 5 mins..

Step 1:

Login to your blogger account and backup your existing template so that you won’t loose anything important and then navigate to templates>>>Edit Html


Step 2:

Click anywhere in the html code and find ]]></b:skin> in your template (You can find it by pressing CTRL+F of your keyboard and then pasting the code in the box and pressing enter).Paste the below CSS just before ]]></b:skin> tag.

Step 3:

Paste the below code before </head> tag.

Step 4:

Now paste the following code before  </body> tag.

Step 5:

You are Done! Save your blogger tempalte.

Step 6:

Now Syntax highlighter can be used with <pre></pre> tag

Use syntax highlighter as:

<pre class=”html” name=”code” >




You can change the class according to you code,for instance if you are going to represent html code then use:
<pre class=”html” name=”code” >
and if you are using css code then use:
<pre class=”css” name=”code” >

list of supported languages
list of supported languages in Syntax highlighter
Subscribe For more Updates
Don’t forget to subscribe for free update in your inbox and if you have any queries or doubts then feel free to comment below or contact us..!!


  1. This website was… how do you say it? Relevant!!
    Finally I have found something which helped me.