Indentation problem when dymanically insert html code

GoogleCodeExporter commented 9 years ago

What steps will reproduce the problem?
1.from the following html code snippet, use jQuery get #parent's html()
2.replace < and > with &lt; and &gt;, and append the replaced text to a <pre 
class="prettyprint">
3.call prettyPrint();
4.you will see the result with wrong indentation

<!DOCTYPE html>
<html lang="en">
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script type="text/javascript" src="Scripts/prettify.js"></script>
    <script type="text/javascript" src="Scripts/lang-css.js"></script>
    <link href="Scripts/prettify.css" rel="stylesheet" />
</head>
<body>
    <pre class="prettyprint linenums lang-html">
&lt;div class="grandparent"&gt;
    &lt;div class="parent"&gt;
        &lt;div class="child"&gt;
            &lt;span class="subchild"&gt;&lt;/span&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
    </pre>
    <div class="grandparent">
        <div class="parent">
            <div class="child">
                <span class="subchild"></span>
            </div>
        </div>
    </div>
    <div id="code">
        <pre class="prettyprint linenums" id="pre"></pre>
    </div>
    <script type="text/javascript">
        jQuery(function () {
            var codeText = $("<div />").append($("span.subchild").parent().clone()).html().replace(/</g, "&lt;").replace(/>/g, "&gt;");
            $("#pre").html(codeText);
            prettyPrint();
        });
    </script>
</body>
</html>

The result I got is the following, also I attached a image
1.<div class="child">
2.            <span class="subchild"></span>
3.        </div>

I am using prettify-4-Mar-2013.tar.bz2

Thanks!

Original issue reported on code.google.com by weicheng...@gmail.com on 21 Jun 2013 at 7:15

Attachments:

sample_code.png

GoogleCodeExporter commented 9 years ago

I update the html code to make it shorter, but forgot to change the image, here 
is the new one.

Original comment by weicheng...@gmail.com on 21 Jun 2013 at 7:19

Attachments:

sample_code.png

GoogleCodeExporter commented 9 years ago

What is the string you are appending in step 2?

Original comment by mikesamuel@gmail.com on 26 Jun 2013 at 2:45

GoogleCodeExporter commented 9 years ago

I am trying to append the content of <div class="parent">. I read the content 
out with jQuery. The content preserved all the spaces among tags, except the 
space before the first div. Is this a bug of jQuery .html() method? Also I just 
found out that the result varies for IE10 and IE8/9. Same code on IE8/9 all 
spaces and line feeds are gone. The appended content becomes single line. <div 
class="child"><span class="subchild"></span></div>. Is there a way to manage 
the carriage returns and spaces between tags during the prettify process? Maybe 
the prettify process trim all  spaces and line feeds firstly, then it insert 
proper spaces tabs and line feeds between tags? Thank you!

Original comment by weicheng...@gmail.com on 10 Jul 2013 at 2:48

GoogleCodeExporter commented 9 years ago

Has this been sorted by any chance ?

Original comment by richiemc...@gmail.com on 6 Jan 2014 at 10:26

GoogleCodeExporter commented 9 years ago

I think it's a browser issue, rather than the prettifier. Thanks for your 
attention.

Original comment by weicheng...@gmail.com on 9 Mar 2014 at 5:33

ericpony / google-code-prettify

Indentation problem when dymanically insert html code #291