Adding a Syntax Highlighter to your Blogger blog

Syntax or code highlighting is important particularly when you need to show code examples on your blog. It is always a big task to read codes on a blog or a website without syntax highlighting, though they are enclosed with code tags. By integrating the syntax highlighter on a blog or a website, readers can read the code examples easier. There are so many free syntax highlighting scripts available on many websites. Most of the scripts are written in JavaScript, though some of them are powered by other programming languages such as Phyton or Ruby. I believe "SyntaxHighlighter by Alex Gorbatchev" is the most common syntax highlighting script used by most of us. It supports a lot of different languages and you can easily create new "brush" for your language if it is not supported by default. Adding Syntax Highlighter to your blog First you need to backup your blogger template. In your blogger dashboard, click on 'Design' > 'Edit HTML' and then click on 'download full template' and save your template.

1. Go to Blogger Dashboard > Design > Edit HTML.
2. Press CTRL+F to find the code
3. Copy the below code

4. Paste it on top of </head> this code.
5. Preview your template and if everything works fine, then save it.

Make the script work

You have just added the script to your blog. If you want to highlight code in your post, then you need to use a tag in order to make your Syntax Highlighter work properly. There are two tags and you can use any one on your blog.

1. <pre> tag
2. <script> tag

<pre> tag

When writing a new post, you need to use <pre> tag in the post.The code of your post needs to go in between <pre class="brush:html"> and </pre> tags, in order to highlight your code properly. See the screenshot below.

 






If you are posting HTML code, then you have to use 'html' brush in the <pre> tag.

Your 'HTML' code goes here

Similarly, for CSS code use 'css' brush in the

 tag. Here is a list of brushes you can use for your blog post.


Your 'CSS' code goes here

Note for Bloggers There is a small issue with <pre> tag. When you post HTML code in blogger post between
<pre class="brush:html"> and </pre> tags directly, you might get an error like this.
To get rid of this error, You have to convert raw HTML to escape characters.

• Go to Quick Escape.
• Paste your HTML code into the text box and click on "Convert to escaped characters →" button.
• After conversion, you can use the converted HTML code in between
  <pre class="brush: html"> and </pre> tags.
• Now, HTML code will render correctly on your blog.

<script> tag
This is almost same as <pre> tag, but the code of your post needs to go in between <script type="syntaxhighlighter" class="brush:html"><![CDATA[ and ]]></script> tags.
If you use <script> tag, then you don't have to convert HTML to escape characters. But I suggest you to use <pre> tag.

Themes for your Syntax Highlighter
 
Syntax Highlighter 2.0 introduced custom CSS themes. This means that by switching out just one CSS file you can completely change the look and feel of the highlighted syntax. A small number of popular color themes are included with Syntax Highlighter and you can easily make your own. Just click the css theme below to see how it looks...

• shThemeDefault.css

• shThemeDjango.css

• shThemeEclipse.css

• shThemeEmacs.css

• shThemeFadeToGrey.css

• shThemeMidnight.css

• shThemeRDark.css