Vue 框架的 markdown 渲染组件，针对 AI 的 markdown 流式传输场景
vue-renderer-markdown 专门构建用于处理从 AI 模型流式传输 Markdown 内容以及实时更新的独特需求，即使 Markdown 块不完整或快速变化，也能提供流畅的格式化效果。
🚀 Live Demo
Features
- ⚡ 超高性能：针对实时流媒体进行了优化，最大限度减少重新渲染次数，并实现高效的 DOM 更新
- 🌊 流式优先设计：专门构建用于处理不完整、快速更新且标记化的 Markdown 内容
- ⌨️ 智能打字机效果：实时光标跟踪，具备自动定位和性能优化的动画效果
- 🧩 自定义组件：在 Markdown 内容中无缝集成您的 Vue 组件
- 📝 完整的 Markdown 支持：表格、数学公式、表情符号、复选框、代码块等等
- 🔄 实时更新：处理部分内容和增量更新，不会破坏格式
- 📦 优先使用 TypeScript：具备智能自动补全功能的完整类型定义
- 🔌 零配置：开箱即用，可与任何 Vue 3 项目无缝集成的组件
安装
bash
pnpm add vue-renderer-markdown
# or
npm install vue-renderer-markdown
# or
yarn add vue-renderer-markdown安装依赖项（重要）
此软件包声明了一些您的项目也必须安装的依赖项，以便 vue-renderer-markdown 能够正常工作（例如： vue 、 vue-i18n 、 mermaid 、 katex 等）。如果缺少这些依赖项，您将看到警告，并且组件在运行时可能会失败。
在项目的根目录下运行以下命令之一，以安装此存储库的 package.json 中列出的常见对等节点：
pnpm (recommended):
bash
pnpm add vue @iconify/vue @vueuse/core class-variance-authority clsx katex mermaid radix-vue tailwind-merge vue-use-monaconpm:
bash
npm install vue @iconify/vue @vueuse/core class-variance-authority clsx katex mermaid radix-vue tailwind-merge vue-use-monacoyarn:
bash
yarn add vue @iconify/vue @vueuse/core class-variance-authority clsx katex mermaid radix-vue tailwind-merge vue-use-monacoNotes:
- 安装的版本将默认为最新匹配的版本；确切的对等版本范围在本包的
package.json中声明；如果您需要特定版本，请查阅它。 - 某些组件（例如
vue-use-monaco/monaco-editor）是否安装取决于您计划使用哪些功能------仅安装您需要的组件。 - 如果您在单体仓库内安装此库或使用 pnpm 工作区，请在工作区根目录安装依赖项，以便在使用该库的包中可用。
Why vue-renderer-markdown?
从 AI 模型、实时编辑器或实时更新中流式传输 Markdown 内容会带来独特的挑战：
- 不完整的语法块可能会破坏传统的解析器
- 内容的快速变化会导致过度重渲染和性能问题
- 动态内容使光标定位变得复杂
- 部分标记需要优雅处理，避免出现视觉故障
vue-renderer-markdown 通过采用流优化架构解决了这些难题，即使在最苛刻的实时场景下，也能保持完美的格式和性能。
用法
流式 Markdown（推荐）
非常适合用于 AI 模型响应、实时内容更新或任何需要实时 Markdown 渲染的场景：
vue
<script setup lang="ts">
import { ref } from 'vue'
import MarkdownRender from 'vue-renderer-markdown'
const content = ref('')
const fullContent = `# Streaming Content\n\nThis text appears character by character...`
// Simulate streaming content
let index = 0
const interval = setInterval(() => {
if (index < fullContent.length) {
content.value += fullContent[index]
index++
}
else {
clearInterval(interval)
}
}, 50)
</script>
<template>
<MarkdownRender :content="content" :typewriter-effect="true" />
</template>基本用法
对于静态或预生成的 Markdown 内容：
vue
<script setup lang="ts">
import MarkdownRender from 'vue-renderer-markdown'
const markdownContent = `
# Hello Vue Markdown
This is **markdown** rendered as HTML!
- Supports lists
- [x] Checkboxes
- :smile: Emoji
`
</script>
<template>
<MarkdownRender :content="markdownContent" />
</template>性能特点
该流媒体优化引擎提供：
- 增量解析代码块：仅处理更改的内容，而非整个代码块
- 高效的 DOM 更新：最小化重新渲染
- 实时光标跟踪：流畅的光标定位
- 内存优化：智能清理功能可防止长时间流媒体会话期间出现内存泄漏
- 基于动画帧：流畅的动画效果
- 优雅降级：处理格式错误或不完整的 Markdown 时不会崩溃