vue—highlight.js在Vue中的使用（pre标签代码高亮）

1、highlight.js介绍。
highlight.js用于在web界面对pre标签的美化。
2、在Vue中highlight.js环境的配置。
此处参考highlight官网给出的文档：如何使用Highlight.js
首先cnpm安装依赖：

cnpm install highlight.js

其次在main.js 中导入所需配置：

import hljs from "highlight.js";
import "highlight.js/styles/atelier-cave-dark.css";

Vue.directive("highlight", function (el) {
 let blocks = el.querySelectorAll("pre code");
 blocks.forEach((block) => {
   hljs.highlightBlock(block);
 });
});

导入的CSS样式可以选择自己喜欢的样式导入，具体参照highlight.js中文网给出的样式：highlight.js中文网

3、在vue中的使用。
官网给出了两种组件：

<highlightjs autodetect :code="code" />
<highlightjs language='javascript' code="var x = 5;" />

4、实例。（我这里使用的是atelier-cave-dark.css）