vue3 markdown组件|大模型应用专用

🌟 这组件到底牛在哪?

⚡️ 性能炸裂

别家组件渲染长文本时像在加载大型游戏?我们直接基于Markdown生成VNode,实现增量渲染

🔧 灵活到离谱:想用啥样式就用啥样式

插槽覆盖全场景自定义,举例几个高频用法:

  • 自定义行内 vue组件 :通过 htmlInline插槽可捕获 markdown 中的行内 HTML 标签(如span),并基于标签属性(attrs)自定义交互逻辑,适用于实现引用标注、动态提示等功能。,完美解决DOM直接插入导致的不可进行交互的弊端
html 复制代码
<template>
  <AgentMarkdown
    :content="content"
    :md-options="{
      breaks: true,
      html: true,
    }"
    :sanitize="true"
  >
    <template #htmlInline="{ tags, attrs }">
      <span v-if="tags === 'span' && attrs[0].type === 'quote'" class="quote-tag">{{
        attrs[0].title
      }}</span>
    </template>
  </AgentMarkdown>
</template>

<script setup lang="ts">
import { AgentMarkdown } from 'agent-markdown-vue';

const content = `
地铁 6 号线串联虎丘、拙政园、平江路等景点,建议优先使用<span data-type="quote" data-title="苏州市人民政府" data-content=""五一"假期,古城旅游交通出行攻略"> </span> 。苏州地铁 6 号线在苏州中心区域,连接了苏州中心、虎丘、拙政园、平江路等景点。
`;
</script>
  • 自定义块级 vue组件 :通过 htmlBlock插槽可处理块级 HTML 标签(如div),结合标签属性实现复杂的块级交互组件,例如带标题和元数据的自定义卡片。
html 复制代码
<template>
  <AgentMarkdown :content="content" :md-options="{ breaks: true, html: true }" :sanitize="true">
    <template #htmlBlock="{ tags, attrs }">
      <div v-if="tags === 'div' && attrs[0].type === 'code'" class="code-block">
        <div class="top">{{ attrs[0].title }}</div>
        <div class="bottom">创建时间:{{ attrs[0].time }}</div>
      </div>
    </template>
  </AgentMarkdown>
</template>

<script setup lang="ts">
import { AgentMarkdown } from 'agent-markdown-vue';
const content = `
根据你的要求,我调整了代码结构:
<div data-type="code" data-title="javascript快速排序的示例" data-time="2023-08-01" data-content="function quickSort(arr) {
  if (arr.length <= 1) {
    return arr;
  }
  const pivot = arr[0];
  const left = [];
  const right = [];
  for (let i = 1; i < arr.length; i++) {
    if (arr[i] < pivot) {
      left.push(arr[i]);
    } else {
      right.push(arr[i]);
    }
  }
  return [...quickSort(left), pivot, ...quickSort(right)];
}">  </div>
`;
</script>
  • 代码块:想换高亮风格?随便插!
html 复制代码
<agent-markdown :content="md">
    <template #javascript="{ rawCode }">
        <MyHighlight :code="rawCode" theme="dark" />
    </template>
</agent-markdown>
  • mermaid流程图:自带平滑渲染效果(附核心代码)
html 复制代码
<template #mermaid="{ rawCode }">
    <MyMermaid :content="rawCode" />
    <!-- 内置防抖+交替渲染,避免闪烁 -->
</template>
  • 图片:懒加载、预览、水印可根据自己的需求进行封装组件
html 复制代码
<template #image="{ src, alt }">
    <MyImage :src="src" :alt="alt" lazy />
</template>

🛡️ 企业级安全:防XSS就像戴了金钟罩

用户输入的内容不敢直接渲染?开启sanitize: true就行:

  • 基于dompurify自动过滤危险HTML

  • 白名单机制严格限制允许的标签/属性

  • 公式、代码块等特殊内容单独处理,安全不打折

🚀 5分钟上手教程

1. 安装

bash 复制代码
# npm
npm install agent-markdown-vue --save-dev
# yarn
yarn add agent-markdown-vue --save-dev
# pnpm
pnpm add agent-markdown-vue --save-dev

2. 基础用法

html 复制代码
<template>
    <agent-markdown
        :content="llmResponse"
        :sanitize="true" 
        @link-click="handleLink"
    />
</template>
<script setup>
import { AgentMarkdown } from 'agent-markdown-vue'

// 大模型返回的markdown内容
const llmResponse = `
# 这是LLM生成的内容
- 支持**加粗**、*斜体*
- 代码块:
\`\`\`javascript
console.log('agent-markdown-vue')
\`\`\`
- 公式:$E=mc^2$
`
const handleLink = (e: Event, href: string, title: string) => { window.open(href, '_blank'); };
</script>

🌱 开源地址 & 贡献指南

👉 在线文档

👉 GitHub仓库 求个star🌟🌟🌟!

目前还在快速迭代中,欢迎大家:

  • 提issue反馈bug/需求

  • 提交PR参与开发(新手友好,有详细贡献指南)

  • 用它开发项目后告诉我,我会收录到案例库~

最后说句掏心窝子的话:做这个组件时踩了无数坑,现在把解决方案开源出来,就是希望大家能少走弯路。如果它帮到了你,欢迎转发给更多有需要的同学,咱们一起让LLM应用开发更简单!💪

相关推荐
じòぴé南冸じょうげん6 小时前
微信小程序如何进行分包处理?
前端·小程序
Jolyne_6 小时前
Table自定义单元格渲染分享
前端
加载中3616 小时前
pnpm时代包版本不一致问题还是否存在
前端·面试·npm
老马啊老马6 小时前
30 分钟搞定!Docker+Jenkins+Nginx + 腾讯云实现前端 CI/CD
前端
虫无涯6 小时前
Doc2X为一切AI文档服务的基础设施,将PDF转换为Word、HTML、LaTeX、Markdown等
人工智能
VillenK6 小时前
用插件的方式注入Vue组件
前端·vue.js
倔强的石头1066 小时前
卷积神经网络(CNN):从图像识别原理到实战应用的深度解析
人工智能·神经网络·cnn
爆改模型6 小时前
【ICCV2025】计算机视觉|即插即用|ESC:颠覆Transformer!超强平替,ESC模块性能炸裂!
人工智能·计算机视觉·transformer
掘金安东尼6 小时前
Node.js 如何在 2025 年挤压 I/O 性能
前端·javascript·github