If you maintain a blog related to programming languages, you most definetly provide example code. Adding syntax highlighting to your code makes it more readable and easier to understand. In this post you will learn how to add a code highlighter to your blog on Blogger (blogspot.com).
Here is a list of popular syntax highlighters:
Google Code Prettify - Developed and used by Google Code project. Lightweight, hosted on the Google server and used on this blog.
SyntaxHighlighter - Probably the most popular and feature rich highlighter. Used by Apache, Mozilla, Yahoo!. You can find links to hosted versions.
Highlight.js - Lightweight, themable highlighter.
First, you have to choose library to use. This blog uses lightweight "Google Code Prettify", so I will be using the it in the exmaples below. But the process of adding it to your blog is the same for any other library. Once you made a choice, find a hosted file for that library.
Here is a link to the file from Google Code Project page:
http://google-code-prettify.googlecode.com/svn/loader/run_prettify.js <!-- Also hosts file on secure connection --> https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js
Add highlighter to Blogger
In order to add the hightlighter to your blog, follow this step:
Login to your account
Navigate to: Your blog » Template » Edit HTML
Just before the closing
</body>tag add this code
Click on "Save Template"
Do not forget to backup your template before making any changes.
You have successfully added Google Code Prettify syntax highlighter to your blog. Now in order to highlight your code wrap it into
<pre class="prettyprint">...</pre> or
<code class="prettyprint">...</code> tags.
Here is an example of Code highlighter in use.