towxml的使用,在微信小程序中快速将markdown格式渲染为wxml文本
towxml的使用,在微信小程序中快速将markdown格式渲染为wxml文本
- Towxml概述
- 安装下载 Towxml
- 在小程序中使用 towxml
Towxml概述
towxml3.0 支持以下功能:
● echarts图表,默认禁用,需自行构建以开启此功能
● LaTeX数学公式,默认禁用,需搭建解析服务并自行构建以开启此功能
● yuml图表,默认禁用,需要搭建解析服务并自行构建以开启此功能
● highlight代码高亮,默认开启(默认仅开启bash、javascript、json、python、html、css、php、scss、shell),其它语言高亮支持需自行构建以开启
安装下载 Towxml
- 先使用命令克隆到本地中(使用git进行安装)
git clone https://github.com/sbfkcel/towxml.git
- 对克隆的下的文件进行依赖安装和npm重构
npm install # 安装依赖
npm run build # npm 重构

构建完成后,会在当前的目录中生成一个dist目录(按照提示找到对应的文件夹),然后将其拷贝到微信小程序项目中(根下),重命名为towxml即可。

在小程序中使用 towxml
- 引入towxml库到 App.js中
// app.js
App({towxml: require('./towxml/index'),onLaunch() {},
})
- 在具体页面的配置文件中引入towxml组件
注意:这里的组件路径根据自己的页面去找相对路径。
{"usingComponents": {"towxml": "../../towxml/towxml"}
}
- 在wxml页面中使用towxml组件
<view class="content-info"><towxml nodes="{{article}}"/>
</view>
- 在具体页面的js中对需要进行markdown转换wxml的业务进行处理解析
下面是官方给出的例子:
//获取应用实例
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});}
})
其实就是调用app.towxml(str,type,options)函数:
const app = getApp(); // 应用实例
Page({// ....onLoad:function(){// 这是一个伪代码let 解析的结果 = app.towxml('想要被解析的数据','markdown',[options])}
})
其中的options选项都是可选的,可以一个都不加,选项说明如下:
app.towxml(str,type,options)有三个参数
● str 必选,html或markdown字符串
● type 必选,需要解析的内容类型html或markdown
● options [object] 可选,可以该选项设置主题、绑定事件、设置base等
○ base [string] 可选,用于指定静态相对资源的base路径。例如:https://xx.com/static/
○ theme [string] 可选,默认:light,用于指定主题’light’或’dark’,或其它自定义
○ events [object] 可选,用于为元素绑定事件。key为事件名称,value则必须为一个函数。例如:{tap:e=>{console.log(e)}}
5. 页面显示效果

相关文章:
towxml的使用,在微信小程序中快速将markdown格式渲染为wxml文本
towxml的使用,在微信小程序中快速将markdown格式渲染为wxml文本 Towxml概述安装下载 Towxml在小程序中使用 towxml Towxml概述 towxml3.0 支持以下功能: ● echarts图表,默认禁用,需自行构建以开启此功能 ● LaTeX数学公式&#…...
项目管理实战总结(一)-沟通路径问题
前言 那是2021年春节之后,我决定主动申请参与到这个项目,是知道工作强度大、难度大的情况的。有很多的同事是想躲,而我是明知山有虎偏向虎山行。我确定,通过这个项目,一定有我需要的东西。现在项目已经完成了终验专家…...
UE5场景逐渐变亮问题
1、显示 -- 关闭眼部适应 2、项目设置 -- 关闭自动曝光 参考: 虚幻5/UE5 场景亮度逐渐变亮完美解决方法 - 哔哩哔哩...
VM16Pro的Win10虚拟机安装Linux子系统Kali
VM16Pro的Win10虚拟机安装Linux子系统Kali 一、启用Windows功能二、配置WSL三、安装Kali四、安装kali基本工具包五、图形化六、适用的报错七、其他问题参考 一、启用Windows功能 启用后需重启二、配置WSL wsl --update #管理员启动Powershell执行,完成后将下面…...
C++中类的声明
C中类的声明 假设您要编写一个模拟人(如您自己)的程序。人有其特征:姓名、出生日期、出生地和性别(这些信息让每个人都是独一无二的),还能做某些事情,如交谈、自我介绍等。 要在程序中模拟人&…...
IDEA常用AI插件
只推荐免费的 一、对话式AI 1. ChatGPT GPT-4 - Bito AI Code Assistant ChatGPT GPT-4 - Bito AI Code Assistant 插件地址:https://plugins.jetbrains.com/plugin/18289-chatgpt-gpt-4–bito-ai-code-assistant支持自定义prompt支持解释代码支持生成代码注释支持…...
【LeetCode】每日一题最后一个单词的长度投票法求解多数元素异或操作符巧解只出现一次的数字整数反转
个人主页直达:小白不是程序媛 LeetCode系列专栏:LeetCode刷题掉发记 目录 LeetCode 58.最后一个单词的长度 LeetCode169.多数元素 LeetCode 136.出现一次的数字 LeetCode 7.整数反转 LeetCode 58.最后一个单词的长度 难度:简单 OJ链接…...
自然语言处理---注意力机制
注意力概念 观察事物时,之所以能够快速判断一种事物(当然允许判断是错误的),是因为大脑能够很快把注意力放在事物最具有辨识度的部分从而作出判断,而并非是从头到尾的观察一遍事物后,才能有判断结果。正是基于这样的理论…...
目标检测YOLO实战应用案例100讲-基于改进YOLO v7的智能振动分拣系统开发(续)
目录 3.2 引入EIOU损失函数 3.2.1 CIOU损失函数 3.3.2 基于Focal-EIOU损失函数的网络优化 编辑...
Ubuntu - 用户和权限
sudo sudo(Super User Do)是在Linux和Unix系统中用于执行具有超级用户(root)权限的命令的命令。它允许普通用户以特权身份运行特定命令,通常需要输入密码以确认其身份。 sudo 是一种安全的方式,用于限制哪…...
JAVA实现Jfilechooser搜索功能
JAVA实现Jfilechooser搜索功能 背景介绍需求描述思路和方法Java代码实现和注释相关知识点介绍视频演示结语 背景介绍 Java是一种面向对象的编程语言,广泛应用于各种应用程序开发中。文件搜索是我们在日常工作或者学习中经常会遇到的需求,比如查找某个文…...
iOS上架App Store的全攻略
第一步:申请开发者账号 在开始将应用上架到App Store之前,你需要申请一个开发者账号。 1.1 打开苹果开发者中心网站:Apple Developer 1.2 使用Apple ID和密码登录(如果没有账号则需要注册),要确保使用与公…...
线性代数3:矢量方程
一、前言 欢迎回到系列文章的第三篇文章,内容是线性代数的基础知识,线性代数是机器学习背后的基础数学。在我之前的文章中,我介绍了梯队矩阵形式。本文将介绍向量、跨度和线性组合,并将这些新想法与我们已经学到的内容联系起来。本…...
线性代数的本质笔记
课程来自b站发现的《线性代数的本质》,可以帮助从直觉层面理解线性代数的一些基础概念,以及把一些看似不同的数学概念解释之后,发现其实有内在的关联。 这里只对部分内容做一个记录,完整内容请自行观看视频~ 01-向量究竟是什么 …...
[SQL | MyBatis] MyBatis 简介
目录 一、MyBatis 简介 1、MyBatis 简介 2、工作流程 二、入门案例 1、准备工作 2、示例 三、Mapper 代理开发 1、问题简介 2、工作流程 3、注意事项 4、测试 四、核心配置文件 mybatis-config.xml 1、environment 2、typeAilases 五、基于 xml 的查询操作 1、…...
FreeRTOS介绍 和 将FreeRTOS移植到STM32F103C8T6
一、FreeRTOS 介绍 什么是 FreeRTOS ? Free即免费的,RTOS的全称是Real time operating system,中文就是实时操作系统。 注意:RTOS不是指某一个确定的系统,而是指一类操作系统。比如:uc/OS,Fr…...
zookeeper(目前只有安装)
安装 流程 学kafka的时候安装 Apache ZooKeeper 安装地址:https://archive.apache.org/dist/zookeeper/zookeeper-3.5.7/apache-zookeeper-3.5.7-bin.tar.gz 解压 tar -zxvf kafka_2.12-3.0.0.tgz -C /export/server/ 改配置 cd config cp zoo_sample.cfg z…...
点云cloudpoint生成octomap的OcTree的两种方法以及rviz可视化
第一种:在自己的项目中将点云通过ros的topic发布,用octomap_server订阅点云消息,在octomap_server中生成ocTree 再用rviz进行可视化。 创建工作空间,记得source mkdir temp_ocotmap_test/src cd temp_ocotmap_test catkin_make…...
Python---死循环概念---while True
在编程中一个靠自身控制无法终止的程序称为“死循环”。 在Python中,我们也可以使用while True来模拟死循环: 代码: while True: print(每天进步一点点) 图示 应用: 比如,在测试里面,自动化测试用例…...
ElasticSearch容器化从0到1实践(问题汇总)
文章目录 ik插件如何安装?6.8.0版本JVM参数调整 ik插件如何安装? ik插件(中文分词插件)无法直接通过install指定插件名称的方式进行安装,可以通过指定zip包的方式对插件进行安装,需要注意的是通过zip包方式…...
Win11自动隐藏任务栏下,QQ/微信消息弹窗烦人?实测这3种设置组合能根治
Win11自动隐藏任务栏下根治QQ/微信消息弹窗的3种终极方案 每次全屏写文档时,右下角突然弹出的黄色闪烁图标总让人血压飙升——这可能是Win11自动隐藏任务栏用户最常遭遇的现代办公酷刑。明明选择了隐藏任务栏追求极简,聊天软件却固执地破坏这份宁静。经过…...
2025届学术党必备的五大AI辅助论文神器实测分析
Ai论文网站排名(开题报告、文献综述、降aigc率、降重综合对比) TOP1. 千笔AI TOP2. aipasspaper TOP3. 清北论文 TOP4. 豆包 TOP5. kimi TOP6. deepseek 在当下,人工智能生成内容越来越普及,好多用户面临着内容会被AI检测工…...
3步快速配置:Microsoft Word APA第7版参考文献格式终极指南
3步快速配置:Microsoft Word APA第7版参考文献格式终极指南 【免费下载链接】APA-7th-Edition Microsoft Word XSD for generating APA 7th edition references 项目地址: https://gitcode.com/gh_mirrors/ap/APA-7th-Edition 你是否在为学术论文的参考文献格…...
【2026年最新600套毕设项目分享】微信小程序的预约挂号系统(30127)
有需要的同学,源代码和配套文档领取,加文章最下方的名片哦 一、项目演示 项目演示视频 项目演示视频2 二、资料介绍 完整源代码(前后端源代码SQL脚本)配套文档(LWPPT开题报告/任务书)远程调试控屏包运…...
手把手教你用‘国家中小学智慧教育平台’和‘学科网’资源,快速填充高中数学教资教案
高中数学教资教案设计:巧用智慧教育平台与学科网资源高效填充 站在教室讲台前的第一分钟,往往决定了整堂课的氛围走向。记得去年备考教资时,我盯着空白的教案模板发呆——明明掌握了教学理论,却总在"如何让导入更生动"、…...
USB-PD协议分析仪Dr. PD的设计与应用
1. 项目概述:Dr. PD USB-PD协议分析仪十年前谁能想到,一根数据线能同时传输4K视频、千兆网络和240W电力?USB-C和Power Delivery(PD)协议彻底改变了电子设备的供电方式。但当你设计的PD设备无法正常握手,或者…...
在Petalinux里像操作内存一样控制FPGA逻辑:ZYNQ7020 AXI_EMC Linux驱动开发指南
在Petalinux中实现用户空间直接操控FPGA逻辑:ZYNQ7020 AXI_EMC开发实战 当我们需要在ZYNQ平台上实现PS与PL的高效交互时,传统的内核驱动开发模式往往会成为性能瓶颈。想象一下这样的场景:你的FPGA逻辑需要实时响应来自Linux应用层的控制信号&…...
PyTorch全连接层实战:从图像分类到文本处理的5个经典案例
PyTorch全连接层实战:从图像分类到文本处理的5个经典案例 全连接层作为神经网络的基础构建块,其重要性不言而喻。但很多学习者在掌握了基础理论后,面对实际项目时仍会感到无从下手。本文将带你深入五个典型应用场景,通过完整可运行…...
别再只盯着信号强度了!用Wi-Fi CSI数据玩点新花样:从手势识别到室内定位
别再只盯着信号强度了!用Wi-Fi CSI数据玩点新花样:从手势识别到室内定位 当你用手机查看Wi-Fi信号强度时,那个小小的"满格"图标背后隐藏着远比想象丰富的信息。传统RSSI(接收信号强度指示)就像用黑白电视看世…...
OpticsPy:用Python解决光学系统设计的矩阵计算与光线追迹难题
OpticsPy:用Python解决光学系统设计的矩阵计算与光线追迹难题 【免费下载链接】opticspy python optics module 项目地址: https://gitcode.com/gh_mirrors/op/opticspy 传统光学设计面临两大核心挑战:商业软件封闭昂贵,无法与现代化开…...
