Friday, December 19, 2008

How to Integrate SyntaxHighlighter into Blogger

I've been looking for a utility to format source code for this blog. A great open source utility provided by Google is SyntaxHighlighter which is a free syntax highlighter written in Javascript. Since it's 100% Java Script, it doesn't care what you have on your server. It's a great tool for Bloggers. The original instructions that I found on the web that have SyntaxHighlighter library files (js and css files) are not required. All credit goes to yehyeh's blog.

I've modified the instructions so that you can pull the library files from SyntaxHighlighter directly.

Here are the steps to get it work (with my modifications):

1. You'll want to visit SyntaxHighlighter and read up on the overall usage. As of this post I'm currently using SyntaxHighlighter_1.5.1.

2. Login to your Blogger Account, and go to Layout -> Template -> Edit HTML
and make the following changes to your template. (You may want to backup your
template).

You will want to enclose the following code before the end of the tag.









Now when you publish posts in your Blogger, in the 'Edit Html' section
you can now format your code like this using SyntaxHighlighter.
You'll want to read the Google SyntaxHighlighter Wiki for usage details.




No comments:

Post a Comment