Vue用highlight.js使代码高亮显示

1、引入highlight.js

npm install highlight.js

2、 在main.js中引入

// 引入 highlight.js 代码高亮工具
import hljs from "highlight.js";
// 使用样式，有多种样式可选
import "highlight.js/styles/github-gist.css";
// 增加自定义命令v-highlight
Vue.directive("highlight", function(el) {
  let blocks = el.querySelectorAll("pre code");
  blocks.forEach(block => {
    hljs.highlightBlock(block);
  });
});
// 增加组定义属性，用于在代码中预处理代码格式
Vue.prototype.$hljs = hljs;

 3、在html中使用

<div v-highlight>
  <pre>
    <code>
       cssYYDS
       JSYYDS
       vueYYDS
       reactYYDS
    </code>
  </pre>
</div>