前言:想在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'
},
Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐