vue使用highlight.js高亮代码

highlight.js是一款非常不错的高亮插件，我爱模板网之前写过“dedecms kindeditor编辑器UTF8和SyntaxHighlighter代码高亮”的文章，这次，是要将highlight.js用在vue中。网上有很多这方面的介绍，但大多要么有问题，要么不全面。下面开始吧：

1、安装highlight.js

npm install highlight.js --save

2、封装一个指令，这样使用起来更加方便：

import Hljs from 'highlight.js';
// 代码高亮风格，可以在node_modules/hightlight.js/styles/目录下找到更多的风格样式
import 'highlight.js/styles/github-dark-dimmed.css';

let Highlight = {};
Highlight.install = function (Vue) {
    // 自定义指令 v-highlight
    Vue.directive('highlight', {
        // 被绑定元素插入父节点时调用
        inserted: function(el) {
            let blocks = el.querySelectorAll('pre code');
            for (let i = 0; i < blocks.length; i++) {
                Hljs.highlightBlock(blocks[i]);
            }
        },
        // 指令所在组件的 VNode 及其子 VNode 全部更新后调用
        componentUpdated: function(el) {
            let blocks = el.querySelectorAll('pre code');
            for (let i = 0; i < blocks.length; i++) {
                Hljs.highlightBlock(blocks[i]);
            }
        }
    })
};

export default Highlight;

新建highlight.js文件，将上面的代码放入。

3、在src/main.js引入上面自定义的指令：

import Highlight from '@/directive/highlight.js'; // 这里的路径根据实际情况
Vue.use(Highlight);

4、使用

<div id="codeView" v-highlight>
    <pre><code class="language-xml" v-text="xmlContent" /></pre>
</div>

这里的code的class="language-xml"，就是要高亮的语言，根据需求，可能是language-html等，详见官网：https://highlightjs.org/usage/

最终效果图：