Add Syntax Highlighter(v3) to Blogger Blog

Syntax Highlighter version 3 is a best tool to show your 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.

Syntax Highlighter Demo

Live Demo

How To Add Syntax Highlighter To Blogger Blog

• Go to Blogger Dashboard 
• Click on DropDown Menu and select Template
• Backup your Template before making any changes to your blog
• Now Click on Edit HTML --> Proceed --> Expand Widget Templates
• Press Ctrl + F and search the code shown below

</head>

• Now generate the code from Widget Generator shown below and paste it Before/above </head>

Widget Generator

How To Use Syntax Highlighter Into Blogger Posts

While creating a post go to Edit HTML section and Put your Script or Code inside the PRE tags and define class with brush name as shown below

<pre class='brush:brushname;'>

ADD PARSED CODE HERE

</pre>

• Replace brushname with brushname which you want to use to highlight the code
• Replace ADD PARSED CODE HERE with the encoded code,
• You can use our HTML Encoder Tool to encode the codes

EXAMPLES

• If you want to highlight CSS code then use the code below

<pre class='brush:css;'>

ADD PARSED CODE HERE

</pre>

• If you want to highlight Java script code then use the code below

<pre class='brush:js;'>

ADD PARSED CODE HERE

</pre>

• If you want to highlight HTML code then use the code below

<pre class='brush:html;'>

ADD PARSED CODE HERE

</pre>

How to highlight the specific lines

• If you want to highlight only one line then use the code shown below

<pre class='brush:brushname;highlight: [2]'>

ADD PARSED CODE HERE

</pre>

This code will highlight the second line

• If you want to highlight multiple lines then use the code shown below

<pre class='brush:brushname;highlight: [2,5,7]'>

ADD PARSED CODE HERE

</pre>

This code will highlight 2nd ,5th and 7th lines

Like it? Share it.