推荐微信小程序markdown解析库-towxml
发布于 4 年前 作者 na67 4840 次浏览 来自 分享

开源地址:https://github.com/sbfkcel/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 必选,需要解析的内容类型htmlmarkdown
  • options [object] 可选,可以该选项设置主题绑定事件设置basebase [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代码高亮,默认开启(默认仅开启bashjavascriptjsonpythonhtmlcssphpscssshell),其它语言高亮支持需自行构建以开启
回到顶部