Search This Blog

Loading...

Thursday, January 8, 2009

Code Syntax Highlighter on Blogger

If you are a programming blogger and you need to post code on your blog, you will definitely find this code highlighter tool handy. Thanks to Fabio Gomes , now this blog's code snippets have been upgraded with syntax highlights, and it's now more pleasing to the eyes.

Here are the steps to install code syntax highlighter on your Blogger's blog. Basically I ripped the procedures from Fabio Gomes , but with an update so that you don't have to install the Javascript yourself at somewhere. All you have to do is to edit your template and put on the proper tags, include the proper js libraries, and you are ready to go!

Here are the steps in order to install the Python language support, you can easily add other languages by finding the corresponding tag mapping here :

  1. Go to your Blogger template ,  add the following code after the <!-- end outer-wrapper --> tag:


    <link href="http://8296241635750553491-a-1802744773732722657-s-sites.googlegroups.com/site/syntaxhighlightersite/Home/SyntaxHighlighter.css&attredirects=0&auth=ANoY7cpVJlNd7vAn3sSqyL9XdtPsh_q-LmvwjhFIpi50UdV12NY3RpR-pJ20wpDYH9TS8n0cNE65iU8f7pVb_J-QK80oqgeFu9Wiks3c0cAhjrPxnT4UQj0-wxH-ZSLCUHlXhdkmDXI9aLISxEH0o4A0A4_KDfS1BoTyL_KiZyrgNo0OT3zm-1bQ8G2zTes9oClbSKuc_VpeDedb8Nmv6RkHOMonZCQ0H8aSEUxlu8j68ghwEDyVOL0%3D" rel="stylesheet" type="text/css"/>
    <script language="javascript" src="http://syntaxhighlighter.googlecode.com/svn-history/r57/trunk/Scripts/shCore.js"/>
    <script language="javascript" src="http://syntaxhighlighter.googlecode.com/svn-history/r57/trunk/Scripts/shBrushPython.js"/>
    <script language="javascript">
    dp.SyntaxHighlighter.BloggerMode();
    dp.SyntaxHighlighter.HighlightAll('code');
    </script>
  2. Add the tag to surround your code snippet:



    <pre name="code" class="py"></pre>


And it should work, just like below:



As pointed out by Ronald, the previous solution doesn't work because Google code doesn't render css/text properly in Firefox. So I have decided to host the css file elsewhere( and resulted in much lengther url!). The above code snippet has been updated with the latest css hosting. Hopefully Firefox team will fix this problem! 

Note: Code Syntax Highlighter 2.0 is already available. For instruction on how to use it, refer here and here

8 comments:

Ronald said...

Hi, I was working on a similar article ;). You have one flaw in your solution. This will not work for Firefox. The reason is that the css file will not be recognized as a css file. code.google.com present the file as text/plain, but it needs to be text/css. So you still need to host the css somewhere. The JS works fine, but it looks ugly now ;)

Soon Hui said...

Hi Ronald, you are so right, what an embarrassment for me :(

I used Google Chrome, and since it works I thought that it will work for Firefox. Unfortunately it doesn't. Is this a bug for Firefox? Maybe I will like to report it on Bugzilla.

In the mean time, I am going to host the css file on elsewhere. Hopefully this solves all of the problem!

Ronald said...

Hi Soon Hui,

It works fine now. I looked for a solution, for example setting the type for the link to text/css, but it did not work. I'm not sure this is a bug. code.google.com presents a plain text file from the repository, that's correct. Version repositories normally have 2 content types, binary and plain text. Since the file is plain text, it's not per se css. So one could say Firefox is strict but right. However, I'd rather have it working because of the content type we provide.

By the way, if it works in Google Chrome, it does not automatically means it works in Firefox (as you found out ;) ). Different render engines, and different parsers. Firefox uses Gecko, Chrome uses Webkit (known from Safari).

Gerard Davison said...

Note the URL to the css needs to be http://8296241635750553491-a-1802744773732722657-s-sites.googlegroups.com/site/syntaxhighlightersite/Home/SyntaxHighlighter.css

Otherwise bloggspot wont allow you to enter it in the template editor.

Gerard

ekozul said...

nice article, thanks,,

Sudheer said...

http://8296241635750553491-a-1802744773732722657-s-sites.googlegroups.com/site/syntaxhighlightersite/Home/SyntaxHighlighter.css resolved my syntax highlighter issue in firefox.

Thanks.

Anonymous said...

i belive the blogs rss feed is not working

big and tall suit said...

Thanks for the share,can you post some print screen?thanks