老板：让 AI 大模型输出📊图表&🗺️地图

在开发现代前端应用时，特别是与 AI 大模型交互的场景中，我们经常会遇到这样的需求：

需要美观地展示 ChatGPT、Claude 等大模型生成的 Markdown 内容
希望在 Markdown 中嵌入图表、自定义组件等富交互元素
想要实现打字机效果等流式渲染，但传统 Markdown 渲染器力不从心
对 Markdown 渲染结果需要更精细的控制和定制

如果你也和我遇到了一样的需求，没关系！我写了一个组件库，拿去用！

源码和文档在最后

✨ @vunk/markdown 是什么？

@vunk/markdown 是一个基于 markdown-it 的增强型 Markdown 渲染库，专为现代 Vue 3 应用设计。它的核心使命是增强 Markdown 内容在页面中的表现力 ，通过自定义渲染策略将传统的 Markdown 文本转换为丰富的交互式组件。

直接来看 两个实现

🎯 核心特色

传统 Markdown 渲染器	@vunk/markdown
直接输出 HTML 字符串	输出 Vue 组件树
固定的渲染样式	完全可定制的组件模板
静态内容展示	支持交互式组件
扩展性有限	基于策略模式的无限扩展

🚀 快速上手

安装

bash 复制代码

pnpm install @vunk/markdown -S

基础使用

vue 复制代码

<script setup>
import { VkMarkdown, VkTemplatesDefault } from '@vunk/markdown'

const markdownContent = `
# Hello, @vunk/markdown!

这是一个**增强型** Markdown 渲染器示例。

## 特性展示
- 支持所有标准 Markdown 语法
- *斜体*、**粗体**、\`行内代码\`
- [链接](https://github.com)

\`\`\`javascript
// 代码高亮
console.log('Hello World!')
\`\`\`
`
</script>

<template>
  <VkMarkdown :source="markdownContent">
    <VkTemplatesDefault />
  </VkMarkdown>
</template>

🌟 自定义容器

这是 @vunk/markdown 最强大的特性之一 ------ 自定义容器支持。你可以在 Markdown 中嵌入任何自定义组件！

内置图表支持

vue 复制代码

<script setup>
import { VkMarkdown, VkTemplatesDefault, VkTemplatesContainer } from '@vunk/markdown'

const chartMarkdown = `
# 数据可视化示例

下面是一个动态图表：

:::echarts
\`\`\`json
{
  "title": {
    "text": "销量统计"
  },
  "tooltip": {},
  "xAxis": {
    "data": ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
  },
  "yAxis": {},
  "series": [{
    "name": "销量",
    "type": "bar",
    "data": [5, 20, 36, 10, 10, 20]
  }]
}
\`\`\`
:::
`
</script>

<template>
  <VkMarkdown 
    :source="chartMarkdown"
    :containers="['echarts']"
  >
    <VkTemplatesDefault />
    <VkTemplatesContainer />
  </VkMarkdown>
</template>

🎨 策略模式的优雅实现

@vunk/markdown 采用了策略模式的设计理念，通过不同的 Templates 组件来处理不同类型的 Markdown 内容：

核心组件

VkMarkdown：主组件，负责解析 Markdown 并协调渲染策略
VkTemplatesDefault：处理标准 Markdown 元素（标题、段落、列表等）
VkTemplatesContainer：处理自定义容器（如图表、特殊组件等）

可扩展的渲染策略

vue 复制代码

<!-- 你可以轻松添加自己的渲染策略 -->
<VkMarkdown :source="content">
  <VkTemplatesDefault />
  <VkTemplatesContainer />
  <!-- 添加你的自定义模板 -->
  <MyCustomTemplates />
</VkMarkdown>

🎉 总结

@vunk/markdown 是一个为了现代 Vue 3 应用量身定制的内容展示解决方案。它的小而美的设计理念，强大的扩展能力，以及对 AI 时代内容展示需求的深度理解，让它成为了 Vue 开发者的理想选择。

🌈 立即开始

bash 复制代码

pnpm install @vunk/markdown -S

GitHub 地址 : vunk-markdown

文档地址 : 在线文档

如果你觉得这个库对你有帮助，别忘了给个 ⭐️ Star 支持一下！同时欢迎提 Issue 和 PR