jQuery .load()另一个包含prism.js的页面

Question

我正在创建一个使用jQuery .load()来显示存储在另一个.html页面上的div中的内容的网站，如下所示

index.html头部：

<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对应的div：

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

我试图让prism.js代码块正确地显示，同时

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

当我将它嵌入index.html中时，它似乎不会继承prism.js文件，只继承prism.css样式表。prism.js文件似乎不会操作“内容”div。有什么想法吗？

Answer 1

在将远程内容加载到页面后，需要手动将棱镜应用到页面上。经过一些简短的搜索，看起来prism.js提供了以下方法：

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

我假设可以使用Prism.highlightElement(document.getElementById('example'))突出显示#example中的代码。

(还请参阅此示例：https://github.com/PrismJS/prism/blob/b551696fbdf8905d52ca67e1a9ae50a3ccfeab92/examples.js)