欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 财经 > 产业 > vue项目中渲染markdown并处理报错

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

2025/5/8 19:10:09 来源:https://blog.csdn.net/u013994400/article/details/147743839  浏览:    关键词: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'
},

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

热搜词