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

相关推荐
光影少年11 分钟前
前端线上出现白屏如何排查问题所在,利用第三方的工具都有哪些
前端·学习·web安全·前端框架
濑户川14 分钟前
Vue3 计算属性与监听器:computed、watch、watchEffect 用法解析
前端·javascript·vue.js
_Sem24 分钟前
KMP实战:从单端到跨平台的完整迁移指南
android·前端·app
Carry34526 分钟前
React 与 Vue 开发差异——CSS 样式
前端
前端九哥29 分钟前
我删光了项目里的 try-catch,老板:6
前端·vue.js
2301_7644413329 分钟前
身份证校验工具
前端·python·1024程序员节
顽疲41 分钟前
SpringBoot + Vue 集成阿里云OSS直传最佳实践
vue.js·spring boot·阿里云
4Forsee1 小时前
【Android】View 事件分发机制与源码解析
android·java·前端
VT.馒头1 小时前
【力扣】2725. 间隔取消
javascript·leetcode·1024程序员节
一 乐1 小时前
车辆管理|校园车辆信息|基于SprinBoot+vue的校园车辆管理系统(源码+数据库+文档)
java·前端·数据库·vue.js·论文·毕设·车辆管理