uniapp+vue3嵌入Markdown格式

使用的库是towxml

第一步:下载源文件,那么可以git clone,也可以直接下载压缩包
git clone https://github.com/sbfkcel/towxml.git

第二步:设置文件夹内的config.js,可以选择自己需要的格式

第三步:安装依赖和打包
npm i
npm run build
打包完成后会生成一个dist文件夹,改名字为towxml

第四步:在uniapp项目的src目录下新建wxcomponents目录(需要注意的是这个文件名是有要求的),然后将towxml放到wxcomponents

第五步:修改towxml里的decode.json,将里面的前缀改为相对路径./

"decode": "/towxml/decode",
改为
"decode": "./decode",

第六步:在全局挂载towxml,代码如下:

const towxml = require('./wxcomponents/towxml/index');
export function createApp() {const app = createSSRApp(App);app.config.globalProperties.$towxml = towxmlreturn {app,};
}

这里使用的commonjs,所以需要安装@types/node,并且在tsconfig.jsontypes添加node,代码如下:

"types": ["@dcloudio/types","nutui-uniapp/global.d.ts","node"]

第七步:在pages.json里需要的页面的style属性里使用组件

		{"path": "pages/question_detail/index","style": {"navigationBarTitleText": "面试题","usingComponents": {"towxml": "/wxcomponents/towxml/towxml"}}},

第八步:在页面使用towxml

<towxml :nodes="testData" class="towxml-content" />
import { reactive, ref, getCurrentInstance } from 'vue';const instance = getCurrentInstance();
const appContext = instance?.appContext
const testData = appContext?.config.globalProperties.$towxml('``111``', 'markdown')

第九步:由于该组件默认带有边距,所以需要在towxml/style/main.scss里进行手动修改,代码如下:

// towxml/style/main.scss
.h2w__main {margin: 0;padding-top: 0;
}

在组件里使用class! important是无效的

实现效果:
在这里插入图片描述

参考了知乎文章:uniapp中解析markdown支持网页和小程序
参考了CSDN文章:uni-app中使用towxml

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/44073.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

UML 2.5图的分类

新书速览|《UML 2.5基础、建模与设计实践》新书速览|《UML 2.5基础、建模与设计实践 UML 2.5在UML 2.4.1的基础上进行了结构性的调整&#xff0c;简化和重新组织了 UML规范文档。UML规范被重新编写&#xff0c;使其“更易于阅读”&#xff0c;并且“尽可能减少前向引用”。 U…

LLM应用构建前的非结构化数据处理(三)文档表格的提取

1.学习内容 本节次学习内容来自于吴恩达老师的Preprocessing Unstructured Data for LLM Applications课程&#xff0c;因涉及到非结构化数据的相关处理&#xff0c;遂做学习整理。 本节主要学习pdf中的表格数据处理 2.环境准备 和之前一样&#xff0c;可以参考LLM应用构建前…

金蝶部署常见问题解决

金蝶部署常见问题解决 金蝶版本&#xff1a; Apusic Application Server Enterprise Edition 9.0 SP8 kbc build 202312041121 报错信息&#xff1a; 与金蝶官方人员沟通&#xff0c;发现lib包版本太低&#xff0c;升级后可正常使用。替换lib包后重启服务。 下载lib: 链接: …

西瓜杯CTF(1)

#下班之前写了两个题&#xff0c;后面继续发 Codeinject <?php#Author: h1xaerror_reporting(0); show_source(__FILE__);eval("var_dump((Object)$_POST[1]);"); payload 闭合后面的括号来拼接 POST / HTTP/1.1 Host: 1dc86f1a-cccc-4298-955d-e9179f026d54…

公司内部配置GitLab,通过SSH密钥来实现免密clone、push等操作

公司内部配置GitLab&#xff0c;通过SSH密钥来实现免密clone、push等操作。以下是配置SSH密钥以实现免密更新的步骤&#xff1a; 1.生成SSH密钥 在本地计算机上打开终端或命令提示符。输入以下命令以生成一个新的SSH密钥&#xff1a;ssh-keygen -t rsa -b 4096 -C "your…

VBA实现Excel数据排序功能

前言 本节会介绍使用VBA如何实现Excel工作表中数据的排序功能。 本节会通过下表数据内容为例进行实操&#xff1a; 1. Sort 单列排序 语法&#xff1a;Sort key1,Order1 说明&#xff1a; Key1&#xff1a;表示需要按照哪列进行排序 Order1&#xff1a;用来指定是升序xlAsce…

D2D用户的功率优化算法研究

D2D通信技术是指两个对等的用户节点之间直接进行通信的一种通信方式。在由D2D通信用户组成的分布式网络中&#xff0c;每个用户节点都能发送和接收信号&#xff0c;并具有自动路由(转发消息)的功能。网络的参与者共享它们所拥有的一部分硬件资源&#xff0c;包括信息处理、存储…

短视频矩阵搭建,用云微客获客更方便

你的同行都爆单了&#xff0c;你还在问什么是矩阵&#xff1f;让我来告诉你。短视频矩阵是短视频获客的一种全新玩法&#xff0c;是以品牌宣传、产品推广为核心的一个高端布局手段&#xff0c;也是非常省钱的一种方式。 1.0时代&#xff0c;一部手机一个账号&#xff1b;2.0时代…

GD 32中断系统实现

1.0 中断的概念 中断&#xff1a;简单来说就是打断的意思&#xff0c;在计算机系统中CPU在执行一个操作的时候&#xff0c;有一个比当前任务更为紧急的任务需要执行,cpu暂停当前任务转而去执行更为紧急任务的操作&#xff0c;执行完更为紧急任务之后再返回来执行原来未执行完的…

高铁站客运枢纽IPTV电视系统-盐城高铁站西广场IP电视系统应用浅析

高铁站客运枢纽IPTV电视系统-盐城高铁站西广场IP电视系统应用浅析 由北京海特伟业科技有限公司任洪卓于2024年7月9日发布 随着科技的飞速发展&#xff0c;特别是“互联网”战略的深入推进&#xff0c;高铁站客运枢纽的信息化建设成为提升服务质量、增强乘客体验的重要手段。盐…

【1.3】动态规划-解码方法

一、题目 一条包含字母A-Z的消息通过以下映射进行了编码&#xff1a; A -> 1 B -> 2 ... Z -> 26 要解码已编码的消息&#xff0c;所有数字必须基于上述映射的方法&#xff0c;反向映射回字母&…

新能源汽车充电站远程监控系统S275钡铼技术无线RTU

新能源汽车充电站的远程监控系统在现代城市基础设施中扮演着至关重要的角色&#xff0c;而钡铼技术的S275无线RTU作为一款先进的物联网数据监测采集控制短信报警终端&#xff0c;为充电站的安全运行和高效管理提供了强大的技术支持。 技术特点和功能 钡铼S275采用了基于UCOSI…

Android11 窗口动画

窗口进入动画 应用端窗口绘制完成之后&#xff0c;调用finshDraw告知WMS&#xff0c;WMS这边最后就会调用WindowSurfacePlacer的performSurfacePlacement方法&#xff0c;最终调用到 WindowStateAnimator的commitFinishDrawingLocked方法 //frameworks/base/services/core/jav…

OJhelper一款帮助你获取各大oj信息的软件

项目地址 应用功能 目前应用支持&#xff1a;查询、自定义、收藏各大oj比赛信息&#xff0c;跳转比赛界面。查询各大oj的Rating分以及题量&#xff0c;查看题量饼状图。 应用环境 windows和安卓端 应用预览&#xff1a; 维护概况 后期会提供持续更新&#xff0c;具体可以…

7.9数据结构

思维导图 作业 doubleloop.h #ifndef __DOUBLELOOP_H__ #define __DOUBLELOOP_H__#include <stdio.h> #include <stdlib.h>typedef int datatype; typedef struct node {union{int len;datatype data;};struct node *pri;//前驱指针struct node *next;//后继指针…

全终端自动化测试框架wyTest

突然有一些觉悟&#xff0c;程序猿不能只会吭哧吭哧的低头做事&#xff0c;应该学会怎么去展示自己&#xff0c;怎么去宣传自己&#xff0c;怎么把自己想做的事表述清楚。 于是&#xff0c;这两天一直在整理自己的作品&#xff0c;也为接下来的找工作多做点准备。接下来…

Linux | 安装lb-toolkits 1.2.4库

Linux | 安装 lb-toolkits 最近又需要下载葵花的数据&#xff0c;之前分享过一次代码。今天发现之前的环境不小心被我删了&#xff0c;而运行相关的代码需要安装lb-toolkits这个库&#xff0c;今天正好记录了一下安装lb-toolkits的过程。 这里安装的版本是1.2.4&#xff0c;别…

53-4 内网代理6 - frp搭建三层代理

前提:53-3 内网代理5 - frp搭建二级代理-CSDN博客 三级网络代理 在办公区入侵后,发现需要进一步渗透核心区网络(192.168.60.0/24),并登录域控制器的远程桌面。使用FRP在EDMZ区、办公区与核心区之间建立三级网络的SOCKS5代理,以便访问核心区的域控制器。 VPS上的FRP服…

压缩感知3——重构算法正交匹配追踪算法

算法流程 问题的实质是&#xff1a;AX Y 求解&#xff08;A是M维&#xff0c;Y是N维且N>>M并且稀疏度K<M&#xff09;明显X有无穷多解&#xff0c;重构过程是M次采样得到的采样值升维的过程。OMP算法的具体步骤&#xff1a;(1)用X表示信号&#xff0c;初始化残差e0 …

计算给定数字的阶乘

1 问题 计算给定数字的阶乘. 2 方法 使用while循环。使用for循环。使用函数。 通过实验、实践等证明提出的方法是有效的&#xff0c;是能够解决开头提出的问题。 代码清单 1 使用while循环numberint(input(请输入一个数字:))factorial1i1while i<number: factorialfactor…