VUE 让页面上显示的代码拥有高亮效果

需要用到highlight.js

npm install highlight.js

创建一个js文件

let hljs = require('highlight.js');

let vueHighlightJS = {};
vueHighlightJS.install = function install(Vue) {
    Vue.directive('highlightjs', {
        deep: true,
        bind: function bind(el, binding) {
            let targets = el.querySelectorAll('code');
            let target;
            let i;
            for (i = 0; i < targets.length; i += 1) {
                target = targets[ i ];
                if (typeof binding.value === 'string') {
                	 directive, use this
                	 target.textContent = binding.value;
                }

                hljs.highlightBlock(target);
            }
        },
        componentUpdated: function componentUpdated(el, binding) {
            let targets = el.querySelectorAll('code');
            let target;
            let i;
            for (i = 0; i < targets.length; i += 1) {
                target = targets[ i ];
                if (typeof binding.value === 'string') {
                    target.textContent = binding.value;
                }
                hljs.highlightBlock(target);
            }
        }
    });
};
module.exports = vueHighlightJS;

这里封装好VUE的指令一来是方便我们使用 highlight.js，还有一个更重要的原因，就是在路由改变、页面部分重新渲染时，可能不会再次运行highlight.js中的方法，页面的高亮效果可能会出现一些问题。componentUpdated让指令所在组件的 VNode 及其子 VNode 全部更新后调用，可以避免这种情况的发生。
然后我们在main.js中：

import Vue from 'vue';
import VueHighlightJS from '../src/mixins/textUpdate.js';
import 'highlight.js/styles/googlecode.css';
Vue.use(VueHighlightJS);

这里引入的css只是众多高亮风格中的其中一种，想要更多的高亮风格，大家可以去node_modules中higlight.js/style文件夹中自行查找。
最后在需要的地方使用指令：

<pre v-highlightjs>
	<code class="" v-text=""></code>
</pre>

就大功告成啦，效果在下面↓↓↓↓↓↓↓

这一段显示出来的代码，是直接从dom元素中提取出来并显示的，具体的dom就是上面的四个按钮。具体怎么从dom中提取并显示，后面再写一个帖子。