小程序wxParse组件中的代码高亮修改

最近在进行博客的小程序开发，需要用到Html转Wxml的组件，我们采用的是https://github.com/csonchen/wxParse开发的组件，原作者已经集成了代码高亮解析组件，作者定义的数据格式如下：

<pre>
  <code lang="javascript">
    const name = 'csonchen'
  </code>
</pre>

而在layui中关于代码修饰是这么定义的（文档）：

<pre class="layui-code" lay-title="" lay-height="" lay-skin="" lay-encode="">
这样有木有觉得更方便些
</pre>  

如何来统一这两种数据定义呢？ 

答案肯定是修改部分内容。

我们先统一数据格式，我们以layui的数据为准，在此基础是我们再添加一个layui-lang属性，来定义当前插入代码所对应的开发语言。

1、修改components/wxParse/utils/htmparse.js文件

在第13行插入

var codeTag2= /^([\s\S]*?)<\/pre>/

然后在第80行插入如下代码 

if(tagName==='pre'){
  var codeTagMatch = html.match(codeTag2)
  codeContent = codeTagMatch[1] || ''
}

2、修改components/wxParse/wxs/wxParse.wxml

在第21行添加如下代码 

<block wx:elif="{{item && item.tag == 'pre' && item.classStr == ('layui-code')}}">
  <view class="{{item.classStr}}" style="{{item.styleStr}}">
    <highLight codeText="{{item.content}}" language="{{item.attr && item.attr['lay-lang']}}" />
  </view>
</block>

好了，大功造成。