vue2使用marked进行markdown转html

原创于 2025-10-13 11:35:51 发布 · 353 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#html #前端

收录于

npm 同时被 2 个专栏收录

6 篇文章

订阅专栏

4 篇文章

订阅专栏

1.安装

npm install marked --save

2.vue.config.js添加代码

module.exports = {
    transpileDependencies: ['marked'],
}

3.在.vue文件中使用

import * as marked from 'marked'
let str = `marked内容`
let parseStr = marked.parse(str)
console.log('marked转成html内容：', parseStr)

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

清岚_lxn

关注关注

5
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

Vue2+marked.js实现AI流式输出[可运行源码]

最新发布

11-17

本文详细介绍了如何在Vue2项目中结合marked.js和highlight.js实现AI流式输出的功能。主要内容包括：1. 实现效果展示，通过聊天界面展示用户和AI的消息，并支持不同样式；2. 实现流程，包括页面内容、JS部分与样式的详细代码，以及如何通过流式响应处理AI返回的数据；3. 使用marked.js和highlight.js将Markdown文本转换为HTML并实现语法高亮；4. 添加等待效果，当AI回复未完成时显示加载动画；5. 解决引入marked.js后打包报错的问题，通过配置webpack的babel-loader处理新语法。文章提供了完整的代码示例和解决方案，适合开发者参考实现类似功能。

参与评论您还未登录，请先登录后发表或查看评论

vue - marked 解析插件报错：marked__WEBPACK_IMPORTED_MODULE_5___default(...) is not a function（完美解决marked报错）

✅ 精选推荐文章

12-18

6498

vue，marked，marked插件报错，markdown解析插件，vue项目，vue网页网站报错，浏览器控制台报错，import marked from 'marked'引入报错，如何解决marked插件报错，vue使用marked解析markdown文件文档内容时报错，TypeError: marked__WEBPACK_IMPORTED_MODULE_5___default(...) is not a function，vue怎么解决marked引入报错，vue3报错解决办法，详细解决方案，Vue

Vue中使用marked

小火车况且况且况且的博客

04-28

4702

Vue中使用marked marked官方文档官方demo地址 1. 安装依赖 yarn add marked highlight.js -S, 其中 highlight.js用来高亮代码块 2. 使用(语法是V3 setup+ TS ) import 'highlight.js/styles/monokai-sublime.css' 是用来设置代码块的样式 <template> <div class="markdown-box"> <!-- 书写区域 --&gt

Vue2+marked.js实现AI流式输出

铁马冰河入梦来

02-11

8970

AI流式输出前端实现。

vue2使用marked报错解决

qq_35643554的博客

02-21

2724

babel.config.js配置如果上面的vue.config.js 设置了只编译marked,不会出现这个页面控制台报错重新启动，终端不报错，浏览器控制台也不报错了

markdown转VNode

qq_43203949的博客

04-01

941

A markdown parser and compiler. Built for speed.Integrate Vue framework based on the Marked. Marked2vue based on the Marked.You can use Marked2vue just like Marked.

vue使用marked.js实现markdown转html并提取标题生成目录

weixin_33828101的博客

01-16

4320

html： <template> <div class="wrapper"> <div class="container"> <div class="menu"> <ul class="menu-list"> ...

在Vue中将MarkDown转换成HTML显示,代码块高亮显示

爱敲键盘的程序源的博客

12-21

3056

在Vue中将MarkDown转换成HTML显示，并且代码块高亮。

Markdown 转 HTML 库，推荐大家收藏

wjianwei666的专栏

02-28

1291

Markdown 转 HTML 是前端开发中不可或缺的技能，而选择合适的工具可以事半功倍。

vue中使用marked显示markdown文件

sayoko06的博客

03-06

6666

1、安装marked npm install marked 2、使用 <div v-html="readmeContent"> </div> <script> //引入marked import marked from 'marked' export default { methods: { getMardow...

vue2使用MarkDown的回显与生成自定义目录

m0_64787068的博客

07-15

1607

注意prism.highlightAll()并不会自己生效，所以我们需要监听对应显示的数据调用该方法。选择你想要的主题换上去。使用也很简单，选择自己想要的模板，点击下载样式就好了。这里的hljs.highlightAll()不确实是否要监听！此时页面应渲染出来了，但是没有markdown的样式！安装完毕会生成一个babel.config.js。注意样式可能会影响页面滚动！使用highlight.js。

【vue+marked】marked

Qxn530的博客

08-07

5016

vue使用marked，以及相关问题

在vue中使用marked解析MARKDOWN,生成目录,运行代码示例

热门推荐

Baymax的博客

10-28

1万+

前言对于我来说一个博客系统就是用来总结自己所学得知识的。写写文章，巩固技术，写文章我就采用了mavon-editor,在后台将写好的Markdown文章保存到数据库里，前台在获取Markdown文章将其解析成html代码然后渲染。所以写文章不用愁了，那如何解析Markdown呢！我前前后后用了mavon-editor（包太大），vue-marked（功能少）等等插件来实现！结果不满足预期。所以不如使用marked.js直接解析呢！包小效率高，于是就对marked.js进行封装，实现了目录，运行代码块，图片

如何在vue项目中快速导入marked

jakelihua

03-14

2425

这是marked.js的官网：https://github.com/markedjs/marked。简介：本文讲解在vue项目中如何快速导入marked.js。然后对于vue项目，我们需要修改。然后模仿下面的写法就可以实现了。在里面加上这样的一大段话。

Vue2实现markdown语法支持

weixin_51422386的博客

10-28

3491

vue2实现markdown语法支持

Vue 2

m0_70686037的博客

11-10

1108

Vue.js - 渐进式 JavaScript 框架 | Vue.js官网介绍： Vue是一个用于构建用户界面的渐进式框架构建用户界面：基于数据动态渲染页面渐进式：循序渐进的学习框架：一套完整的项目解决方案，提升开发效率优点: 版本稳定生态系统完善（官网不再维护）脚手架目录文件介绍 & 项目运行流程组件通信。就是指组件与组件之间的数据传递。

Vue中使用Marked

Source

12-01

8137

Vue中使用Marked

Vue 2 项目中内嵌 md 文件

轻风细雨_林木木

06-26

587

【代码】Vue 2 项目中内嵌 md 文件。