当前位置: 首页 > 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

http://www.lryc.cn/news/396125.html

相关文章:

  • 处理成二维数组对象
  • 智能汽车网络安全笔记
  • web 网络安全
  • Vue 3与Pinia:下一代状态管理的探索
  • 《植物大战僵尸杂交版》2.2版本:全新内容与下载指南
  • 探索Hash Router:构建单页应用的基石
  • MySQL中undo log、redo log 和 binlog三种日志的作用及应用场景
  • javaweb零碎知识3
  • 2024.7.9.小组汇报postman分享会
  • C语言文件操作-文件IO(系统调用)
  • LeetCode67(二进制求和[位运算,大数运算])
  • grep对文件内容搜索(附重要拓展-正则表达式)
  • 前端JS特效第26波:jQuery日期时间选择器插件
  • Anaconda+Pycharm 项目运行保姆级教程(附带视频)
  • java面试-java基础(上)
  • STM32快速搭建项目框架
  • JMH324-免费【最后一战LOL】MOBA竞技版本+单机一键端+视频教程+文本教程
  • WPF UI 3D 多轴 机械臂 stl 模型UI交互
  • 《金山 WPS AI 2.0:重塑办公未来的智能引擎》
  • RT2-使用NLP的方式去训练机器人控制器
  • VisActor vs ECharts: 哪个更适合你的数据可视化需求?
  • 【QT中实现摄像头播放、以及视频录制】
  • el-table封装popver組件,点击列筛选行数据功能,支持筛选,搜索,排序功能
  • 基于DPU的云原生计算资源共池管理解决方案
  • Bugly并非无所不能
  • 2024年信息系统项目管理师1批次上午客观题参考答案及解析(3)
  • YOLOv8改进 | 注意力机制 | 对密集和小目标友好的EVAblock 【原理 + 完整代码】
  • 高效前端开发:解密pnpm的存储与链接
  • 设置单实例Apache HTTP服务器
  • Python | Leetcode Python题解之第221题最大正方形