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包方式…...
集成学习方法解析:Bagging与Boosting原理与实践
1. 集成学习方法概述:为什么需要模型组合?在机器学习实践中,我们常常面临一个关键矛盾:单一模型往往难以同时满足高准确性和强泛化能力的需求。这就好比医疗诊断中,单个专家的意见可能受限于其专业背景,而多…...
从‘虹猫蓝兔’到‘终身学习’:聊聊AI模型如何像人一样持续进化,而不只是‘打补丁’
从‘虹猫蓝兔’到‘终身学习’:AI模型如何像人类一样持续进化 想象一下,你刚学会骑自行车,第二天又学会了游泳——结果突然发现自己完全忘记了怎么骑车。这种荒谬的场景,正是当前AI模型在持续学习新任务时面临的真实困境。当推荐系…...
MinerU 系列教程 第十八课:Magic Model 转换层详解
MinerU 系列教程 第十八篇 本篇教程作为 模块五:原理篇 - 数据流与中间格式 的第二课,将深入剖析 MinerU 的 Magic Model 转换层。每种后端都有一个专属的 Magic Model,负责将各自的原始输出标准化为上一课学习的 Middle JSON 块结构。本课将揭示四个版本的 Magic Model 在块…...
终极全面战争模组制作指南:5个步骤快速上手RPFM
终极全面战争模组制作指南:5个步骤快速上手RPFM 【免费下载链接】rpfm Rusted PackFile Manager (RPFM) is a... reimplementation in Rust and Qt5 of PackFile Manager (PFM), one of the best modding tools for Total War Games. 项目地址: https://gitcode.c…...
1.4 大白菜磁盘分区扩容(C盘为例)
前置条件:启动盘制作完成,插入U盘,BIOS选择U盘启动1.选择“启动Win10 X64 PE”2.等待一会3.等待一会4.双击桌面“分区工具”5.可以看到C盘扩容前为41GB,D盘为19GB6.右键点击“本地磁盘(C:)”,选择“扩容分区”7.点击“…...
别再混淆了!一文讲清Xilinx 7系列FPGA中HP Bank与HR Bank的SelectIO区别(含IDELAY/ODELAY详解)
深入解析Xilinx 7系列FPGA中HP与HR Bank的SelectIO架构差异 在Xilinx 7系列FPGA的设计实践中,IO Bank的选择往往直接影响着系统性能和信号完整性。许多工程师在初次接触HP(High Performance)和HR(High Range)两种Bank…...
本地语音识别插件LocalVocal:为OBS提供零延迟的AI字幕解决方案
本地语音识别插件LocalVocal:为OBS提供零延迟的AI字幕解决方案 【免费下载链接】obs-localvocal OBS plugin for local speech recognition and captioning using AI 项目地址: https://gitcode.com/gh_mirrors/ob/obs-localvocal LocalVocal是一款专为OBS S…...
高性能工控机在高精度机器人中的应用
大家好,我是阿强,从事工业控制技术工作 17 年。在半导体制造、精 密装配、医用设备、航 空 航 天等领域,对机器人的精度和速度有着很高的要求。这些高精度机器人需要处理大量的复杂数据,运行复杂的运动控制算法和视觉检测算法&…...
智能自动化神器:3个核心功能彻底改变你的英雄联盟游戏体验
智能自动化神器:3个核心功能彻底改变你的英雄联盟游戏体验 【免费下载链接】League-Toolkit An all-in-one toolkit for LeagueClient. Gathering power 🚀. 项目地址: https://gitcode.com/gh_mirrors/le/League-Toolkit League Akari是一款为英…...
告别手动改图!用FME+Python搞定GIS数据五大拓扑错误(附完整模板)
从数据质检到智能修复:FME与Python联袂解决GIS拓扑难题 当一份布满尖锐角、自相交和缝隙的GIS数据摆在面前时,许多工程师的第一反应可能是头皮发麻。传统手动修复不仅耗时费力,还容易引入新的错误。本文将揭示如何通过FME Workbench与Python脚…...
