Vue2 实现代码高亮功能

前言
本来这是一个很简单的问题，直接引入第三方插件，然后安装第三方插件的教程写几行代码就可以了，但这是理想的状态，在实际开发中，肯定会遇到各种情况，导致代码没有亮度。

基于 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

我的博客

我的博客