HOW TO 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 --> Design --> Edit HTML
• Backup your Template before making any changes to your blog
• Now  Expand Widget Templates
• Press Ctrl + F and search the code

</head>

• Now generate the code from Widget Generator shown below and paste itBefore/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