Vue 框架的 markdown 渲染组件,针对 AI 的 markdown 流式传输场景

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 能够正常工作(例如: vuevue-i18nmermaidkatex 等)。如果缺少这些依赖项,您将看到警告,并且组件在运行时可能会失败。

在项目的根目录下运行以下命令之一,以安装此存储库的 package.json 中列出的常见对等节点:

pnpm (recommended):

bash 复制代码
pnpm add vue @iconify/vue @vueuse/core class-variance-authority clsx katex mermaid radix-vue tailwind-merge vue-use-monaco

npm:

bash 复制代码
npm install vue @iconify/vue @vueuse/core class-variance-authority clsx katex mermaid radix-vue tailwind-merge vue-use-monaco

yarn:

bash 复制代码
yarn add vue @iconify/vue @vueuse/core class-variance-authority clsx katex mermaid radix-vue tailwind-merge vue-use-monaco

Notes:

  • 安装的版本将默认为最新匹配的版本;确切的对等版本范围在本包的 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 时不会崩溃

https://github.com/Simon-He95/vue-markdown-render

相关推荐
da_vinci_x几秒前
设计稿秒出“热力图”:AI预测式可用性测试工作流,上线前洞察用户行为
前端·人工智能·ui·设计模式·可用性测试·ux·设计师
訾博ZiBo4 分钟前
UI架构的“定海神针”:掌握“视图无关状态提升”原则
前端
Keepreal49612 分钟前
谈谈对XSS,CSRF,SQL注入,DoS和DDoS攻击的理解以及如何预防
前端·安全
sunbyte44 分钟前
每日前端宝藏库 | tinykeys ✨
前端·javascript
Demoncode_y1 小时前
Vue3 + Three.js 实现 3D 汽车个性化定制及展示
前端·javascript·vue.js·3d·汽车·three.js
Dontla1 小时前
Turbopack介绍(由Vercel开发的基于Rust的高性能前端构建工具,用于挑战传统构建工具Webpack、vite地位)Next.js推荐构建工具
前端·rust·turbopack
两个西柚呀1 小时前
nodejs中http模块搭建web服务器
服务器·前端·http
Focusbe1 小时前
百变AI助手:离线优先数据同步方案设计
前端·后端·面试
ObjectX前端实验室2 小时前
React Fiber 双缓冲树机制深度解析
前端·react.js
细节控菜鸡2 小时前
【2025最新】ArcGIS for JS 实现地图卷帘效果,动态修改参数(进阶版)
开发语言·javascript·arcgis