prettify highlightning in a PRE with white-space:nowrap is one line in IE

Question

Hi,

In Internet Explorer, a PRE with a style of white-space:nowrap is causing the code in the PRE to be in one single line when I use prettify (http://code.google.com/p/google-code-prettify/).

Doesn't a <br/> is supposed to cause a new line in a PRE? I checked the HTML source generated by prettify after the page has loaded and it generates <br/> when it encounter newlines.

See http://blog.mikecouturier.com/2009/12/google-street-view-with-google-maps%5F27.html for an example.

This doesn't happen in FF nor Chrome.

Thanks

EDIT: Maybe this is related to this: http://stackoverflow.com/questions/195363/inserting-a-newline-into-a-pre-tag-ie-javascript

Answer 1

Hey litb, you're right, in versions IE6 and IE7 the pre tag code is displayed on 1 line. I've added this small fix for browsers IE6 and 7 only.

I've tested it and it works fine, it's a bit hacky because I'm actually replacing <br> tags with <p> tags, but this doesn't cause any visual difference in the IE6 and 7 browsers.

You can add this snippet of code anywhere on your HTML page. It's using jQuery.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
    // this BR issue seems to happen only in browser
    // msie version 6.0 and 7.0
    if($.browser.msie && ($.browser.version == "6.0" || $.browser.version == "7.0")) {

        // replace all <br>s in the .prettyprint section
        // with <p> tags. <p> tags have the same visual behavior as <br> tags
        // in IE 6 and 7
        $(".prettyprint br").each(function(){
            $(this).replaceWith($("<p></p>"));
        });

    }

});
</script>

This is probably your best option until google fixes their prettify code for IE6 & 7.

Answer 2

From The Internet Explorer innerHTML Quirk:

The innerHTML property of HTML elements is well-known and widely used. It is capable of setting the complete content of an element in one go, including elements and the like. As the QuirksMode tests have shown, innerHTML is the fastest way to dynamically change the page content.

However, innerHTML has a problem in Internet Explorer.

The HTML standard requires a transformation on display of content. All kinds and amounts of adjacent whitespace are collapsed into a single space. This is a good thing - just as an example, it allows me to add a lot of line breaks into this source file without having to worry about weird line breaks in the displayed text.

Internet Explorer applies these transformations on assignment to the innerHTML property. This seems like a good idea: it saves a little time during display, because if the in-memory representation is already normalized, then the browser doesn't have to normalize whenever it needs to display the text.

There are exceptions to the normalization rule, though. Notably, these are the <textarea> element, the <pre> element and, in CSS-aware browsers, elements with any value but normal for the white-space property.

Internet Explorer does not respect these special cases. The third makes their optimization a bad idea, because white-space might change at runtime, for example through the DOM. In any case, Internet Explorer will normalize all assignments to the innerHTML property.

This is another IE only "bug" (even if it's them who invented innerHTML). In the first link you have solutions to this problem but as Lucas pointed out all seems to point at code by Google which you have no control over.