微信小程序实现代码高亮

• 预览

  老规矩，先上效果图。
  
  看起来效果还不错，实名感谢 日出一点一 这位小哥的教程。
  因为，当搜索 微信小程序实现代码高亮 后，结果基本都是 微信小程序搜索，关键词高亮 这一类的。Onz ，这可真是在为难我胖虎啊。对于我这种 CV 大神来说，难度高于改参数的，一律送到山西挖煤。在我左右对比，上下查找，熬高珍贵的发际线后，选择了小哥的教程。

  ---

  言归正传，接着上一篇的两种文本转化方式中说起，单从效果上看，towxml 的感觉要更好一些，于是，开始了从转化函数那里入手，也就是上篇中提到的：

  看了一下，应该是因为 html 类型转换时比 markdown 少了一个高亮转换。

  然后，不出所料地失败了。里面的参数配置，方法对象，看得我头凉痘痘涨。在食之无力，弃之可惜的情形下，我去了原项目的 github 下，提交出了人生的第一个 issue , 以为要石沉大海的10个小时后，作者给了我个回复。
  
  …巧就巧在，我的文本格式和 highlight.js 的格式并不一样，对比如下：

  <code class="hljs python"></code>  //高亮格式
  
  <code class="language-python hljs"></code>  //我的文本格式
  

  不就是多了个 language- 么，我用 replace 把你替换掉不就行了吗？
  豁然开朗，简单明了，像极了学霸帮我们解题时的 ‘因为这样， 所以就可以得出结果’。
  实际操作后，emmm…
  好吧，我放弃了，因为在左看右看之后，不知从哪下手，还有就是，我是真的没有找到源码中对 html 文本的
  代码高亮操作。(大概是水平太差吧，心塞…没变强就开始秃了)

  towxml 就这样结束了，无功而返。
  其实好好改改应该能改好的，因为源码中 highlight 中传入参数 code lang 就行，不过后来使用了 wxParse 解决了，就没去再用 towxml.

---

• wxParse 实现代码高亮

  在上一篇中我们讲了怎样修改转换方法，使 <code> 标签下的代码可以实现换行。
  然后，结合本文开头的那篇教程，我们一步一步地来是实现代码的高亮。

  1. 下载高亮插件

     去 Prism 选择要支持高亮的语言，然后下载对应的 prism.js 和 prism.css，
     把 prism.css 更名为 prism.wxss 后和 prism.js 一同放入同一个文件夹下,我放在了 highlight 文件夹下。

  2. 修改插件代码

     观察一下转换后的代码，<pre> 标签变成了 <view class="wxParse-pre"> ，所以，我们需要把 prism.wxss 下的 pre[class*="language-"] 标签全部替换成 .wxParse-pre。这时就实现了代码段的背景及基本样式。

     继续看，可以看到，我们的代码段是这样的 <code class="language-xxx hljs"></code> ，所以首先要遍历出文本中所有的 <code> 标签。

     //匹配 <code> 标签
     let tagArr = html.match(/<\/?code[^>]*>/g);
       if(tagArr