jQuery .load() 另一个包含 prism.js 的页面
jQuery .load() another page which contains prism.js
我正在创建一个网站,该网站使用 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 文件似乎不会操纵 "content" div。有什么想法吗?
将远程内容加载到您的页面后,您需要手动对其应用棱镜。经过一些简单的搜索,看起来 prism.js 提供了这个方法:
highlightElement: function(element, async, callback) { ... }
我假设可以使用 Prism.highlightElement(document.getElementById('example'))
来突出显示 #example
中的代码。
(另请参阅此示例:https://github.com/PrismJS/prism/blob/b551696fbdf8905d52ca67e1a9ae50a3ccfeab92/examples.js)
我正在创建一个网站,该网站使用 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 文件似乎不会操纵 "content" div。有什么想法吗?
将远程内容加载到您的页面后,您需要手动对其应用棱镜。经过一些简单的搜索,看起来 prism.js 提供了这个方法:
highlightElement: function(element, async, callback) { ... }
我假设可以使用 Prism.highlightElement(document.getElementById('example'))
来突出显示 #example
中的代码。
(另请参阅此示例:https://github.com/PrismJS/prism/blob/b551696fbdf8905d52ca67e1a9ae50a3ccfeab92/examples.js)