1

次のように、jQuery .load() を使用して別の .html ページの div に格納されているコンテンツを表示する Web サイトを作成しています。

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 スタイルシートのみを継承しているようです。プリズム.jsファイルは「コンテンツ」divを操作しないようです。何か案は？

4

1 に答える 1

1

ページにリモート コンテンツを読み込んだ後、手動でプリズムを適用する必要があります。簡単な検索の後、prism.js がこのメソッドを提供しているように見えます。

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

を使用Prism.highlightElement(document.getElementById('example'))して内部のコードを強調表示できると思います#example。

(この例も参照してください: https://github.com/PrismJS/prism/blob/b551696fbdf8905d52ca67e1a9ae50a3ccfeab92/examples.js )

于 2015-03-30T20:00:32.193 に答える