javascript - 自动检测 highlight.js 中为动态添加的元素添加的类

Question

我正在使用 highlight.js 9 并像下面这样添加它

 <script src="highlight/highlight.pack.js"></script>

我正在使用 ckeditor，它会动态添加 highlight.js 类。我需要在 div 中附加内容。当我附加它时，我希望 highlight.js 将检测编辑器使用的语言类并在我自动应用样式将其附加到我的页面。如何实现？

假设我的编辑器中有以下内容:

<pre>
<code class="language-css"><pre> <code>hljs.configure({useBR: true}); $('div.code').each(function(i, e) {hljs.highlightBlock(e)});</code></pre></code>

这导致以下样式:

当我将它附加到我的页面时，我想要与我在编辑器上看到的完全相同的样式。如何做到这一点。

div id='content' 的图像目前没有显示任何样式:

Answer 1

解决了。我必须在 onclick 事件处理程序中使用以下代码:

 $('pre code').each(function(i, block) {
    hljs.highlightBlock(block);
});

完整代码:

CKEDITOR.replace( 'editor1');
var content = $("#content");
function lol(event) {

    var el = CKEDITOR.instances.editor1.getData();
    alert(el);
    var html = $.parseHTML(el);

    content.append(html);

    $('pre code').each(function(i, block) {
        hljs.highlightBlock(block);
    });
}