JQuery .load() другая страница, которая содержит prism.js

Question

Я создаю веб-сайт, который использует JQuery .load(), чтобы представить содержание, которое хранится в дивы на другом .html странице следующим образом

индекс. 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 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, по-видимому, не будет наследовать призму. 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)