jQuery .load() another page which contains prism.js

Question

I'm creating a website that uses jQuery .load() to present content that is stored in divs on another .html page, as follows

index.html head:

<link href="css/prism.css" rel="stylesheet" />
<script type="text/javascript" src="js/prism.js"></script>

index.html:

$('#content').load('project_info.html #example', function() { $(this).fadeIn(".25s"); });

project_info.html's corresponding div:

<div id="example">
<pre><code class="language-css">p { color: red }</code></pre>
</div>

I'm trying to get the prism.js code block to display correctly, and while

 <pre><code class="language-css">p { color: red }</code></pre> 

works properly when I embed it in index.html, it won't seem to inherit the prism.js file, just the prism.css stylesheet. It seems the prism.js file won't manipulate the "content" div. Any ideas?

Answer 1

After you load the remote content onto your page, you'll need to manually apply prism to it. After some brief search, looks like prism.js provides this method:

highlightElement: function(element, async, callback) { ... }

I'm assuming can use Prism.highlightElement(document.getElementById('example')) to highlight the code inside #example.

(Also see this example: https://github.com/PrismJS/prism/blob/b551696fbdf8905d52ca67e1a9ae50a3ccfeab92/examples.js)