官网示例:
报错:
修改: syntax: {
highlight: text => hljs.highlightAuto(text).value
},
完整代码:
npm install highlight.js --save
<template>
<div>
<div id="editor-container">
<p>hsdhjshdjshdj</p>
<p><br></p>
<p>存储格式为delta格式上传<span class="ql-bg-yellow">getContents</span> 或者 <span class="ql-color-purple">getText</span>,</p>
<p>可以自定义tollbar</p>
<p>This <span class="ql-bg-green" style="font-size: 18px">demo</span> shows how to <span style="font-size: 32px">change</span> this.</p>
<pre>function s(){}</pre>
<p><br></p>
</div>
</div>
</template>
<script>
import hljs from 'highlight.js'
import Quill from 'quill';
import 'highlight.js/styles/monokai-sublime.css'
export default {
data() {
return {
}
},
mounted() {
const toolbarOptions = ['bold', 'code-block'];
const quill = new Quill('#editor-container', {
theme: 'snow',
modules: {
'toolbar': toolbarOptions,
syntax: {
highlight: text => hljs.highlightAuto(text).value
},
}
});
},
}
</script>
原因: higlight 自身不提供实时渲染,需要调用highlightAuto