Friday, June 27, 2008

Code Highlighting in Blogger

Don't you just love syntax highlighting that we've become so used to these days? Be it the venerable emacs editor or the new and upcoming Notepad++es, we love our syntax highlighting editors. But the codes on our sites still do suffer this problem of being black and white. I solved this problem for our college's hfoss wiki by installing the GeSHi CodeTag Extension for mediawiki but while looking at my own posts in here, it seems the idea needs to be extended to blogger. It really looks too ugly to my used-to-pretty-IDE eyes.
In my quest to look for a solution, I hit this blog
Which had two ideas. First one, to use vim's TOhtml. But being lazy to modify all my files over and over again, I decided to forego it. I copied the prettfy.js and prettify.css files to my server and followed the instructions at
The effects were, well, wierd. Apart from rather slow loading times that javascript induces, my code looked horrible with
s after every line. Totally horrible and waste of space. I looked at the code and zeroed in on line 834 where I found this regular expression:

833 var htmlChunk = PR_textToHtml(
834 tabExpander(sourceText.substring(outputIdx, sourceIdx)))
835 .replace(/(\r\n?|\n| ) /g, '$1 ')
836 .replace(/\r\n|\n/g, '

After playing around with this, breaking it and everything, I realized I'm not really helping anyone here. Apart from the fact that not everyone uses javascript by default, including me (thanks to noScript) and even I use some unconventional browsers from time to time just for kicks like w3m, elinks, lynx (Ahh, those good old days, when they were my only browsers). So, I went for the vim solution.

Now, the next frontier: Posting to blogger automagically from vim/emacs whichever is easier to automate from. (Yeah I know there's something for emacs to do this) but with this functionality right there for recognizing the code and htmlifying it.

I think I've had too much coffee tonight. I just realized, "Why am I posting this at 2AM when I have some nice programming to do?" Anyways, back to my programming. Hope this post helps someone. Or, if you know some tool for doing these things automatically, tell me so that I can save some time (or even some google time if that's what you wanted to say :).


Joey said...


i've resorted to copy and pasting into

i've also included the css styles in the header of my blog.

and then i paste the resulting code from into my post.

Anonymous said...

Who knows where to download XRumer 5.0 Palladium?
Help, please. All recommend this program to effectively advertise on the Internet, this is the best program!

123 123 said...

Great article as for me. I'd like to read a bit more concerning this topic.
BTW look at the design I've made myself London escort

Anonymous said...

thanks for sharing this site. there are various kinds of ebooks available from here

Anonymous said...

Interesting article you got here. I'd like to read a bit more about that matter. The only thing it would also be great to see here is some photos of some gizmos.
Alex Flouee
Phone Blocker

Adams Kevin said...

I ADAMS KEVIN, a representative of Aiico Insurance plc, we trust and respect for individual differences in day out a loan. We will provide 2% of the loan's interest rate. If you are interested in this business contact us by e-mail ( now transfer their loan documents issued properly. Do you need a loan to set up business or school if you are very welcom to aiico insurance can also contact us by email( we first week can request a balance transfer.

व्यक्तिगत व्यवसायका लागि ऋण चाहिन्छ? तपाईं आफ्नो इमेल संपर्क भने उपरोक्त तुरुन्तै आफ्नो ऋण स्थानान्तरण प्रक्रिया गर्न