Thursday, August 09, 2007

Using SyntaxHighlighter on BLOGGER

It can insert colored code snippets on a web page using client-side javascript only. It is ideal tool for users of BLOGGER because we do not have server side resource to parse and highlight the code. And we are lazy, we do not want to write a lot of CSS to just post a code snippet. :-).

However it takes a little twisting to make it work properly.

Below are the steps to setup:1. Download and find a place to host the library files for SyntaxHighlighter. A free choice is, of course, Google Page Creator;2. Login to BLOGGER, go to: "Settings > Template > Edit HTML", make the following changes (credit goes to yehyeh's blog):

3. Now you can post code snippet on BLOGGER using either "pre" or "textarea" tag.

Notice:

The solution above is found here: http://yehhou.blogspot.com/2007/06/blogger-dpsyntaxhighlighter.html. That blog was written in Chinese. I made some minor changes and posted here. The reason for the Javascript code to remove <br/> tags is because BLOGGER has a setting to automatically add <br/> where there is line break. It is very convenient feature for blog posters, but somehow syntax highlighter will display the <br/> tag in plain text;

Clipboard for the SyntaxHighlither does not work well here. It tends to give you the text without line breaks, so I commented out the Javascript that setup the clipboard function;

When posting HTML code, remember to replace < with &lt;, and replace > with &gt;;

New accounts for googlepages are no longer allowed. And Google sites doesn't allow to host .js files. I was wondering if you would be able to host shBrushPerl.js as well? Until it is added to the SyntaxHighlighter.

See here for more info - http://code.google.com/p/syntaxhighlighter/issues/detail?id=113#c0

The steps are a lot easier now. No need for a host because you can just use Google Code. And very little JavaScript on the page. I posted the instructions at http://tech.element77.com/2008/11/syntax-highlighting-code-in-blog-posts.html

The code provided here to replace <br /> tags are really great. I have done a simple hack and trying to make it better and simpler, your code will help me to do better. Thanks. I will let you know, when I completes it.