vue-renderer-markdown

针对 Vue 3 的高性能、流式友好型 Markdown 渲染组件 — 支持渐进式 Mermaid、流式 diff 代码块以及为大文档优化的实时预览。

📖 所有详细文档、API、示例和高级用法已迁移至 VitePress 中文文档站点： https://vue-markdown-renderer-docs.simonhe.me/zh/guide/

🚀 实时演示

• Playground（交互演示）： https://vue-markdown-renderer.simonhe.me/
• 交互测试页面： https://vue-markdown-renderer.simonhe.me/test

交互测试页面

• 试用交互式测试页面以便快速验证与调试： https://vue-markdown-renderer.simonhe.me/test

  此页面提供左侧编辑器与右侧实时预览（由本库驱动）。页面包含“生成并复制分享链接”功能，会将你的输入编码到 URL 中以便分享；当输入过长无法嵌入 URL 时，会提供直接打开或预填 GitHub Issue 的回退流程。

  你可以使用该页面复现渲染问题，验证数学公式 / Mermaid / 代码块的渲染行为，并快速生成可共享链接或带复现信息的 issue。

介绍视频

一段短视频介绍了 vue-renderer-markdown 的关键特性与使用方式。

在 Bilibili 上观看： Open in Bilibili

快速链接

• ⚡ 极致性能：为流式场景设计的最小化重渲染和高效 DOM 更新
• 🌊 流式优先：原生支持不完整或频繁更新的 token 化 Markdown 内容
• 🧠 Monaco 流式更新：高性能的 Monaco 集成，支持大代码块的平滑增量更新
• 🪄 渐进式 Mermaid：图表在语法可用时即时渲染，并在后续更新中完善
• 🧩 自定义组件：允许在 Markdown 内容中嵌入自定义 Vue 组件
• 📝 完整 Markdown 支持：表格、公式、Emoji、复选框、代码块等
• 🔄 实时更新：支持增量内容而不破坏格式
• 📦 TypeScript 优先：提供完善的类型定义与智能提示
• 🔌 零配置：开箱即可在 Vue 3 项目中使用
• 🎨 灵活的代码块渲染：可选 Monaco 编辑器 (CodeBlockNode) 或轻量的 Shiki 高亮 (MarkdownCodeBlockNode)

故障排查 & 常见问题

详细故障排查与常见问题已迁移至文档站点： https://vue-markdown-renderer-docs.simonhe.me/zh/guide/troubleshooting

如需更多帮助，请到 GitHub Issues 创建问题： https://github.com/Simon-He95/vue-markdown-render/issues

鸣谢

本项目使用并受益于：

• stream-monaco
• stream-markdown
• mermaid
• shiki

感谢这些项目的作者与贡献者！

Star 历史

许可

MIT © Simon He