让小程序支持代码高亮
对于编程技术类的小程序来说，在文章会有很多代码，那么代码高亮就是一个文章显得很出色的需求了。代码高亮功能的实现，主要是依靠小程序里对富文本内容的解析。对于富文本解析，微慕小程序专业版以前采用的开源的wxParse组件，但这个组件不支持代码高亮，且二次开发的难度较大。从微慕小程序专业版v3.8.0开始引入了mp-html组件，该组件提供对代码高亮显示的支持。
【让小程序支持代码高亮】在小程序里通过mp-html实现代码高亮方式如下：
1.在小程序里引入mp-html
将mp-html的源码中对应平台的代码包（dist/platform）拷贝到 components 目录下，更名为 mp-html
在需要使用页面的 json 文件中添加如下代码：
{
"usingComponents": {
"mp-html": "/components/mp-html/index"}
}
JSON
2.在小程序里使用mp-html
1.在需要使用页面的 wxml 文件中添加
HTML
2.在需要使用页面的 js 文件中添加
Page({
onLoad () {
this.setData({
html:'Hello World!'
})}
})
JavaScript
3.在mp-html里引入代码高亮highlight插件
在mp-html的源代码里tools/config.js 中的 plugins 中启用highlight插件，设置完成后，可通过项目提供的命令行工具生成新的组件包。
编辑 plugins/highlight/config.js ，可以选择是否需要以下功能：
copyByLongPress 是否需要长按代码块时显示复制代码内容菜单
showLanguageName 是否在代码块右上角显示语言的名称
showLineNumber 是否在左侧显示行号
引入本插件后，html 中符合以下格式的 pre 将被高亮处理：
p { color: red }
HTML
本插件的高亮功能依赖于prismjs，默认配置中仅支持 html、css、c-like、javascript 变成语言，如果需要更多语言下需要去prismjs网站下载对应的 prism.min.js 和 prism.css 并替换 plugins/highlight/ 目录下的文件。
目前微慕专业版小程序里代码高亮支持的编程语言是TIOBE排名前20的编程语言，比如C 、Java、Python 、C++、C Sharp、PHP等。
4.在wordpress里文章页面支持代码高亮
微慕小程序是通过wordpress的api构建的，因此如果在wordpress文章页面也同时支持代码高亮就完美了，做到这个其实比较简单，只要把mp-html目录下plugins/highlight/prism.min.js 和 prism.css 引入到wordpress的主题模板即可。
如果在wordpress的文章里代码高亮支持：显示行号，复制代码，显示语言，可以去prismjs下载相应的插件。
1.显示编程语言的prismjs插件：https://prismjs.com/plugins/s...
2.显示行号的prismjs插件：https://prismjs.com/plugins/l...
3.复制代码的prismjs插件：https://prismjs.com/plugins/c...
下载上述插件后，引入到wordpress主题里，在code 便签里加入data-prismjs-copy 和data-prismjs-copy-success，就可以支持上述三个功能了。
示例代码如下：
class="language-html line-numbers"
data-prismjs-copy="复制代码"
data-prismjs-copy-success="代码已复制">
推荐阅读
- 一个小故事，我的思考。
- 家乡的那条小河
- 一个人的碎碎念
- 野营记-第五章|野营记-第五章 讨伐梦魇兽
- 昨夜小楼听风
- 2021-02-17|2021-02-17 小儿按摩膻中穴-舒缓咳嗽
- 诗歌:|诗歌: 《让我们举起世界杯，干了！》
- 基于微信小程序带后端ssm接口小区物业管理平台设计
- 2019.4.18感恩日记
- 那件我们忽略的小事叫感恩