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

vue项目中渲染markdown并处理报错

前言:想在vue项目中渲染markdown并处理报错问题
有以下几种方式:
1、使用第三方Markdown插件
2、通过Markdown转HTML工具
3、使用Vue组件处理Markdown
一、首先第一种:使用第三方Markdown插件
安装vue-markdown插件 或者 markdown-it,两种各有利弊
应用场景
‌vue-markdown‌:专为Vue.js设计,能够快速地将Markdown文本转换为HTML,并且支持多种Markdown语法扩展,如表格、任务列表、脚注、数学公式等。它适用于需要在Vue项目中轻松集成Markdown支持的场景‌
‌markdown-it‌:是一个高度可配置的Markdown解析器,支持通过插件扩展功能。它具有高性能、可扩展性和灵活性,可以轻松集成到各种JavaScript框架中,如Vue、React等。markdown-it适用于需要高性能解析和渲染Markdown内容的场景‌
功能特点
‌vue-markdown‌:
‌高性能‌:能够快速将Markdown文本转换为HTML。
‌支持多种语法扩展‌:包括表格、任务列表、脚注、数学公式等。
‌易于集成‌:专为Vue.js设计,使用简单方便‌
‌markdown-it‌:
‌高性能‌:快速解析和渲染Markdown内容。
‌高度可配置‌:支持通过插件扩展功能,兼容CommonMark规范,并可配置以支持其他Markdown扩展。
‌灵活性‌:可以轻松集成到各种JavaScript框架中‌
二、通过Markdown转HTML工具
1、安装Markdown转HTML工具 marked
2、编写转换逻辑
3、在Vue组件中渲染HTML内容

错误问题:markdown-it Can’t import the named export ‘P’ from non EcmaScript module
这是在webpack当中没支持mjs后缀导致

{test: /\.mjs$/,include: /node_modules/,type: 'javascript/auto'
},

相关文章:

  • 电池热管理CFD解决方案,为新能源汽车筑安全防线
  • 汽车紧固件防腐3.0时代:敦普水性漆用无铬锌铝涂层定义「零氢脆」标准
  • 人工智能与生命科学的深度融合:破解生物医学难题,引领未来科技革命
  • Qt—鼠标移动事件的趣味小程序:会移动的按钮
  • 2025最新vmware-17虚拟机安装教程(保姆级,图文讲解,带安装包)
  • MySQL基础关键_009_DDL 和 DML(二)
  • 多线程2-多线程编程
  • 【Fifty Project - D23】
  • 从入门到登峰-嵌入式Tracker定位算法全景之旅 Part 7 |TinyML 定位:深度模型在 MCU 上的部署
  • 扩增子分析|微生物生态网络稳定性评估之鲁棒性(Robustness)和易损性(Vulnerability)在R中实现
  • Jetpack Compose 自定义 Slider 完全指南
  • Javase 基础加强 —— 05 Map集合
  • 图形化编程重塑 IoT 边缘开发:技术革新与生态竞合新范式
  • WebRTC ICE 服务器搭建
  • 【KWDB创作者计划】_通过一篇文章了解什么是 KWDB(KaiwuDB)
  • 【Docker系列】使用格式化输出与排序技巧
  • 【旅游网站设计与实现】基于SpringBoot + Vue 的前后端分离项目 | 万字详细文档 + 源码 + 数据库 + PPT
  • SQLite基本函数
  • 在 PyTorch 中借助 GloVe 词嵌入完成情感分析
  • Linux进程8-共享内存概念机操作、shmget/shmat/shmdt/shmctl函数用法、空间大小修改
  • 诺和诺德一季度减重版司美格鲁肽收入增83%,美国市场竞争激烈下调全年业绩预期
  • 又一日军“慰安妇”制度受害者去世,大陆登记在册幸存者仅剩7人
  • 自然资源部印发地理信息数据分类分级指南
  • 杨国荣︱《老子智慧八十一讲》及其他
  • 独家专访|白先勇:我的家乡不是哪个地点,是中国传统文化
  • 4月份全球制造业PMI继续下降,经济下行压力有所加大