自動檢測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);
         });

     }