highlight.js之vue指令——排版高亮网页代码块

在页面上展示代码、json数据等，使用highlight.js，可以像编辑器一样对代码格式化、高亮，增加可读性。

官网例子：

简单的使用就是按照文档，引入js/css，按照要求使用即可。

下面介绍在vue中使用

封装成自定义指令：

1.按照官网文档，用npm或cnpm安装highlight.js

2.新建highlight.js文件，该文件为vue自定义指令文件，代码如下

// highlight.js  代码高亮指令
import Vue from 'vue';
import Hljs from 'highlight.js';
import 'highlight.js/styles/monokai-sublime.css';

let Highlight = {};
Highlight.install = function (Vue, options) {
    // 先有数据再绑定，调用highlightA
    Vue.directive('highlightA', {
        inserted: function(el) {
            let blocks = el.querySelectorAll('pre code');
            for (let i = 0; i < blocks.length; i++) {
                const item = blocks[i];
                Hljs.highlightBlock(item);
            };
        }
    });

    // 先绑定，后面会有数据更新，调用highlightB
    Vue.directive('highlightB', {
        componentUpdated: function(el) {
            let blocks = el.querySelectorAll('pre code');
            for (let i = 0; i < blocks.length; i++) {
                const item = blocks[i];
                Hljs.highlightBlock(item);
            };
        }
    });

};

export default Highlight;

（注意：

a. 代码皮肤可以根据要求或者自己喜好进行更换，在highlight.js官网首页https://highlightjs.org/ 把“style”对应的名称复制，替换该文件的“monokai-sublime”即可。

b. 在vue中，根据数据的更新，注意钩子函数的使用。

）

3.在main.js中引入指令，并使用

// highlight.js代码高亮指令
import Highlight from './assets/utils/highlight';

Vue.use(Highlight);

4.在页面中使用指令

    {{item.code}}

然后，就能在页面上看见漂亮的代码块