Loading... 1、引入highlight.js ```javascript npm install highlight.js ``` 2、 在main.js中引入 ```javascript // 引入 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中使用 ```javascript <div v-highlight> <pre> <code> cssYYDS JSYYDS vueYYDS reactYYDS </code> </pre> </div> ``` 最后修改:2022 年 08 月 20 日 © 允许规范转载 打赏 赞赏作者 微信 赞 1 如果觉得我的文章对你有用,请随意赞赏