vue 中 wangeditor3 使用highlight 代码高亮【最新解读】

分手后的思念是犯贱 2022-04-14 04:59 854阅读 0赞

## 目的：vue 中 wangeditor3 使用highlight 代码高亮 ##

很遗憾，在我花了2个时间研究这个问题之后得出的结论是，无法完成。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70][]

# 办法总是人想出来的嘛，最后也终是被我给解决了。  #

为了更方便读者去操作，先直接给出解决办法。

**第一步：在index.html 里面引入下面的代码。**

**第二步：在 main.js 插入下面代码。**

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

**第三步：在你使用的地方加入下面的标签  v-highlight**

做完上面三步你的 代码部分就会出现高亮了。

# 说明： #

Q ：为什么不使用 npm/cnpm 去安装 highlight

A ： 因为这里引用的 js 和 css bootstrap中文网提供了开源免费的 CDN 加速服务。相对于 cnpm 我觉得这样更简单。（下面会给出地址）

Q ： 可以选择自己喜欢的 代码风格 嘛?

A : 当然可以了，其实这个代码风格主要取决于那个 css，只要我们导入自己想要的css，就可以改变代码的风格了。

第一步：我们可以去 highlight 官网去调试自己喜欢的代码风格。 （下面会给出地址）

第二步：去 bootstrap CDN加速官网找到相对应的 css，引用到自己的代码中去。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70 1][]

CND： [https://www.bootcdn.cn/][https_www.bootcdn.cn]

highlight ：[https://highlightjs.org/?snippet=12&style=5][https_highlightjs.org_snippet_12_style_5]

参考：[https://www.jianshu.com/p/6c1e4fcc6d6f][https_www.jianshu.com_p_6c1e4fcc6d6f]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70]: /images/20220414/1af170eddd1a4d3b9efaae9f0c279283.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70 1]: /images/20220414/9cfed28006e3412ab63484c072852858.png
[https_www.bootcdn.cn]: https://www.bootcdn.cn/
[https_highlightjs.org_snippet_12_style_5]: https://highlightjs.org/?snippet=12&style=5
[https_www.jianshu.com_p_6c1e4fcc6d6f]: https://www.jianshu.com/p/6c1e4fcc6d6f