Towxml 是一个可将HTML、Markdown转为微信小程序WXML(WeiXin Markup Language)的渲染库。

小程序富文本的插件有很多，那我们先来看看这个富文本的特点吧！支持代码语法高亮

• 支持emoji表情

• 支持上标、下标、下划线、删除线、表格、视频、图片（几乎所有html元素）……

• 支持typographer字符替换

• 多主题动态支持

• 极致的中文排版优化

• Markdown TodoList

• 支持事件绑定（这样允许自行扩展功能哟，例如：点击页面中的某个元素，更新当前页面内容等...）

• 前后端支持

五步正确使用towxml

（一）克隆TOWXML到小程序根目录

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

（二）在小程序app.js中引入库

//app.js
  const Towxml = require('/towxml/main');     //引入towxml库
  App({    
      onLaunch: function () {
    },
    towxml:new Towxml()                     //创建towxml对象，供小程序页面使用
    })

（三） 在小程序页面文件中引入模版

<!--pages/index.wxml-->
<!--引入towxml模版入口文件，并使用模版-->
<import src="/towxml/entry.wxml"/>
<template is="entry" data="{{...article}}"/>

（四）在小程序对应的js中请求数据

//pages/index.jsconst app = getApp();Page({
    data: {        //article将用来存储towxml数据
        article:{}
    },    
    onLoad: function () {        
    const _ts = this;        //请求markdown文件，并转换为内容
        wx.request({
            url: 'http://xxx/doc.md',
            header: {                
            'content-type': 'application/x-www-form-urlencoded'
            },            
            success: (res) => {                //将markdown内容转换为towxml数据
                let data = app.towxml.toJson(res.data,'markdown');                //设置文档显示主题，默认'light'
                data.theme = 'dark';                //设置数据
                _ts.setData({
                    article: data
                });
            }
        });
    }
})

（五） 引入对应的WXSS

/**pages/index.wxss**/
/**基础风格样式**/
@import '/towxml/style/main.wxss';
/**如果页面有动态主题切换，则需要将使用到的样式全部引入**/
/**主题配色（浅色样式）**/
@import '/towxml/style/theme/light.wxss';
/**主题配色（深色样式）**/
@import '/towxml/style/theme/dark.wxss';

注：如果你的富文本是展示的代码，那么本人建议用这个插件，亲测效果很不错，而本博客中的另一篇文章wxparse则对文中出现代码的解析就不那么尽人意了。

具体效果可以查看以该插件解析富文本的博客小程序；