在开发现代前端应用时，特别是与 AI 大模型交互的场景中，我们经常会遇到这样的需求：
- 需要美观地展示 ChatGPT、Claude 等大模型生成的 Markdown 内容
- 希望在 Markdown 中嵌入图表、自定义组件等富交互元素
- 想要实现打字机效果等流式渲染，但传统 Markdown 渲染器力不从心
- 对 Markdown 渲染结果需要更精细的控制和定制
如果你也和我遇到了一样的需求，没关系！我写了一个组件库，拿去用！
源码和文档在最后
✨ @vunk/markdown 是什么？
@vunk/markdown 是一个基于 markdown-it 的增强型 Markdown 渲染库，专为现代 Vue 3 应用设计。它的核心使命是增强 Markdown 内容在页面中的表现力，通过自定义渲染策略将传统的 Markdown 文本转换为丰富的交互式组件。
直接来看 两个实现
🎯 核心特色
| 传统 Markdown 渲染器 | @vunk/markdown |
|---|---|
| 直接输出 HTML 字符串 | 输出 Vue 组件树 |
| 固定的渲染样式 | 完全可定制的组件模板 |
| 静态内容展示 | 支持交互式组件 |
| 扩展性有限 | 基于策略模式的无限扩展 |
🚀 快速上手
安装
pnpm install @vunk/markdown -S
基础使用
<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 中嵌入任何自定义组件！
内置图表支持
<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：处理自定义容器（如图表、特殊组件等）
可扩展的渲染策略
<!-- 你可以轻松添加自己的渲染策略 -->
<VkMarkdown :source="content">
<VkTemplatesDefault />
<VkTemplatesContainer />
<!-- 添加你的自定义模板 -->
<MyCustomTemplates />
</VkMarkdown>
🎉 总结
@vunk/markdown 是一个为了现代 Vue 3 应用量身定制的内容展示解决方案。它的小而美的设计理念，强大的扩展能力，以及对 AI 时代内容展示需求的深度理解，让它成为了 Vue 开发者的理想选择。
🌈 立即开始
pnpm install @vunk/markdown -S
GitHub 地址: vunk-markdown
文档地址: 在线文档
如果你觉得这个库对你有帮助，别忘了给个 ⭐️ Star 支持一下！同时欢迎提 Issue 和 PR
