裴大头-秦可爱

裴大头-秦可爱

说一下如何让若依的富文本编辑器中的代码块高亮

发表于 2021-05-09
裴大头
阅读量 498
更新于 2021-05-26

首先若依是用的是quill,默认是没有高亮的,如图

image.png

所以没有高亮的代码块属实不舒服,我们可以引入highlight.js =》点击进入官网

image.png

接下来就是如何引入highlight.js

1、安装依赖

npm install highlight.js 
js

2、引用

在main.js或者固定组件中引入

import hljs from 'highlight.js'
js

样式可以自由选择=》查看各种样式

添加自定义指令(==注意这个地方是pre,不是pre code==)

Vue.directive('highlight', (el) => {
    let blocks = el.querySelectorAll('pre');
    blocks.forEach((block)=>{
        hljs.highlightBlock(block)
    })
});
js

3、在需要的地方使用

<div class="one" v-highlight></div>

js

好了,这样就代码块就有高亮效果了!!! image.png

评论
来发一针见血的评论吧!
表情
  • 凡蜕博客

    2021-05-20 09:37

    我用的prism.js,感觉更漂亮

    0
    回复
    • 裴大头

      男博主

      2021-05-20 09:39

      @凡蜕博客感谢建议,我这就去试试😁

      0
      回复
    • 共1条回复,点击查看
  • 王路飞

    2021-05-11 10:59

    不错不错

    0
    回复
      共0条回复,点击查看
推荐文章
  • Vue项目代码规范

    1点赞1评论

  • JavaScript 的事件循环机制

    1点赞1评论

  • 聊一聊我的文本编辑器

    1点赞11评论

  • JavaScript的常用遍历方法整理

    1点赞8评论

  • 前端面试精选-基础篇

    1点赞0评论

Crafted with by Pei你看雪

小破站居然运行了 865 天访客 23357

© 2023 Pei你看雪鲁ICP备19037910号-2