HelloWorld

Designed & Developed By XingYu Xiao In China
头像 原创自 x先生 #前端插件 554

HighLight代码高亮插件

2020-02-01 01:37:32

在开发博客类等需要实现文章发表功能的项目时,我们往往会收到需要实现代码文本高亮的需求,此时,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://www.shiniest.cn/blog/article/29

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

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


0条评论


0/200
    加载更多 正在加载 没有更多了...... 暂无数据

    相关文章

    • 暂无数据
    目录
      来自x先生的话
      暂无数据
      实时天气

      岳麓 更新时间:01:11

      8℃

      • 7℃

        体感温度

      • 东北风1级

        风向

      • 90%

        相对湿度

      • 0.0mm

        降水量

      • 1021hPa

        大气压强

      • 5km

        能见度

      数据来源:QWeather
      热门标签
      本功能暂未开发