How to Install syntaxHighlighter in Blogger

Jeet Sharma

8 years ago

While writing a technology blog the very important need of a programmer is to make his code distinguishable between text and images, and to highlight the syntax of the code, so that it can be easily understood by the viewers and increase the credibility of the code and author.

How to Install syntaxHighlighter in Blogger - Dots Created

syntaxHighlighter by the developer Alex Gorbatchev is a tool available for this purpose and it can be configured for blogger too, so here we will make use of syntaxHighlighter and will implement the code and syntax highlight in a blog post by a step to step procedure.

Install SyntaxHighlighter for Programming Codes in Blogger:

Step-1:

First of all we will install the syntaxHighlighter in the blogger. So, to Install just go to the blogger Dashboard’s Template tab and first take the backup of the template to be on safe side. Here is the post that explains how to take backup, Click Here

now edit the template by hitting the edit HTML button and search in the code, press Ctrl+F, a Search box will appear, type <head> in the search box and press enter, it will take you to the head tag of html code.

Now just paste the given code below the <head> tag in the blogger.

Step-2:

Save the template.
You just installed syntaxHighlighter in your blog.
To use syntax highlighter while writing a blog post just switch to HTML mode and paste your code between pre tags as shown below.

 Your Code Goes here......
Here define the brush class according to your the code you are going to embed, for this example I have selected javascript.

Check out the available brush class list for syntaxHighlighter- 

SyntaxHighlighter Brushes 

choose a class name (original or alias name) and go ahead.

Example:

Code:

<pre class="brush:php"> echo "hello"; </pre>

Output:
echo "hello";


Thank you 🙂