自动检测 highlight.js 中添加的类以动态添加元素答案

【问题标题】：auto detect added class in highlight.js for dynamically added elements自动检测 highlight.js 中添加的类以动态添加元素
【发布时间】：2015-12-24 09:56:18
【问题描述】：

我正在使用 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'的图片目前没有显示样式：

【问题讨论】：

当你现在将它附加到页面上时它会显示什么？
只有没有样式的文本内容...检查我添加的新图像

标签： javascript jquery css ckeditor highlight.js

【解决方案1】：

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

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

完整代码：

CKEDITOR.replace('editor1'); var content=$("#content"); 函数大声笑（事件）{

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

                content.append(html);


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

     }

【讨论】：