search

liangeeks / google-code-prettify

Automatically exported from code.google.com/p/google-code-prettify
0 stars 0 forks source link

Newlines are not preserved in IE6,7,8 in code blocks (even with white-space:pre) #127

Open GoogleCodeExporter opened 8 years ago

GoogleCodeExporter commented 8 years ago 
What steps will reproduce the problem?
1. Add the following code to the README.html file in the Google Prettify 
download:
<code class="prettyprint lang-javascript" style="white-space:pre;">
    /**
     * This is a comment.
     */
    'a': true,

    /**
     * This is another comment.
     */
    'b': true
</code>

2. Open Internet Explorer 6,7 or 8. Navigate to the README.html file.
3. Notice that everything is displayed on the one line.

(Please include HTML, not just your source code)

What is the expected output?  What do you see instead?
> Prettified code should be displayed with newlines preserved - as it does look 
like before it has been prettified.

What version are you using?  On what browser?
> 21st July 2010

Please provide any additional information below.
> This issue also applies to the prettified code here:
http://www.balupton.com/sandbox/jquery-syntaxhighlighter/demo/
However there at least some newlines are preserved. The jQuery 
SyntaxHighlighter is just a jQuery Interface for Google Prettify.

Original issue reported on code.google.com by balup...@gmail.com on 16 Aug 2010 at 8:23

GoogleCodeExporter commented 8 years ago 
Having similar issue but only IE6 is affected.  andrew@andrewgjohnson.com if 
you need a hand, or discover a fix!

Original comment by andrew.g...@gmail.com on 9 Sep 2010 at 8:25

GoogleCodeExporter commented 8 years ago 
This problem also occurs for Java code. You can see it in the official test 
page, where all five blank lines are gone: 
http://google-code-prettify.googlecode.com/svn/trunk/tests/prettify_test.html#ja
va

I verified this same problem with IE 6 on Windows XP, and with IE 8 on Windows 
7.

On the other hand, when "lang-java" is specified in the "class" attribute, it 
appears to work just fine. So, hopefully, it can be fixed.

Original comment by rliesenf...@gmail.com on 21 Sep 2010 at 12:54

GoogleCodeExporter commented 8 years ago 
I only had this problem in IE6 and found/implemented a fix for it. Used the 
idea from: 
http://www.quirksmode.org/bugreports/archives/2004/11/innerhtml_and_t.html

Attached a copy of my prettify code for anyone to use/verify. The code I 
changed/added is on lines 1474 - 1516. If you want it to support IE7 and/or 8 
then add checks for 7 and 8 in the if statement. Eg: if(cs.outerHTML && 
(window['_pr_isIE6']() === 6 || window['_pr_isIE6']() === 7 || 
window['_pr_isIE6']() === 8)) { etc.

Original comment by josh.salverda on 2 Nov 2010 at 1:26

Attachments:

GoogleCodeExporter commented 8 years ago 
The problem does not show in the test page because tests set IE678 to false for 
all browsers in test base .js As soon as you remove this script most code 
fragments are displayed in one long line. Only line numbering is not affected 
because it uses a different line breaker AFAIK.

Original comment by peter.codecop.kofler on 29 Dec 2010 at 6:38

GoogleCodeExporter commented 8 years ago

Original comment by mikesamuel@gmail.com on 30 Dec 2010 at 4:01

GoogleCodeExporter commented 8 years ago 
If you can visit 
http://google-code-prettify.googlecode.com/svn/trunk/tests/ie-newline-copy-paste
.html  and follow the instructions there, it would help me collect info to 
address this issue.

Original comment by mikesamuel@gmail.com on 10 Mar 2011 at 1:36

GoogleCodeExporter commented 8 years ago 
START
before  [CR]  after
before  [CRLF]  after
before  [LF]  after
before [BR] after
before  [CR+BR]  after
before  [CRLF+BR]  after
before  [LF+BR]  after
before [BR+CR] after
before [BR+CRLF] after
before [BR+LF] after
END

RESULTS
Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0; .NET CLR 1.1.4322; .NET CLR 
2.0.50727)

Ok: 
BR:48,CRplusBR:48,CRLFplusBR:48,LFplusBR:48,BRplusCR:48,BRplusCRLF:48,BRplusLF:4
8

Bad: CR:16,CRLF:16,LF:16

Original comment by peter.codecop.kofler on 12 Mar 2011 at 4:50

GoogleCodeExporter commented 8 years ago 
START
before  [CR]  after
before  [CRLF]  after
before  [LFCR]  after
before  [LF]  after
before  [VTAB]  after
before 
[x2028] 
after
before 
[x2029] 
after
before [BR] after
before  [CR+BR]  after
before  [CRLF+BR]  after
before  [LFCR+BR]  after
before  [LF+BR]  after
before  [VTAB+BR]  after
before 
[x2028+BR] 
after
before 
[x2029+BR] 
after
before [BR+CR] after
before [BR+CRLF] after
before [BR+LFCR] after
before [BR+LF] after
before [BR+LF] after
before [BR+VTAB] after
before 
[BR+x2028] 
after
before 
[BR+x2029] 
after
before[divs]after
before[ul]after
before
[Not generated via innerHTML CR]
after
before[Not generated via innerHTML BR]after
before
[Not generated via innerHTML CR + BR]
after
before
[Not generated via innerHTML BR + CR]
after
END

RESULTS
Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; WOW64; 
chromeframe/10.0.648.205; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET 
CLR 3.5.21022; .NET CLR 3.5.30729; .NET CLR 3.0.30729)

Ok: 
BR:48,CRplusBR:48,CRLFplusBR:48,LFCRplusBR:48,LFplusBR:48,VTABplusBR:48,x2028plu
sBR:50,x2029plusBR:50,BRplusCR:48,BRplusCRLF:48,BRplusLFCR:48,BRplusLF:48,BRplus
LF:48,BRplusVTAB:48,BRplusx2028:50,BRplusx2029:50,divs:48,notgen-cr:48,notgen-br
:48,notgen-crbr:48

Bad: CR:16,CRLF:16,LFCR:16,LF:16,VTAB:16,x2028:17,x2029:17,ul:57,notgen-brcr:80

Original comment by peter.codecop.kofler on 15 Apr 2011 at 7:33

GoogleCodeExporter commented 8 years ago 
[deleted comment]
GoogleCodeExporter commented 8 years ago 
Was there ever or is there going to be a fix for this issue? Having the same 
issue with IE 7 and 8 on windows 7. Every place where there is a space or new 
line renders as
span class="pln"
 Text - Empty Text Node

Thanks

Original comment by isimmon...@gmail.com on 10 Feb 2013 at 4:03

GoogleCodeExporter commented 8 years ago 
Any solution here?

Original comment by nikhilpa...@gmail.com on 9 Apr 2013 at 6:52

GoogleCodeExporter commented 8 years ago 
The problem also occurs in IE10. Changing the user agent to Chrome or other 
non-MS UA in the browser debugging fixes the issue.

The issue affects the Play Framework site, that uses this script:

http://twitter.github.com/bootstrap/assets/js/google-code-prettify/prettify.js

So all the code examples on this page:

http://www.playframework.com/documentation/2.1.1/ScalaActions

display on one long line with a horizontal scrollbar.

The browser detection code that seems to cause the problem:

        var k=/\bMSIE\b/.test(navigator.userAgent),m=/\n/g,t=a.a,s=t.length,e=0,l=a.c,p=l.length,h=0,d=a.e,g=d.length,a=0;

and a few lines after that:

                k&&(j=j.replace(m,"\r"));

Original comment by vla...@gmail.com on 10 May 2013 at 1:29

GoogleCodeExporter commented 8 years ago 
Vlad, thanks for the detailed bug report.

I believe you're using an older version.  The corresponding unminified code 
reads

    var isIE8OrEarlier = /\bMSIE\s(\d+)/.exec(navigator.userAgent);
    isIE8OrEarlier = isIE8OrEarlier && +isIE8OrEarlier[1] <= 8;

and later

          if (isIE8OrEarlier) {
            styledText = styledText.replace(newlineRe, '\r');
          }

and the corresponding minified source reads

    var s=/\bMSIE\s(\d+)/.exec(navigator.userAgent),s=s&&+s[1]<=8,d=/\n/g,x=a.a,m=x.length,g=0,j=a.d,k=j.length,b=0,c=a.g,i=c.length,r=0;c[i]=m;

    ....

    s&&(G=G.replace(d,"\r"));

Do you know which version you're using?

If you're amenable to updating to the latest version, would the autoloader work 
for you?
https://code.google.com/p/google-code-prettify/wiki/GettingStarted#Auto-Loader

Original comment by mikesamuel@gmail.com on 11 May 2013 at 6:07

GoogleCodeExporter commented 8 years ago 
@mikesamuel Is the latest version the one uploaded march 4th or is there a 
newer version in the svn repo?

Using the example in the download, which uses the autoloader method still does 
not work in any IE less than IE9. Attached is a screen shot.

Original comment by isimmon...@gmail.com on 13 May 2013 at 10:37

Attachments:

GoogleCodeExporter commented 8 years ago 
@mikesamuel

Thanks for the quick reply, but unfortunately I'm not involved in the 
development of those projects so I have no idea what version they used.

I'm just an end user of their site (www.playframework.com) that is affected by 
the problem.

And since they didn't answer when I reported the problem, I started 
investigating the issue myself. The most annoying thing is that there is a 3rd 
party involved, Twitter Bootstrap, that has a copy of the minified file on 
their github repository. 

The playframework site just references that file with the full URL to the 
github file, without making a local copy.

Seeing that the playframework guys don't answer, I contacted the bootstrap 
guys, but they said that that file will no longer be used in the next bootstrap 
version, and closed the issue.

Then I reported the issue here, but I understand that the issue is already 
fixed in the latest prettifier version, so I think I'll have to try to contact 
the playframwork guys again to replace the version they use from the bootstrap 
git repository with a more recent one.

What may be a good idea would be to include some variable in the script code, 
something like: var version="V.4.Mar.2013", to be able to determine the version 
even with minified code.

Thanks again.

Original comment by vla...@gmail.com on 14 May 2013 at 9:02

GoogleCodeExporter commented 8 years ago 
lsimmons, yes, 4-March is the latest version.  I have no way of running IE8 
right now.  Is there a difference between standards and quirks mode in how IE8 
renders newlines?

Original comment by mikesamuel@gmail.com on 15 May 2013 at 2:17

GoogleCodeExporter commented 8 years ago 
Vlad, that sounds really frustrating.  If bootstrap does pick up the latest 
version when they cut the next release of bootstrap, the problem should be 
fixed.

The auto-loader will hopefully reduce the number of copies of prettify floating 
around github repos.

I was toying with the idea of switching the code.google repo (which uses SVN 
for historical reasons) to git so that git projects could submodule it but 
don't know whether I'd orphan svn externals.

Either way, a version identifier is a good idea.

Original comment by mikesamuel@gmail.com on 15 May 2013 at 2:22

GoogleCodeExporter commented 8 years ago 
mikesamuel, Yes the example works in IE8 quirks mode(also in IE7). Sorry I 
didn't think to check that. Does this tell you what might be causing the issue?

Thanks

Original comment by isimmon...@gmail.com on 15 May 2013 at 3:18

GoogleCodeExporter commented 8 years ago 
Actually I just noticed a problem using dev tools to change the doc mode. Since 
I have IE10 installed it has "standards(page default)" and regular "standards" 
mode. I was changing the browser mode to IE8 but the doc mode was still in 
"standards(page default)" . When I change it to IE8 with regular standards mode 
it works. I guess this should really be tested on a separate IE8 browser 
instead of using dev tools to test it.

Original comment by isimmon...@gmail.com on 15 May 2013 at 3:32

GoogleCodeExporter commented 8 years ago 
lsimmons, knowing that quirks affects it helps.

Original comment by mikesamuel@gmail.com on 16 May 2013 at 4:53

GoogleCodeExporter commented 8 years ago 
I am still seeing this issue in ie9 and ie10 using the auto-loader. Any 
suggestions?

Original comment by jerrod.l...@gmail.com on 8 Nov 2013 at 7:38

GoogleCodeExporter commented 8 years ago 
Ah, well in case anyone else comes across this problem, seems like the reason 
for this was the page was being rendered in quirks mode. I added a <!DOCTYPE 
html> to the top of my html file and it makes IE 9/10 render in standard mode 
and this fixed my problem.

Original comment by jerrod.l...@gmail.com on 8 Nov 2013 at 8:08