裴大头-秦可爱

裴大头-秦可爱

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

发表于 2021-05-09
裴大头
阅读量 567
更新于 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

推荐文章
  • JavaScript 的事件循环机制

    1点赞1评论

  • Vue项目代码规范

    1点赞1评论

  • Java 23种设计模式——单例模式(Singleton)

    0点赞1评论

  • 聊一聊我的文本编辑器

    1点赞11评论

  • Element UI 级联选择器 el-cascader 实现懒加载和搜索功能

    1点赞0评论

Crafted with by Pei你看雪

小破站居然运行了 931 天访客 25424

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