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后缀导致

bash 复制代码
{
    test: /\.mjs$/,
    include: /node_modules/,
    type: 'javascript/auto'
},
相关推荐
撰卢19 分钟前
总结一下vue3的组件之间数据转递,子组件传父组件,父组件传子组件
前端·javascript·vue.js
前端开发爱好者1 小时前
Vue3 超强“积木”组件!5 分钟搞定可交互 3D 机房蓝图!
前端·javascript·vue.js
前端开发爱好者1 小时前
尤雨溪力荐!Vue3 专属!100+ 动效组件!
前端·javascript·vue.js
前端开发爱好者1 小时前
尤雨溪力荐!Vue3 生态最强大的 14 个 UI 组件库!
前端·javascript·vue.js
lb29171 小时前
关于多个el-input的自动聚焦,每输入完一个el-input,自动聚焦到下一个
前端·javascript·vue.js
lingliang1 小时前
使用 JS 渲染页面并导出为PDF 常见问题与修复
javascript·pdf·vue
sorryhc2 小时前
【AI解读源码系列】ant design mobile——Divider分割线
前端·javascript·react.js
前端进阶者2 小时前
electron-vite_20配置依赖包运行时区外部加载commonjsExternals_vite-plugin-commonjs-externals
前端·electron
anyup2 小时前
🔥 uView Pro 全新升级来啦!一行配置,解锁 uView Pro 全局 TS 类型提示与校验
前端·vue.js·uni-app
Jimmy2 小时前
使用 Electron 在 5 分钟内创建一个桌面的 React 应用
前端·javascript·electron