首页 > 建站教程 > 前端框架 >  vue使用highlight.js高亮代码正文

vue使用highlight.js高亮代码

highlight.js是一款非常不错的高亮插件,我爱模板网之前写过“dedecms kindeditor编辑器UTF8和SyntaxHighlighter代码高亮”的文章,这次,是要将highlight.js用在vue中。网上有很多这方面的介绍,但大多要么有问题,要么不全面。下面开始吧:

1、安装highlight.js
npm install highlight.js --save
2、封装一个指令,这样使用起来更加方便:
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/

最终效果图: