推荐微信小程序markdown解析库-towxml
使用方法如下:
1. 将构建出来的towxml
并解压至小程序项目根目录下,即(小程序/towxml
)
2. 引入库/app.js
//app.js
App({
// 引入`towxml3.0`解析方法
towxml:require('/towxml/index')
})
3. 在页面配置文件中引入towxml组件 /pages/index/index.json
{
"usingComponents": {
"towxml":"/towxml/towxml"
}
}
4. 在页面中插入组件/pages/index/index.wxml
<!--index.wxml-->
<view class="container">
<towxml nodes="{{article}}"/>
</view>
5. 解析内容并使用/pages/index/index.js
//获取应用实例
const app = getApp();
Page({
data: {
isLoading: true, // 判断是否尚在加载中
article: {} // 内容数据
},
onLoad: function () {
let result = app.towxml(`# Markdown`,'markdown',{
base:'https://xxx.com', // 相对资源的base路径
theme:'dark', // 主题,默认`light`
events:{ // 为元素绑定的事件方法
tap:(e)=>{
console.log('tap',e);
}
}
});
// 更新解析数据
this.setData({
article:result,
isLoading: false
});
}
})
API
app.towxml(str,type,options)
有三个参数
str
必选,html或markdown字符串type
必选,需要解析的内容类型html
或markdown
options
[object] 可选,可以该选项设置主题
、绑定事件
、设置base
等base
[string] 可选,用于指定静态相对资源的base路径。例如:https://xx.com/static/
theme
[string] 可选,默认:light
,用于指定主题'light'或'dark',或其它自定义events
[object] 可选,用于为元素绑定事件。key
为事件名称,value
则必须为一个函数。例如:{tap:e=>{console.log(e)}}
构建
考虑到并不是所有人都需要用到,默认只开启部分功能,可自行构建以开启对应功能。
towxml3.0 支持以下功能:
- echarts图表,默认禁用,需自行构建以开启此功能
- LaTeX数学公式,默认禁用,需搭建解析服务并自行构建以开启此功能
- yuml图表,默认禁用,需要搭建解析服务并自行构建以开启此功能
- highlight代码高亮,默认开启(默认仅开启
bash
、javascript
、json
、python
、html
、css
、php
、scss
、shell
),其它语言高亮支持需自行构建以开启