Tuesday, April 17, 2007

Syntax Highlighting on Blogger

Since this is a Technical Blog, concerning topics that have to do with programming mostly I wanted to add some sort of syntax highlighting library to this website. Blogger allows you do fully edit your HTML (actually XML) template, so I did the following:

  1. Looked up syntax highlighting on blogger
  2. Ended up here: http://www.sitepoint.com/blogs/2006/08/29/flickr-mysql-dba-blog/
    Note how someone states in the comments that it SHOULD be possible to add dp.SyntaxHighlighter since the template is editable.
  3. I did as instructed.. I upload the library to my personal website, and editted the template so that the files were included.
  4. I surrounded code blocks as instructed by dp.SyntaxHighligher...
The end result: I ended up with each block of code showing as one line of code, with a <br /> tag at the beginning and at the end.

What I discovered was that blogger prints a post on a SINGLE LINE. All new line are omitted (even if you didn't use 'Compose' mode, but editted the HTML directly). SyntaxHighlighter can't cope with this (expects newline characters, etc.).

Blogger, this is seriously messed up and I would REALLY appreciate native syntax highlighting support, or if that is not going to happen a way to include third party libraries and make it work properly!

Furthermore I do like to recommend dp.SyntaxHighlighter if you can't syntax highligh server side! The library is very extensive, easy to use and produces very nice syntax!


Chris G said...

I believe it's actually because Blogger automatically converts new lines in your posts to proper <br /> syntax. That means it's changing those newlines in the code you're trying to syntax highlight to <br />, which the syntax highlighter then chokes on.

Just disable automatic conversion of newlines to <br /> in Blogger's settings, and then (yeah it might not be much fun ;)) go back through your posts and manually put <br /> for every newline. (Use a proper find & replace utility obviously.)

The convenience of the auto-conversion will instantly fall away if you happen to use a program for blog editing, at least. :)

Or... rewrite the syntax highlighter! But in a way that doesn't make very much sense. ;)

Anonymous said...

I agree. this is rubbish! Google seems to buy a lot of companies and then stop the development and improvement of products

kcornwell said...

I concur.

Mano Mangaldas said...

Download the latest version of SyntaxHighlighter.. and set the 'Convert line breaks' setting to 'No'.. it should work fine without manually adding the