1、安装highlight.js
npm install highlight.js --save2、封装一个指令,这样使用起来更加方便:
import Hljs from 'highlight.js'; // 代码高亮风格,可以在node_modules/hightlight.js/styles/目录下找到更多的风格样式 import 'highlight.js/styles/github-dark-dimmed.css'; let Highlight = {}; Highlight.install = function (Vue) { // 自定义指令 v-highlight Vue.directive('highlight', { // 被绑定元素插入父节点时调用 inserted: function(el) { let blocks = el.querySelectorAll('pre code'); for (let i = 0; i < blocks.length; i++) { Hljs.highlightBlock(blocks[i]); } }, // 指令所在组件的 VNode 及其子 VNode 全部更新后调用 componentUpdated: function(el) { let blocks = el.querySelectorAll('pre code'); for (let i = 0; i < blocks.length; i++) { Hljs.highlightBlock(blocks[i]); } } }) }; export default Highlight;新建highlight.js文件,将上面的代码放入。
3、在src/main.js引入上面自定义的指令:
import Highlight from '@/directive/highlight.js'; // 这里的路径根据实际情况 Vue.use(Highlight);4、使用
<div id="codeView" v-highlight> <pre><code class="language-xml" v-text="xmlContent" /></pre> </div>这里的code的class="language-xml",就是要高亮的语言,根据需求,可能是language-html等,详见官网:https://highlightjs.org/usage/
最终效果图: