在开发博客类等需要实现文章发表功能的项目时，我们往往会收到需要实现代码文本高亮的需求，此时，HighLight代码高亮插件就派上用场了。本文主要介绍如何在Vue-Cli项目中使用HighLight代码高亮插件。

1.获取HighLight代码高亮插件

打开cmd，进入到项目根目录，键入以下代码，安装HighLight代码高亮插件。

npm install highlight.js --save

2.在main.js中引入HighLight代码高亮插件

//代码高亮插件
import hljs from 'highlight.js';
import 'highlight.js/styles/atom-one-dark.css';

3.在main.js中定义自定义指令

//自定义指令
Vue.directive('highlight',function (el) {
    let blocks = el.querySelectorAll('pre code');
    blocks.forEach((block)=>{
        hljs.highlightBlock(block)
    })
})
//自定义指令应定义在new Vue()方法之前 
new Vue({
    router,
    render: function(h) {
        return h(App)
    }
}).$mount('#app')

4.在需要使用代码高亮的地方添加自定义指令

示例：

<span>
    <pre>
        <code v-highlight>{{code_text}}</code>
    </pre>
</span>