当前位置: 首页 > news >正文

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

相关文章:

uniapp+vue3嵌入Markdown格式

使用的库是towxml 第一步&#xff1a;下载源文件&#xff0c;那么可以git clone&#xff0c;也可以直接下载压缩包 git clone https://github.com/sbfkcel/towxml.git 第二步&#xff1a;设置文件夹内的config.js&#xff0c;可以选择自己需要的格式 第三步&#xff1a;安装…...

处理成二维数组对象

const objects [] let checkboxvalue [{ name: 名字1 }, { name: 名字2 }] let data [{ value: 值1, id: id1 }, { value: 值2, id: id2 }]let arr [] checkboxvalue.map((item, index) > {// data[index].name item.namearr.unshift({ contractName: item.name, list:…...

智能汽车网络安全笔记

汽车五大域 动力底盘、车身控制、智能座舱、智能网联和高级辅助驾驶五大域 国外汽车安全法规标准 汽车网络安全管理体系&#xff08;CSMS&#xff09; CSMS指的是管理汽车的网络威胁和风险&#xff0c;并保护车辆免受网络攻击的组织过程和管理系统 安全验证和安全测试 8…...

web 网络安全

Web网络安全是网络安全的一个重要分支&#xff0c;专注于保护Web应用程序、服务和网站免受各种网络威胁。学习Web网络安全涉及多个层面的知识和技能&#xff0c;以下是一些主要的学习领域&#xff1a; 一、XSS攻击 全称:&#xff1a;Cross Site Script &#xff08;跨站脚本&a…...

Vue 3与Pinia:下一代状态管理的探索

引言 随着Vue 3的推出&#xff0c;Pinia应运而生&#xff0c;成为官方推荐的状态管理库&#xff0c;旨在替代Vuex。Pinia与Vuex相比&#xff0c;带来了以下主要区别和优势&#xff1a; 更简洁的API&#xff1a;Pinia的API设计更加直观和简洁&#xff0c;易于理解和使用。更好…...

《植物大战僵尸杂交版》2.2版本:全新内容与下载指南

《植物大战僵尸杂交版》2.2版本已经火热更新&#xff0c;带来了一系列令人兴奋的新玩法和调整&#xff0c;为这款经典的塔防游戏注入了新的活力。如果你是《植物大战僵尸》系列的忠实粉丝&#xff0c;那么这个版本绝对值得你一探究竟。 2.2版本更新亮点 新增看星星玩法 这个新…...

探索Hash Router:构建单页应用的基石

前言 第一次看到Vue的路由模式的时候&#xff0c;有点分不清楚 createWebHashHistory()和 createWebHistory的区别&#xff0c;感觉功能也差不多。后来去搜了一下发现前面的那个叫做哈希模式&#xff0c;哈希模式通过URL的hash&#xff08;即#后面的部分&#xff09;来实现前端…...

MySQL中undo log、redo log 和 binlog三种日志的作用及应用场景

在 MySQL 数据库中&#xff0c;undo log、redo log 和 binlog 都是关键的日志类型&#xff0c;它们在数据恢复和事务管理中起着重要作用。 Undo Log&#xff08;回滚日志&#xff09; 作用&#xff1a;undo log 主要用于事务回滚和MVCC&#xff08;多版本并发控制&#xff09;。…...

javaweb零碎知识3

// 假设您已经导入了 axios import axios from axios;// 获取表单元素 const form document.getElementById(myForm);// 为表单添加 submit 事件监听器 form.addEventListener(submit, function(e) {// 阻止表单的默认提交行为e.preventDefault();// 创建 FormData 对象并从表…...

2024.7.9.小组汇报postman分享会

文章目录 一、前言&#xff08;一&#xff09;界面导航说明&#xff08;二&#xff09;发送第一个请求 二、基本功能&#xff08;一&#xff09;常见类型的接口请求(常见的接口有如下四种类型&#xff1a;1.查询参数的接口请求2.表单类型的接口请求3.上传文件的表单请求4.JSON …...

C语言文件操作-文件IO(系统调用)

文件IO (系统调用) 文件描述符open函数read函数write函数lseek函数close函数dup函数dup2函数 stat函数getpwuid函数getgrgid函数 实例 目录操作 opendir函数readdir函数rewinddir函数closedir函数实例 文件IO (系统调用) 文件IO就是系统调用&#xff0c;用户空间进入内核空间…...

LeetCode67(二进制求和[位运算,大数运算])

二进制求和 题目要求: 给你两个二进制字符串 a 和 b &#xff0c;以二进制字符串的形式返回它们的和。 这道题其实有几种解法.我们先来介绍简单的方法. 我们可以将两个字符串的二进制转成十进制,获取对应值相加之后,我们可以不断对2取余,获取尾数拼接即可.也就是像我们平常求一…...

grep对文件内容搜索(附重要拓展-正则表达式)

文件搜索是搜索查找符合条件的某文件的目录&#xff0c;若要编辑文件或对文件的某配置进行修改&#xff0c;就需要对文件内容进行搜索。 grep 命令是 Linux 及类 Unix 操作系统中的一个强大的文本搜索工具&#xff0c;用于搜索一个或多个文件中匹配给定模式的行。grep 代表“Gl…...

前端JS特效第26波:jQuery日期时间选择器插件

jQuery日期时间选择器插件&#xff0c;先来看看效果&#xff1a; 部分核心的代码如下&#xff1a; <!DOCTYPE html> <html> <head lang"zh-CN"> <meta charset"UTF-8"> <title>jQuery日期时间选择器插件 - PHP中文网</t…...

Anaconda+Pycharm 项目运行保姆级教程(附带视频)

最近很多小白在问如何用anacondapycharm运行一个深度学习项目&#xff0c;进行代码复现呢&#xff1f;于是写下这篇文章希望能浅浅起到一个指导作用。 附视频讲解地址&#xff1a;AnacondaPycharm项目运行实例_哔哩哔哩_bilibili 一、项目运行前的准备&#xff08;软件安装&…...

java面试-java基础(上)

文章目录 一、什么是Java&#xff1f;特点&#xff1f;二、什么是JVM、JDK、JRE&#xff1f;三、java跨平台实现原理四、java数据类型有哪些?五、char能不能存一个中文汉字?六、存在数字i加1小于i或者i减1小于i?七、什么是自动类型转换与强制类型转换?八、什么是装/拆箱&am…...

STM32快速搭建项目框架

注&#xff1a;编写本博客的原因&#xff0c;学习期间基于复习之前知识点的需要&#xff0c;故撰写本教程&#xff0c;即是复习前面的知识点也是作为博客的补充 1.0 文件夹的创建 创建一个STM32项目为模版工程&#xff0c;问价夹下分别包含4个子文件夹&#xff0c;一个是Librar…...

JMH324-免费【最后一战LOL】MOBA竞技版本+单机一键端+视频教程+文本教程

资源介绍&#xff1a; 修改前打开【D:\ZHServer】文件夹里的【[1]一键启动.bat】&#xff0c;游戏不要打开&#xff0c;否则修改失败。 修改完以后重启架设程序才会生效。 fball_gamedb1数据库——gameuser数据表 obj_name 角色名 obj_lv 等级 obj_diamond 钻石 obj_gold 8…...

WPF UI 3D 多轴 机械臂 stl 模型UI交互

1、三维插件环境调整 2、动态模型材质处理 3、动态模型鼠标交互 4、模型旋转基本思路 5、六轴机械臂节点旋转处理 6、更多HelixToolkit插件处理案例 7、快速对接Blender模型 鼠标交互&#xff08;没有强调场景的变换&#xff09; 鼠标命中测试&#xff08;HitTest 不推荐&…...

《金山 WPS AI 2.0:重塑办公未来的智能引擎》

AITOP100平台获悉&#xff0c;在 2024 世界人工智能大会这一科技盛宴上&#xff0c;金山办公以其前瞻性的视野和创新的技术&#xff0c;正式发布了 WPS AI 2.0&#xff0c;犹如一颗璀璨的星辰&#xff0c;照亮了智能办公的新征程&#xff0c;同时首次公开的金山政务办公模型 1.…...

《从零掌握MIPI CSI-2: 协议精解与FPGA摄像头开发实战》-- CSI-2 协议详细解析 (一)

CSI-2 协议详细解析 (一&#xff09; 1. CSI-2层定义&#xff08;CSI-2 Layer Definitions&#xff09; 分层结构 &#xff1a;CSI-2协议分为6层&#xff1a; 物理层&#xff08;PHY Layer&#xff09; &#xff1a; 定义电气特性、时钟机制和传输介质&#xff08;导线&#…...

页面渲染流程与性能优化

页面渲染流程与性能优化详解&#xff08;完整版&#xff09; 一、现代浏览器渲染流程&#xff08;详细说明&#xff09; 1. 构建DOM树 浏览器接收到HTML文档后&#xff0c;会逐步解析并构建DOM&#xff08;Document Object Model&#xff09;树。具体过程如下&#xff1a; (…...

实现弹窗随键盘上移居中

实现弹窗随键盘上移的核心思路 在Android中&#xff0c;可以通过监听键盘的显示和隐藏事件&#xff0c;动态调整弹窗的位置。关键点在于获取键盘高度&#xff0c;并计算剩余屏幕空间以重新定位弹窗。 // 在Activity或Fragment中设置键盘监听 val rootView findViewById<V…...

OPENCV形态学基础之二腐蚀

一.腐蚀的原理 (图1) 数学表达式&#xff1a;dst(x,y) erode(src(x,y)) min(x,y)src(xx,yy) 腐蚀也是图像形态学的基本功能之一&#xff0c;腐蚀跟膨胀属于反向操作&#xff0c;膨胀是把图像图像变大&#xff0c;而腐蚀就是把图像变小。腐蚀后的图像变小变暗淡。 腐蚀…...

Typeerror: cannot read properties of undefined (reading ‘XXX‘)

最近需要在离线机器上运行软件&#xff0c;所以得把软件用docker打包起来&#xff0c;大部分功能都没问题&#xff0c;出了一个奇怪的事情。同样的代码&#xff0c;在本机上用vscode可以运行起来&#xff0c;但是打包之后在docker里出现了问题。使用的是dialog组件&#xff0c;…...

ABAP设计模式之---“简单设计原则(Simple Design)”

“Simple Design”&#xff08;简单设计&#xff09;是软件开发中的一个重要理念&#xff0c;倡导以最简单的方式实现软件功能&#xff0c;以确保代码清晰易懂、易维护&#xff0c;并在项目需求变化时能够快速适应。 其核心目标是避免复杂和过度设计&#xff0c;遵循“让事情保…...

JAVA后端开发——多租户

数据隔离是多租户系统中的核心概念&#xff0c;确保一个租户&#xff08;在这个系统中可能是一个公司或一个独立的客户&#xff09;的数据对其他租户是不可见的。在 RuoYi 框架&#xff08;您当前项目所使用的基础框架&#xff09;中&#xff0c;这通常是通过在数据表中增加一个…...

管理学院权限管理系统开发总结

文章目录 &#x1f393; 管理学院权限管理系统开发总结 - 现代化Web应用实践之路&#x1f4dd; 项目概述&#x1f3d7;️ 技术架构设计后端技术栈前端技术栈 &#x1f4a1; 核心功能特性1. 用户管理模块2. 权限管理系统3. 统计报表功能4. 用户体验优化 &#x1f5c4;️ 数据库设…...

代码规范和架构【立芯理论一】(2025.06.08)

1、代码规范的目标 代码简洁精炼、美观&#xff0c;可持续性好高效率高复用&#xff0c;可移植性好高内聚&#xff0c;低耦合没有冗余规范性&#xff0c;代码有规可循&#xff0c;可以看出自己当时的思考过程特殊排版&#xff0c;特殊语法&#xff0c;特殊指令&#xff0c;必须…...

android13 app的触摸问题定位分析流程

一、知识点 一般来说,触摸问题都是app层面出问题,我们可以在ViewRootImpl.java添加log的方式定位;如果是touchableRegion的计算问题,就会相对比较麻烦了,需要通过adb shell dumpsys input > input.log指令,且通过打印堆栈的方式,逐步定位问题,并找到修改方案。 问题…...