After writing the previous post, an idea provoked me to look for a solution to post code into my blog. Actually, I wanted to give an in-code line by line explanation, instead of just an overview, and that obviously needed pasting the code in the blog post, not just attaching or linking to it as an uploaded file. Most people just use the simple approach of putting code in <pre> </pre> tags, or maybe using div's with stylized classes in the blog's CSS. I wanted more than that. I've seen a lot of blogs post beautiful syntax colored, indented, stylized code into their blogs using stylish blocks implemented using CSS. There is also, ofcourse, a Drupal module which automatically does formatting of any code posting in <code> </code> tags. That's  neat. Now I wanted a solution to be able to easily do just that, without the hassles of doing it using an external tool, or doing the conversion/formatting manually each time. I thought to myself, now, there must be some web 2.0 site which allows you to signup, maintain a collection of code snippets, choose source language (C, C++, Java, XML, etc.) and provide widgets, clippets, RSS feeds of the code or the like, which you can easily paste in your blog using <script> </script> tags. But there obviously wasn't something this exotic.. I was dreaming. Good project idea though, if you're crazy enough :) Since I was primarily targeting to do this on my Sun blog, I thought there must be some roller plugin to do automatic syntax highlighting on the server side identified by code tags in the blog post, but yet again, there wasn't any such innovation available.

Thereafter, I sought the help of the Sun Blogging Community alias, which has always come of help whenever there is any blogs.sun.com related trouble. Here are the many different solutions they gave:

• Using xemacs and htmlize to generate a syntax-highlighted HTML version of your source code. This is something for emacs folk. Its a sophisticated plugin which allows you to convert the emcas fontifications (colours, italics, etc. into HTML. Generation is CSS as well deprecated font tag style is supported. Check out an example posted by Daniel Fuchs for this referencing post.
• Exporting source files from Netbeans as HTML. Sounds like e a lucrative option, only if I knew how.
• Geertjan suggested the use of a very special plugin called the "Special Copy/Paste" plugin. It's a neat little plugin which allows you to copy code in rich text (and then you can paste anywhere, including your blog's rich text editor). Currently only Java, XML, Ruby, CSS, Javascript supported.
• Apparently, there's something for vim users too! There's a code-to-html exporter in gvim. Just type in :TOhtml and it will open up the HTML representation of whatever was in the buffer, in a split window. Again, it gives you the choice between CSS / old style font tags. Very handy in deed.
• And there is a CGI based script to do the job: Code2HTML, converts a program source code to syntax highlighted HTML. It supports a wide set of languages and example output for all of them are shown on the website.
• Last but not the least is my favorite one, my new found love: the SyntaxHighlighter. It is a 100% JavaScript based brilliant project which allows you to show source code on your websites, blog posts or wiki in elegant, adorable, formatted code, with line numbers in a gutter on the left, options to print. It runs at a remarkable speed and the payload is just 13 KB for the core JavaScript library and 2-3 KB's for supporting each language you would want. Setting it up isn't that tough. All it needs doing is embedding the JS and CSS, then posting your code inside of <textarea name="code" class="lang-name:options"> </textarea> (or similarly, <pre> </pre>) tags. You can specify options on a code block basis like whether to display the line number gutter, make the block collapsable, amongst others. Currently it supports these languages: C, C++, C#, CSS, Delphi, Java, JavaScript, PHP, Python, Ruby, Sql, VB, XML, HTML.

SyntaxHighlighter is an amazing project. It gives you compressed javacsript code, so you can use it invariable of which server your blog is running on and requires no scripting support at all, everything neatly done on the client-side, with no compromise in speed, and very little overhead on page download size.

For those of you wanting to install it to your blogs.sun.com blog:

1. Download the latest release of SyntaxHighlighter from its google project homepage (current at 1.5.1)
2. Login to roller at blogs.sun.com
3. Open Create & Edit > File Uploads and upload the following from the SyntaxHighlighter release:
   • Scripts/shCore.js
   • Scripts/clipboard.swf
   • Styles/SyntaxHighlighter.css
   • Scripts/shBrushJava.js, Scripts/shBrushXml.js and the appropriate script for any other language you'd like to see in colors.
4. Open up Design > Templates > weblog, and add the following code at the end of the <head> </head> section:
   

   <!-- Syntax Highlighter Plugin -->
   <script language="javascript" src="/angad/resource/shCore.js"></script>
   <script language="javascript" src="/angad/resource/shBrushCpp.js"></script>
   <script language="javascript" src="/angad/resource/shBrushCss.js"></script>
   <script language="javascript" src="/angad/resource/shBrushJScript.js"></script>
   <script language="javascript" src="/angad/resource/shBrushJava.js"></script>
   <script language="javascript" src="/angad/resource/shBrushPhp.js"></script>
   <script language="javascript" src="/angad/resource/shBrushXml.js"></script>
   <script language="javascript">
   function startHighlighter()
   {
   dp.sh.ClipboardSwf = 'http://blogs.sun.com/angad/resource/clipboard.swf';
   dp.sh.HighlightAll('code');
   }
   </script>
   <link rel="stylesheet" type="text/css" href="/angad/resource/SyntaxHighlighter.css"></link>
   <!-- End Syntax Highlighter Plugin -->
   

   Be sure to change the links from blogs.sun.com/angad to your own blogs' links ;)
5. Add the following just before the end of the body tag:
   

   <script language="javascript">
       startHighlighter()
   </script>

6. Repeate steps 4 and 5 for the permalink template.
   
7. That's it, you're done. Now whenever you want to insert code into a blog post, do so in a <pre name="code" class="java"> </pre> tag. Replace java with whichever language code that is. You can checkout the configurable options here.