How To Add Syntax Highlighter v3 in Blogger Blogspot

Stylizing your blog or website is extremely beneficial and has massive significance as it not only attract users but also looks neat and clean, mostly blogger and webmaster spends tons of bucks in stylizing and customizing their blog’s design which is indeed an upright move. When blogger provides codes in their blog they usually provide in the normal way, normal text writing that we usually do, “code is not text” we need to stylize it and also make it more prominent different from our plain text. To resolve the issues, we have introduced a Syntax Highlighter which is exceedingly popular in WordPress but now you have the luxury of using this splendid tool in Blogger BlogSpot blog.

If you want to Preview the Syntax Highlighter Go ahead and see the live demo

What is Syntax highlighter

Syntax highlighter is a brilliant tool to show CSS, Html, JavaScript, SQL and many other languages code in your post body. It arranges your coding in lines which makes it look more prominent. You will even get the choice to select from multiple themes, which will add more color to your blog and make it look worthwhile.

How To Add Syntax Highlighter To Blogger BlogSpot Blog?

Adding syntax highlighter to a blogger is an enjoyable and uncomplicated procedure. We have created an exceptional Syntax Highlighter tool for your convenience so if you follow the following steps sensibly I am certain you will be able to get it right, now let’s look at the tool which we will use in this tutorial.


Select a Theme

Select Brushes

Copyright © 2012 All Rights Reserved At
  • Step#1: First select the theme from our Syntax highlighter Tool, to pick your favorite theme more easily according to your personality check the demo Here
  • Step#2: Now we need to choose the Brushes according to our needs, if you are a blogger then you might go with CSS and HTML, but this tool is not limited to bloggers even webmasters and programmers can make use of this tool. So just select CSS, HTML, or whatever you like and then hit the button which says “Generate code”.
  • Step#3: Now copy all the code which is generated in the text area and then move to next step.
  • Step#4: Now go to Blogger >> Template>> Edit HTML>> Proceed
  • Step#5: Then within the template Search for </head>
  • Step#6: Now when you find the </head> ending tag, just above it paste the code which you copied previously from the Syntax Highlighter Tool.
Congratulations! Syntax highlighter is now fully integrated in your blogger BlogSpot Blog. And now you can use Syntax highlighter with command.

Insert HTML/CSS/JavaScript Code in Your Posts Using SyntaxHighlighter:

Now if you want to insert CSS coding in your template then Go to >> Post >> Add New Post >> Select Edit HTML Tab and paste the following code.

For CSS (Style Sheet)
<pre class="brush:css;">ADD-THE-CSS-CODE-HERE </pre>

For HTML Coding:
<pre class="brush:html;">ADD-THE-HTML-CODE-HERE </pre>

For JavaScript Coding:
<pre class="brush:javascript;">ADD-THE-JavaScript-CODE HERE </pre>

Replace ADD-THE-HTML-CODE-HERE with your CSS style sheet coding. 
Don’t forget to replace ADD-THE-HTML-CODE-HERE with your HTML. 
Replace ADD-THE-JavaScript-CODE HERE with your JavaScript coding.

If you have not integrated the Syntax highlighter correctly using our tool, then the possibilities are extremely high that you might notice a pop out which will indicate that something is going wrong. For Example, you are using <pre class='brush:css;'></pre> in your blog post but you have not included the CSS Syntax highlighter scripts in your header then you will see the following error.

From the Editors Desk:

So we hope you have enjoyed the treat and make sure you use it with command till then peace, blessings and happy learning. 

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).

Comment With:
Choose Wisely!


July 31, 2012 at 1:02 PM

I am thinking to add this, But I think that the default one is better.

Ahmed Safwan

Editorial Team MOD
July 31, 2012 at 2:08 PM

In Blogger we don't have any built-in syntax highlighter, so we decided to provide a quality syntax highlighter which is most recent one version 3.

MyBloggerLab Team

July 31, 2012 at 8:20 PM

Pass I am tired of editing HTML

July 31, 2012 at 10:13 PM

Insert HTML/CSS/JavaScript Cod in Your Posts Using SyntaxHighlighter:
"e" is missing from code :P
btw nice post :)

December 17, 2012 at 4:32 AM

nice tutorial
keep sharing things like that

February 4, 2013 at 1:29 AM

syntax highlighter for Javascript is not working on my blog. it include all my rest text as code. please see a look on

and please solve this prob ..

February 28, 2013 at 1:49 AM

Doesn't work, i think the idea is right but a problem occur with the generator. Check it out...

February 28, 2013 at 2:28 AM

Generator Works Fine!

July 3, 2013 at 9:26 PM

Works Great
Thank you :)

July 5, 2013 at 3:22 AM

Thank bro. You have created great tool!

May 1, 2014 at 4:36 PM

Awesome! After various unsuccessful atempts with the old SyntaxHighlighter I found this one, infinitely easier to set up and nicer. Thanks, man! You saved my life!

March 3, 2015 at 9:28 AM

Awesome method to put code in blogger

April 22, 2015 at 7:27 AM

Thanks. This solved what i wanted to acheive.

Post a Comment

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

Helping You to do Cool Things With Blogger Since 2012™.

© Copyright 2012 - 2018. MBL Networks, All Rights are Strictly Reserved.