Stacking Code

This is post #29 in the Building Neno series. Please click here for a description of the Building Neno project and instructions on how to access the source code for this post.

I don't use Internet Explorer at home or work if I can help it. Even intranet developers on the Microsoft stack have to struggle with CSS occasionally, so the small amount of goodwill I had towards this stalwart of earlier years disappeared long ago.

That said, IE is still the standard browser at work. That means I have to fire it up every now and then to make sure my applications render nicely. Doing that today I realised I hadn't checked http://stackingcode.com/ with IE at all yet. So I brought it up, and much to my surprise, it rendered great, thanks to Blueprint.

Scrolling down however, I found the Prettify syntax highlighting did not render correctly...

The line breaks are failing in IE8 and IE7. My default browser, Firefox, works just fine of course, and so does iPad Safari. I don't use IE, nor do I think anyone else should either, but it is a common browser and as such can't be completely ignored (yet). So back at home I dedicated some time to fixing it.

The short of it is, my implementation of Prettify marks my <pre><code> blocks like this...

$('pre code').addClass('prettyprint');

After googling, stepping through JavaScript, and finally looking at some sites that use Prettify without any problem in IE, I realised the class attribute was going on the wrong tag. I was putting it on the code tag while other sites were putting it on the pre tag. The fix is as simple as...

$('pre code').parent().addClass('prettyprint');

Firefox and Safari don't care of course, but IE does and now it all works as expected. I'd groan, but having to tinker with IE to get something to work has been such a massive timesink over the years, another couple of hours is nothing by comparison.