引言
最近发现一些博客类小程序的开发者不懂得处理代码高亮细节问题，尤其是不懂得更新代码样式库和自动插入code标签。
I 文章代码高亮的实现
采用开源组件mp-html进行实现,高亮功能依赖于prismjs，默认配置中仅支持 html、css、clike、javascript 变成语言，如果想要更支持更多语言可去prismjs网站下载对应的 prism.min.js 和 prism.css 并替换 plugins/highlight/ 目录下的文件。
使用 HBuilder X 开发时，可以直接通过插件市场导入。
<view class="data-view"> <mp-html :tag-style="tag_style" :content="detailData.content.rendered" :container-style="container_style" selectable="true" > 内容疯狂加载ing...</mp-html> </view>
支持语言的样式库
https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+clike+javascript
1.1 mp-html的用法
- 小程序页面支持代码高亮
wxml
<mp-html content="{{html}" </mp-html>
符合以下pre格式的将被高亮
<!-- pre 中内含一个 code，并在 pre 或 code 的 class 中设置 language- -->
HBuilderX 2.5.5+ 可以通过 easycom 自动引入 https://github.com/jin-yufeng/mp-html
- Wordpress文章页面支持代码高亮
目前我的小程序是通过wordpress的API构建的，因此让文章页面支持代码高亮是很有必要的。
方法：wordpress主题引入mp-html 其他方法：推荐使用Code Prettify插件
1.2 更新支持语言样式库
mp-html组件 默认支持：html、css、c-like、js
通过更新PrismJS，来引入更多的样式库。https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+clike+javascript
II 自动插入代码块code标签
2.1 方式一：在得到文章数据之后使用正则添加code标签
小程序端实现自动插入代码块code标签<pre><code>，采用正则添加class
缺点：写死的语言样式库，
class="language-css"
.replace(/<code([\s\w"=\/\.:;]+)((?:(style="[^"]+")))/ig, '<code') .replace(/<code([\s\w"=\/\.:;]+)((?:(class="[^"]+")))/ig, '<code') .replace(/<code>/ig, '<code class="language-css">')
修正方式：优化正则添加class，如果已经存在特定语言的class，则不添加class。
2.2 方式二：在发布wp文章时自动插入代码块code标签
在发布wp文章时自动插入代码块code标签：推荐使用wp插件: WP Githuber MD
2.3 小结
不推荐在小程序侧自动插入代码块标签<pre><code>，推荐使用wp插件自动生成code标签，代码库的标签应该是发布wp文章时自动插入，而非在拿到接口数据之后强制写死css样式。
如果在拿到数据后自动插入code标签，不是写死特定语言样式，那样也是可以的。推荐一个自动插入标签的wp插件: WP Githuber MD
错误代码示例：
// 文章数据 posdData: function() { var that = this; uni.request({ url: API + '/wp-json/wp/v2/posts/' + that.posdCenterID, success: (res) => { that.detailData = res.data; that.posdCenterTitle = res.data.title.rendered; that.posTag = res.data.tags[0]; that.postID = res.data.id; // 赋值动态框 that.percent = 100; // 正则添加class that.contentDate = res.data.content.rendered .replace(/<h1([\s\w"=\/\.:;]+)((?:(style="[^"]+")))/ig, '<h1') .replace(/<h1([\s\w"=\/\.:;]+)((?:(class="[^"]+")))/ig, '<h1') .replace(/<h1>/ig, '<h1 class="h1">') .replace(/<h2([\s\w"=\/\.:;]+)((?:(style="[^"]+")))/ig, '<h2') .replace(/<h2([\s\w"=\/\.:;]+)((?:(class="[^"]+")))/ig, '<h2') .replace(/<h2>/ig, '<h2 class="h2">') .replace(/<h3([\s\w"=\/\.:;]+)((?:(style="[^"]+")))/ig, '<h3') .replace(/<h3([\s\w"=\/\.:;]+)((?:(class="[^"]+")))/ig, '<h3') .replace(/<h3>/ig, '<h3 class="h3">') .replace(/<h4([\s\w"=\/\.:;]+)((?:(style="[^"]+")))/ig, '<h4') .replace(/<h4([\s\w"=\/\.:;]+)((?:(class="[^"]+")))/ig, '<h4') .replace(/<h4>/ig, '<h4 class="h4">') .replace(/<h5([\s\w"=\/\.:;]+)((?:(style="[^"]+")))/ig, '<h5') .replace(/<h5([\s\w"=\/\.:;]+)((?:(class="[^"]+")))/ig, '<h5') .replace(/<h5>/ig, '<h5 class="h4">') .replace(/<h6([\s\w"=\/\.:;]+)((?:(style="[^"]+")))/ig, '<h6') .replace(/<h6([\s\w"=\/\.:;]+)((?:(class="[^"]+")))/ig, '<h6') .replace(/<h6>/ig, '<h6 class="h6">') .replace(/<code([\s\w"=\/\.:;]+)((?:(style="[^"]+")))/ig, '<code') .replace(/<code([\s\w"=\/\.:;]+)((?:(class="[^"]+")))/ig, '<code') .replace(/<code>/ig, '<code class="language-css">')
