javascript - 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>

索引.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。有任何想法吗？

score 1 · Accepted Answer

将远程内容加载到页面后，您需要手动对其应用 prism。经过一些简短的搜索，看起来 prism.js 提供了这个方法：

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

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

（另见这个例子：https ://github.com/PrismJS/prism/blob/b551696fbdf8905d52ca67e1a9ae50a3ccfeab92/examples.js ）

1 回答 1