在微信小程序中渲染 Markdown 内容，可以使用一些现成的组件和库，如 `Towxml`和`Comi`。这些工具可以将 Markdown 转换为小程序支持的 WXML 格式，并支持代码高亮等功能。
在微信小程序中渲染Markdown内容，可以使用一些现成的组件和库，如Towxml和Comi。这些工具可以将Markdown转换为小程序支持的WXML格式，并支持代码高亮等功能。
使用 Towxml 渲染 Markdown
步骤1：引入Towxml库
首先，克隆Towxml项目并安装依赖：
git clone https://github.com/sbfkcel/towxml.git
cd towxml
npm install
npm run build
将构建后的dist目录复制到小程序项目根目录，并重命名为towxml。
步骤 2：在小程序中使用Towxml
在app.js中引入Towxml：
App({
towxml: require('/towxml/index')
})
在页面的JSON配置文件中添加组件引用：
{
"usingComponents": {
"towxml": "/towxml/towxml"
}
}
在WXML文件中插入组件：
<view class="content-info">
<towxml nodes="{{article}}" />
</view>
在JS文件中解析并设置内容：
const app = getApp();
Page({
data: {
article: {}
},
onLoad: function () {
app.getText('https://example.com/markdown.md', res => {
let result = app.towxml(res.data, 'markdown', {
theme: 'light',
events: {
tap: e => console.log('tap', e)
}
});
this.setData({
article: result
});
});
}
});
使用Comi渲染 Markdown
步骤 1：引入Comi库
将Comi库文件复制到项目中：
const comi = require('../../comi/comi.js');
Page({
onLoad: function () {
comi(`你要渲染的 md！`, this);
}
});
步骤 2：在小程序中使用Comi
在WXML文件中包含Comi模板：
<include src="../../comi/comi.wxml" />
在WXSS文件中引入样式：
@import "../../comi/comi.wxss";
通过以上步骤，可以轻松地在微信小程序中实现Markdown内容的渲染和代码高亮功能。
参考：
