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上最好看的字體了。

結束語

第一次寫文章，有什麼不對的地方還請你們指正批評。告辭~