Galdalf Galdalf - 7 months ago 14
Javascript Question

Unsuccessful attempt using "google-code-prettify" with dynamically DOM

Inside

head
tag I have:

<link rel="stylesheet" href="google-code-prettify/prettify.css">
<script src="google-code-prettify/prettify.js"></script>


Somewhere inside body tag I have:

<div id='code-context'>
<pre class="prettyprint"><code class="language-js"></code></pre>
</div>


In my main css file I have some
pre
and
code
which should override prettify:

#code-context pre, #code-context code {
font-family: 'Ubuntu Mono', monospace;
width: 80ch;
white-space: pre-wrap;
}


Intentionally, I didn't include
<body onload="prettyPrint()">
.
The
#code-context
is hidden when the page is loaded so it's unnecessary. The code become visible after the user trigger a jQuery function which goes:

$('#code-context').show();
var fileSource = "code-to-display.js";
$('code').load(fileSource);
$('.prettyprinted').removeClass('prettyprinted');
prettyPrint();
console.log('succeded!');


I'm getting the message in the console (which implies that all went OK), but in fact what I get is a border around all the code, and the code itself isn't color-coded.

Help?

Answer

Found it!

I used jQuery's get() instead of load() and it worked, though I don't fully understand why.