HighLight代码高亮插件

前端插件

2020年02月01日 01:37:321529

在开发博客类等需要实现文章发表功能的项目时,我们往往会收到需要实现代码文本高亮的需求,此时,HighLight代码高亮插件就派上用场了。本文主要介绍如何在Vue-Cli项目中使用HighLight代码高亮插件。

1.获取HighLight代码高亮插件

打开cmd,进入到项目根目录,键入以下代码,安装HighLight代码高亮插件。

npm install highlight.js --save

2.在main.js中引入HighLight代码高亮插件

//代码高亮插件
import hljs from 'highlight.js';
import 'highlight.js/styles/atom-one-dark.css';

3.在main.js中定义自定义指令

//自定义指令
Vue.directive('highlight',function (el) {
    let blocks = el.querySelectorAll('pre code');
    blocks.forEach((block)=>{
        hljs.highlightBlock(block)
    })
})
//自定义指令应定义在new Vue()方法之前 
new Vue({
    router,
    render: function(h) {
        return h(App)
    }
}).$mount('#app')

4.在需要使用代码高亮的地方添加自定义指令

示例:

<span>
    <pre>
        <code v-highlight>{{code_text}}</code>
    </pre>
</span>


赞 33
收藏
分享

本作品系 原创,作者:x先生

原文链接:https://shiniest.cn/blog/article/29

文本版权:文本版权归作者所有

转载需著名并注明出处(禁止商业使用)

评论和回复

0/500
    没有更多啦~
    怎么一条数据都没有呢?