highlight.js <pre><code class="html">直接将div元素渲染出来了,如何设置?

Question

highlight.js <pre>直接将div元素渲染出来了,而不是<div>...</div>,如何设置?我用是的vue-cli

<pre>
<code class="html">
<div style="position:relative; width:200px; height:200px; left:100px; top:150px; background:yellow;">
    <div style="position:absolute; z-index:1; width:200px; height:200px; left:20px; top:20px; background:orange;">里面内容1</div>
    <div style="position:absolute; z-index:2; width:200px; height:200px; left:40px; top:40px; background:red;">里面内容2</div>
    <div style="position:absolute; z-index:3; width:200px; height:200px; left:60px; top:60px; background:green;">里面内容3</div>
    <div style="position:absolute; z-index:4; width:200px; height:200px; left:80px; top:80px; background:blue;">里面内容4</div>
</div>
</code>
</pre>

import hljs from 'highlight.js/lib/highlight'
import xml  from 'highlight.js/lib/languages/xml'

//...
created() {
    hljs.registerLanguage('xml', xml)
    hljs.configure({
        tabReplace: '    ', // 4 spaces
    })
    hljs.initHighlighting()
},
mounted() {
    document.querySelectorAll('pre code').forEach((block) => {
        hljs.highlightBlock(block);
    });
}

显示的不是<div>...</div>,而是渲染出来了,要怎么写才可以?

Answer 1

Vue.directive('highlight',function (el) {
  let blocks = el.querySelectorAll('pre code');
  blocks.forEach((block)=>{
    hljs.highlightBlock(block)
  })
})

<p v-html="markdownhtml" v-highlight></p>

https://segmentfault.com/a/11...