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

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

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

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

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

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

<link href="http://cdn.bootcss.com/highlight.js/8.0/styles/monokai_sublime.min.css" rel="stylesheet">  
<script src="http://cdn.bootcss.com/highlight.js/8.0/highlight.min.js"></script>

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

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

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

<div class="content" v-html="blog.bcontext" v-highlight> </div>

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

 

说明：

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

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

 

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

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

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

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

CND： https://www.bootcdn.cn/

highlight ：https://highlightjs.org/?snippet=12&style=5 

参考：https://www.jianshu.com/p/6c1e4fcc6d6f