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

时间:2015-12-24 01:25:38

标签: javascript jquery css ckeditor highlight.js

我正在使用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>

导致以下样式:

enter image description here

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

div id =&#39;内容&#39; 的图片目前没有显示样式:

enter image description here

1 个答案:

答案 0 :(得分:3)

解决了它。我必须在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);
         });

     }