前言
本来这是一个很简单的问题，直接引入第三方插件，然后安装第三方插件的教程写几行代码就可以了，但这是理想的状态，在实际开发中，肯定会遇到各种情况，导致代码没有亮度。
基于 highlight.js 实现
image.png
1.安装 highlinght.js
npm install highlight.js
2.下面我们先来基本按照 highlight.js 官方教程来实践一下。
引入 js 库 highlight.js 和样式表 github.css，官方提供了很多种主题，所有的主题样式文件存放 node_modules\highlight.js\styles 目录中，你可以根据自己的口味进行选择。
在main.js里面引入:
import hljs from 'highlight.js';
import 'highlight.js/styles/googlecode.css' //样式文件
Vue.directive('highlight',function (el) {
let blocks = el.querySelectorAll('pre code');
setTimeout(() =>{
blocks.forEach((block)=>{
hljs.highlightBlock(block)
})
}, 200)
})
按照官方的写法是没有定时器的，但是在没有定时器的时候你会发现代码根本就没有高亮效果，原因在于 code 元素没找到，也就是说在创建组件后，还没能成功的找到 code 元素，因为 Vue 还没渲染到页面中。此时我们可以通过万能的定时器来延迟执行就可以解决了。
在组件模板中添加如下代码：
<div v-highlight>
<pre>
<code v-html="content"></code>
</pre>
</div>
效果如下：
image.png
