How to get prettyprint to work on dynamically generated dom element

Question

I'm using prettyprint plugin as syntax highlighter, it work fine when page loads but when i add new elements dynamically it doesn't work! I tried using prettyPrint() to invoke it after loading the new contents but it didn't work! i also followed the instructions on the plugin website by wrapping prettyPrint() with a function but it didn't work neither! any help would be much appreciated. i installed the plugin like this:

<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>

my code is:

function showCode(e){
    (e.preventDefault) ? e.preventDefault() : e.returnValue = false;
    var parent = document.createElement('div'),
        pre = document.createElement('pre'),
        code = document.createElement('code'),
        elm = (e.currentTarget) ? e.currentTarget : e.srcElement,
        src = elm.getAttribute('href'),
        id = elm.getElementsByTagName('img')[0].getAttribute('src').replace(/images\/(.+?)\.png/g, "$1");
    parent.id = "codeZoom";
    pre.className = "prettyprint linenums lang-" + id;

    var xhr = (window.XMLHttpRequest) ? new window.XMLHttpRequest() : new activeXObject("Microsoft.XMLHTTP");
    xhr.open('get', src, true);
    xhr.send();
    xhr.onreadystatechange = function()
    {
        if(xhr.readyState == 4 && xhr.status == 200)
        {
            var text = document.createTextNode(xhr.responseText);
            code.appendChild(text);
            pre.appendChild(code);
            parent.appendChild(pre);
            document.getElementsByTagName('body')[0].appendChild(parent);
            center(parent);
            prettyPrint();
        }
    }
}

currently i'm getting the error message prettyPrint is not defined.

Saltern

You need to show some context. If it says prettyPrint is not defined then it is because it is not defined! Impossible to know with your current code – Confession

I added the link to the plugin website, it's supposed to create prettyPrint function when page loads which i think it does because it works on other pre elements when page starts! – Saltern

but it says here: google-code-prettify.googlecode.com/svn/trunk/README.html that i can (scroll to the end of the page), no? – Saltern

That doesn't apply when you are using the loader (run_prettify.js) as far as I can see – Confession

I see that you can reach the prettyPrint function by using the undocumented PR. prettyPrint() function. Although, it is safer if you stop using the loader and use prettyPrint() instead. Let me know if this is your case – Confession

it says PR.prettyPrint() is not a function – Saltern

looks like i needed to include another file which i still don't understand why but it works, thanks for all your help – Saltern

Answer 1

As far as I can tell your code seems correct.

1) include pretty print ( not the run_xxx) version

2) call prettyPrint() any time your Dom is updated

However your script that includes prettyPrint is missing a closing ", so maybe it's just a typo your problem :)

Primo

how do i inclue pretty print? do i have to download it to my server? – Saltern

No just follow steps on google-code-prettify.googlecode.com/svn/trunk/README.html and be sure to add a CSS class of prettyPrint to whatever you want prettified. Nothing really else needed. – Primo

Actually yes you do need to download it, or find a cdn version of it... It's the 1st thing said in the above doc page. I use it on my site at www.i-technology.net go there and look at the source to see how I referenced it. I'm on an iPad right now so can't help much but if I remember right I referenced some cdn version on there. – Primo

in the first step it says download a distribution! what do i do with it after that? – Saltern

Unzip it into a directory of your choice and reference it like you would jQuery or any other lib in your site – Primo

i downloaded the min version and included prettify.js and it worked :) but i don't understand what's the other link run_prettify for thogh? – Saltern

Don't know, you'd have to look at the source to see what it does. Also be sure to reference the CSS files you need for syntax highlighting – Primo

Answer 2

When prettyprint() executes, it adds the class "prettyprinted" to the container element. I guess so that its not pretty printed twice, probably breaks things.

You just need to remove that class before running prettyprint() again.

$('#my_element').removeClass('prettyprinted');
prettyPrint();

Padegs

up voted as this is the correct answer. Must remove class prior to calling prettyPrint(). May also be done with plain javascript: element.classList.remove("prettyprinted"). – Unread