关于小程序:让小程序支持代码高亮

29次阅读

共计 1657 个字符,预计需要花费 5 分钟才能阅读完成。

对于编程技术类的小程序来说,在文章会有很多代码,那么代码高亮就是一个文章显得很杰出的需要了。代码高亮性能的实现,次要是依附小程序里对富文本内容的解析。对于富文本解析,微慕小程序专业版以前采纳的开源的 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 文件中增加

<mp-html content=”{{html}}”></mp-html>
HTML
2. 在须要应用页面的 js 文件中增加

Page({
onLoad () {

this.setData({html:'<div>Hello World!</div>'})

}
})
JavaScript
3. 在 mp-html 里引入代码高亮 highlight 插件
在 mp-html 的源代码里 tools/config.js 中的 plugins 中启用 highlight 插件,设置实现后,可通过我的项目提供的命令行工具生成新的组件包。

编辑 plugins/highlight/config.js,能够抉择是否须要以下性能:

copyByLongPress 是否须要长按代码块时显示复制代码内容菜单
showLanguageName 是否在代码块右上角显示语言的名称
showLineNumber 是否在左侧显示行号

引入本插件后,html 中合乎以下格局的 pre 将被高亮解决:

<!– pre 中内含一个 code,并在 pre 或 code 的 class 中设置 language –>
<pre>
p {color: red}
</pre>
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,就能够反对上述三个性能了。

示例代码如下:

<pre><code
class=”language-html line-numbers”
data-prismjs-copy=” 复制代码 ”
data-prismjs-copy-success=” 代码已复制 ”>
</pre>

正文完
 0