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://xiahunao.cn/news/3225122.html

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

人与机器的协同是强弱系统的互补行为

人与机器的协同可以被视作强弱系统的互补行为&#xff0c;这也强调了人类和机器之间在处理问题、执行任务或创造价值时各自的优势与角色。 人类在认知、创造力、情感和伦理等方面具有独特优势。我们能够进行高级的抽象思维、创新和复杂决策&#xff0c;能够处理不确定性和动态环…

【北京迅为】《i.MX8MM嵌入式Linux开发指南》-第一篇 嵌入式Linux入门篇-第十二章 Linux 权限管理

i.MX8MM处理器采用了先进的14LPCFinFET工艺&#xff0c;提供更快的速度和更高的电源效率;四核Cortex-A53&#xff0c;单核Cortex-M4&#xff0c;多达五个内核 &#xff0c;主频高达1.8GHz&#xff0c;2G DDR4内存、8G EMMC存储。千兆工业级以太网、MIPI-DSI、USB HOST、WIFI/BT…

Camera Raw:常规工具

在 Camera Raw 窗口右下角提供了四个常用的工具&#xff0c;它们分别是&#xff1a;缩放工具、抓手工具、切换取样器叠加以及切换网格叠加工具。 ◆ ◆ ◆ 缩放工具 Zoom Tool 用于放大或缩小预览图像&#xff0c;便于查看和编辑细节。 快捷键&#xff1a;Z 1、双击“缩放工具…

一、YOLO V10安装、使用、训练大全

YOLO V10安装、使用、训练大全 一、下载官方源码二、配置conda环境三、安装YOLOV10依赖四、使用官方YOLO V10模型1.下载模型2.使用模型2.1 图片案例 五、制作数据集1.数据集目录结构2.标注工具2.1 安装标注工具2.2 运行标注工具2.3 设置自动保存2.4 切换yolo模式2.5 开始标注2.…

VBA实现Excel数据排序功能

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

学习笔记——动态路由——IS-IS中间系统到中间系统(IS-IS工作过程)

六、IS-IS工作过程 1、第一步&#xff1a;建立邻居关系 IS-IS网络中所有路由器之间实现通信&#xff0c;主要通过以下几个步骤&#xff1a; (1)邻居关系建立&#xff1a; 邻居关系建立主要是通过HELLO包交互并协商各种参数&#xff0c;包括链路类型(level-1/level-2)&#…

密态计算,大模型商用数据瓶颈的新解法?

大数据产业创新服务媒体 ——聚焦数据 改变商业 大模型迈向产业的深度应用&#xff0c;首要挑战是高质量数据供给和安全流通。正如在今年的世界人工智能大会上&#xff0c;产学研届多位专家达成的共识是&#xff0c;数据决定了AI能力的上限。 在实践中&#xff0c;行业大模型难…

11、Python之变量:看得见还是看不见

引言 在前面一篇关于Python变量的文章中&#xff0c;更多地结合对象的内存结构及字节码指令&#xff0c;来看不同代码针对不同的类型的对象的不同效果。 今天这篇文章中&#xff0c;想对新手在使用Python变量中&#xff0c;可能遇到的其他困惑&#xff0c;再展开来说一下。 大…

抖音机构号授权矩阵系统源码:构建创新的社交媒体平台

抖音机构号授权矩阵系统源码是一个为抖音机构号提供授权管理的系统。该系统前端使用了uni-app和vue作为开发框架&#xff0c;后端采用了ThinkPHP5、wokerman和ElementUI。同时&#xff0c;剪辑版块使用了阿里云智能媒体服务和阿里云对象存储来实现。 抖音机构号授权矩阵系统源码…

读人工智能全传08人工智能的今天

1. 人工智能的今天 1.1. 未来&#xff0c;或许有些领域会有非常明显的人工智能痕迹&#xff0c;有些领域则不会 1.2. 2018年&#xff0c;来自计算机视觉处理器公司英伟达的研究人员证明了人工智能软件能够创造出虚假的人物照片&#xff0c;并且能够完全…

Сетунь的24条单播指令

1、Setun模拟器概述 真的&#xff0c;想搞懂一台电脑是怎么运行的&#xff0c;那就搞懂它的指今集是怎么跑的&#xff0c;感觉很离了个大谱的&#xff0c;先看由铁氧体磁芯上的器件组成的RAM&#xff0c;容量为162个9-trit单元&#xff0c;即每个单元为9-trit&#xff0c;每页有…

学习嵌入式对于学历有要求吗?

学习嵌入式系统开发通常并不对学历有严格的要求&#xff0c;尤其是在技术行业中&#xff0c;实际的技能和经验往往比学历更为重要。我收集归类了一份嵌入式学习包&#xff0c;对于新手而言简直不要太棒&#xff0c;里面包括了新手各个时期的学习方向编程教学、问题视频讲解、毕…

Python中JSON处理技术的详解

引言 JSON&#xff08;JavaScript Object Notation&#xff09;作为当前最流行的数据传输格式&#xff0c;在Python中也有多种实现方式。由于JSON的跨平台性和简便易用性&#xff0c;它在数据交互中被广泛应用。本文将重点讨论如何熟练应用Python的JSON库&#xff0c;将JSON数…

Vagrant配合VirtualBox搭建虚拟机

目录 前言一、软件下载及安装1.下载2.安装扩展&#xff1a; 二、创建一个虚拟机1.Vagrant官方镜像仓库 三、使用远程工具连接虚拟机1.修改相关配置文件 四、虚拟机克隆及使用1.通用配置2.简单搭建一个java环境3.克隆虚拟机1.重命名虚拟机&#xff08;可选&#xff09;2.打包指定…

计算机视觉研究方向初学习,计算机视觉都有什么方向??!到底是干什么的?!

计算机视觉研究方向初学习&#xff0c;计算机视觉都有什么方向&#xff1f;&#xff1f;&#xff01;到底是干什么的&#xff1f;&#xff01; 语义分割图像分类目标检测和定位实例分割、全景分割物体跟踪姿态估计人脸识别人体识别图像增强风格迁移图像生成视觉问答视频分析光学…

大话光学原理:4.散射:瑞利、拉曼、米氏和布里渊

这是一缕柔和的光&#xff0c;在空气的舞台上轻盈地跳跃。它悠然自得&#xff0c;在宁静的空间中缓缓前行。然而&#xff0c;一片细薄透明的介质挡住了它的脚步&#xff0c;它毫无预兆地撞上了这片障碍。在这短暂的接触中&#xff0c;它被分解成无数微小的粒子&#xff0c;被迫…

【总线】AXI第九课时:介绍AXI响应信号 (Response Signaling):RRESP和 BRESP

大家好,欢迎来到今天的总线学习时间!如果你对电子设计、特别是FPGA和SoC设计感兴趣&#xff0c;那你绝对不能错过我们今天的主角——AXI4总线。作为ARM公司AMBA总线家族中的佼佼者&#xff0c;AXI4以其高性能和高度可扩展性&#xff0c;成为了现代电子系统中不可或缺的通信桥梁…

Python | Leetcode Python题解之第226题翻转二叉树

题目&#xff1a; 题解&#xff1a; class Solution:def invertTree(self, root: TreeNode) -> TreeNode:if not root:return rootleft self.invertTree(root.left)right self.invertTree(root.right)root.left, root.right right, leftreturn root

NLP入门——卷积语言模型的搭建、训练与预测

语言模型建模是针对句子建模&#xff0c;主要分为掩码语言模型和自回归语言模型。 我们从corpus中截取一句话作为例子&#xff0c;这句话是bpe分词后的句子&#xff1a; 1994 年 5 月 17 日 安全 理事会 第 33 77 次 会议 通过 掩码语言模型的主要机制是&#xff1a;例如将33 7…

关于MySQL mvcc

innodb mvcc mvcc 多版本并发控制 在RR isolution 情况下 trx在启动的时候就拍了个快照。这个快照是基于整个数据库的。 其实这个快照并不是说拷贝整个数据库。并不是说要拷贝出这100个G的数据。 innodb里面每个trx有一个唯一的trxID 叫做trx id .在trx 开始的时候向innodb系…