如何在微信小程序中解析Markdown

最新推荐文章于 2025-07-14 09:00:09 发布

原创最新推荐文章于 2025-07-14 09:00:09 发布 · 2.1k 阅读

CC 4.0 BY-SA版权

文章标签：

我的微信小程序——心情记录员在记录完心情后回返回AI给的建议，这个建议的文本其实是markdown的语法，现在基本上所有的的AI大模型返回的内容都是markdown格式的，基于这个原因我需要将返回的内容解析为用户看起来友好的内容，例如加粗、列表等。
经过查询，我准备使用一个开源的项目——Towxml。Towxml 是一个可将HTML、Markdown转为微信小程序WXML(WeiXin Markup Language)的渲染库。用于解决在微信小程序中Markdown、HTML不能直接渲染的问题。

功能特点

Towxml 3.0 完整支持以下功能。当然在构建时可仅保留需要功能以减少体积大小和代码依赖。

支持echarts图表（3.0+）✨
支持LaTex数学公式（3.0+）✨
支持yuml流程图（3.0+）✨
支持按需构建（3.0+）✨
支持代码语法高亮、代码块行号显示
支持emoji表情😉
支持上标、下标、下划线、删除线、表格、视频、图片（几乎绝大部分html元素）……
支持typographer字符替换
支持多主题切换
支持Markdown TodoList
支持事件绑定（这样允许自行扩展功能哟，例如：点击页面中的某个元素，更新当前页面内容等…）
极致的中文排版优化
支持前后解析数据
上面的介绍来自项目的 README 。更多消息内容可以点击查看：https://github.com/sbfkcel/towxml

如何使用

构建

由于我这次的目的只是用来解析 Markdown，因此接下来只记录如何使用 Towxml 解析和渲染 Markdown格式的内容，其他例如：HTML、图表等内容暂时不做介绍，如果后续有涉及到这些功能时再完善。
首先我们将该项目 clone 下来，需要说明的是我使用的是3.0版本，2.0体积较大就不使用，3.0是需要根据自己需要进行构建的。

克隆项目

git clone https://github.com/sbfkcel/towxml.git

构建依赖

npm install

编辑配置文件 towxml/config.js，根据自己的需求注释掉不需要的内容
运行 npm run build 完成构建
构建出来的文件在 dist文件夹中，将该文件夹复制粘贴到微信小程序项目中，并将其命名为toxml即可。

使用

将构建出来的 dist 文件夹粘贴到项目根目录下，并命名为 towxml.

将其引入 /app.js

//app.js
App({
	// 引入 toxml3.0解析方法
	towxml: require('/towxml/index')
})

在页面配置文件中引入 towxml组件

{
  "usingComponents": {
    "towxml":"/towxml/towxml"
  }
}

在页面中插入组件

<!--index.wxml-->
<view class="container">
  <towxml nodes="{{article}}"/>
</view>

解析内容并使用

const app = getApp();
Page({
	data: {
		isLoading: true,
		aticle: {}
	},

	onLoad(){
		let result = app.towxml(`# Markdown`, 'markdown', {
			base: 'https://www.huhailong.vip',
			theme: 'dark',
			events: {
				tap: (e) => {
					console.log('tap', e);
				}
			}
		});
		//更新解析数据
		this.setData({
			article: result,
			isLoading: false
		})
	}
})

参数解析
app.towxml(str, type, options) 有三个参数

str必选，html或markdown字符串
type必选，需要解析的内容类型，html或markdown
options可选，可以通过该属性设置主题、绑定事件、设置静态资源路径等
- base：用于指定静态相对资源路径。例如：https://www.huhailong.vip
- theme：主题，默认 light，还可以设置 dark，或者自定义
- event：绑定事件。key 为事件名，value必须是一个函数