Vue富文本编辑器代码高亮问题

之前在Vue-awesome上面找富文本编辑器的插件，找了排名第一的vue-quill-editor，排名第一应该是相对比较好用的。 首先下载到自己的项目中

npm install vue-quill-editor --save -dev
复制代码

这个只是富文本编辑器，你使用代码块的话代码是不会高亮的，所以还要装一个highlight.js

npm install highlight.js --save -dev
复制代码

注意这个highlight.js中间是有一个点的（不知道发布这个包的作者咋想的）。

然后在引入highlight.js的样式文件

import 'highlight.js/styles/xcode.css'
复制代码

我引的主题是xcode，还有其他很多主题，具体可以去他的highlight.js的npm包去查看。

到这里highlight.js的引入就完成了。

vue-quill-editor的配置

modules: {
    toolbar: [
        ['bold', 'italic', 'underline', 'strike'],
        ['blockquote', 'code-block'],
        [{ 'header': 1 }, { 'header': 2 }],
        [{ 'list': 'ordered' }, { 'list': 'bullet' }],
        [{ 'script': 'sub' }, { 'script': 'super' }],
        [{ 'indent': '-1' }, { 'indent': '+1' }],
        [{ 'direction': 'rtl' }],
        [{ 'size': ['small', 'medium', 'large', 'huge', 'false'] }],
        [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
        [{ 'font': [] }],
        [{ 'color': [] }, { 'background': [] }],
        [{ 'align': [] }],
        ['clean'],
        ['link', 'image', 'video']
    ],
    syntax: {
        highlight: text => {
            return hljs.highlightAuto(text).value; // 这里就是代码高亮需要配置的地方
        }
    }
}
复制代码

加上语法高亮的配置项貌似就快大功告成了，但是我发现到这里代码块确实有语法高亮了，但是字体还是默认最丑的字体啊，不等宽的英文字体看起来很难受啊有木有。

最后发现问题是不起眼的reset.css把所有的标签都给了默认字体，所以最后把pre和code标签单独拿出来用上自己喜欢的字体就ok啦！

pre, code { font-family: Consolas; }

Consolas和Monoca我觉得是windows上最好看的字体了。

结束语

第一次写文章，有什么不对的地方还请大家指正批评。告辞~