quilljs富文本编辑器使用方法和实时代码高亮方法

quill.js_强大,丰富的文本编辑器，这篇文章主要讲最新版的quilljs怎么实时渲染代码。主要是找了百度很多文章都不对，最后发现其实很简单。
如下图所示，可以输入代码后实时渲染高亮

下面开始在html插入quilljs富文本编辑器
引入quilljs的css、js和highlight的css、js

<link href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/monokai-sublime.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/quill/1.3.7/quill.snow.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/quill/1.3.7/quill.bubble.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/quill/1.3.7/quill.core.min.css" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<script src="https://cdn.bootcss.com/quill/1.3.7/quill.core.min.js"></script>
<script src="https://cdn.bootcss.com/quill/1.3.7/quill.js"></script>

id为editor的div

<div id="editor"></div>

设置quilljs的图标和高度还有自动保存功能、代码高亮（已注释）

var toolbarOptions = [
        [{ 'header': [1, 2, 3, 4, 5, 6, false] }],

        ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
        ['blockquote', 'link', 'image', 'code-block'],

        [{ 'header': 1 }, { 'header': 2 }],               // custom button values
        [{ 'list': 'ordered'}, { 'list': 'bullet' }],

        [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
        [{ 'align': [] }],

        ['clean']                                         // remove formatting button
    ];

    var quill = new Quill('#editor', {
        bounds: '#editor',
        modules: {
            //自动保存
            history: {
                delay: 1000,
                maxStack: 100,
                userOnly: false
            },
            'syntax': true,//代码高亮
            toolbar: toolbarOptions
        },
        placeholder: '请输入内容',
        theme: 'snow'
    });
    quill.container.style.height = '500px';//高度
    this.quill.pasteHTML("插入html");//用于修改重新编辑内容