【小程序制作之旅】完美支持 Markdown 看这一篇就够了，超详细教程
博主小程序体验 | 博主公众号分享
在我做自己小程序的时候有些文字描述、详情等等想用Markdown展示，但是发现微信小程序在支持Markdown方面不是很友好，于是就在 github 上找到了一款超好用的组件，Twoxml，完美支持Markdown,下面就记录一下小程序集成 twoxml 的过程分享一下！Towxml 介绍
Towxml 是一个轻量级的 Markdown 渲染引擎，主要用于将 Markdown 格式的文本转换为 HTML 内容。它特别适合用于微信小程序、H5 应用等场景，可以方便地展示各种格式的文本，包括标题、列表、图片、链接等。
主要特点
- 简单易用：使用 Towxml 可以轻松地将 Markdown 文本渲染为可视化的内容。
- 支持多种 Markdown 语法：如标题、列表、粗体、斜体、引用、代码块等。
- 扩展性：用户可以根据需要进行自定义扩展，比如添加新的 Markdown 语法或样式。
- 高性能：专为小程序和移动端设计，渲染性能较高，能快速响应用户操作。
- 样式灵活：可以通过 CSS 自定义渲染后的 HTML 的样式，使其更符合应用的设计需求。
使用场景
- 博客或文档：适合用于展示技术文档、博客文章等。
- 小程序开发：在微信小程序中展示 Markdown 格式的内容。
- H5 页面：用于网页中的文本内容展示。
Towxml 是一个实用的工具，特别适合开发者在需要 Markdown 渲染的场合使用。如果你需要快速地将 Markdown 文本展示为 HTML 内容，Towxml 是一个不错的选择。
Towxml 特色
Towxml 截图效果
Towxml 文档
Towxml 官网：
https://github.com/sbfkcel/towxml
Towxml 如何使用：
https://github.com/sbfkcel/towxml/wiki/3.0-%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8
小程序中引入 Twoxml
1、首先下载 twoxml
// clone twoxml 仓库 git clone https://github.com/sbfkcel/towxml.git // 进入文件夹 cd towxml // 安装依赖 npm install // 构建 npm run build- 2、构建完成后，找到
dist文件夹改名为towxml,方便识别，然后复制到小程序的/miniprogram/路径下与pages等目录同级
图片
3、在小程序的app.ts中引入
towxml// app.ts App<any>({ globalData: {}, towxml: require('/towxml/index'), })4、在需要使用 md 的页面使用
JSON 文件
{ "usingComponents": { "towxml":"/towxml/towxml" } }wxml 文件
<!--index.wxml--> <view class="container"> <towxml nodes="{{md}}" /> </view>ts 文件
//获取应用实例 const app = getApp(); Page({ data: { md: {}// md 内容 }, })
towxml 接口获取md内容渲染
// 获取markdown文本
getText: (url, callback) => {
wx.request({
url: url,
header: {
'content-type': 'application/x-www-form-urlencoded'
},
success: (res) => {
if (typeof callback === 'function') {
callback(res);
};
}
});
},
onLoad: function () {
// 获取文本，第一个参数指向后端的文件地址（你需要起一个后端）
this.getText('http://127.0.0.1:8080/test.md', res => {
// 回调函数中完成更新数据的逻辑
let result = app.towxml(res.data, 'markdown',{
base:'https://xxx.com',
theme:'light',
events:{
tap:(e)=>{
console.log('tap',e);
}
}
});
// 更新解析数据
this.setData({
md:result
});
})
}towxml 详细讲解一下如何渲染项目中自己写的 md 内容(因为我是自己开发的，并没有后端，想把内容直接写在项目中)
1、在项目中创建个 md-txt.ts，然后使用模板字符串写自己的 md 内容，如下：
export const mdTxt = ` ## 测试 towxml 渲染 md title > 使用方法 > > **简单易用** `重点：在字符串模板中其他的都好说，字符串随便写，如果要渲染 代码，就需要一下方法了，将
(`)转义一下才可以。如下export const mdTxt = ` ## 渲染 code 方法, 如下 \`\`\`html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> </head> <body> </body> </html> <script> </script> \`\`\` `2、引入 mdText，并赋值
import { mdTxt } from "./md-txt"; const app = getApp(); data: { md: {} }, /** * 生命周期函数--监听页面加载 */ onLoad() { const result = app.towxml(mdTxt, 'markdown', { theme: 'dark', // 主题，默认`light` events: { // 为元素绑定的事件方法 tap: (e: any) => { console.log('tap', e); } } }); // 更新解析数据 this.setData({ md: result, }); },
总结
使用Towxml来实现markdown其实比较简单，方便快捷，网上也可以搜到具体使用方法，但是问什么我还要写这一篇文章，就是因为想把内容直接写在项目中，并且用模板字符串的方式渲染 md ，当时碰到 在模板字符串中用md 语法写 代码的时候碰到的这个问题，想着就把他总结下来。
分享，非独使他人明晰，更为自身升华之途
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。