豆包、元宝、difyapi返回的数据，vue上解析显示，保留原有的样式

这个问题本质上是第三方 LLM API豆包 / 元宝 / Dify返回的 Markdown / 结构化文本如何在 Vue 中正确解析并尽量保留原始样式。下面我用「通用思路 Vue3 实战代码」一步步说明。一、先搞清楚它们返回的是什么平台常见返回格式豆包Markdown / 伪 HTML元宝MarkdownDifyMarkdown / JSON含answer字段共同点✅ 本质是Markdown​✅ 需要渲染为 HTML 并保留样式二、整体方案推荐✅Markdown → HTML → Vue v-html → 自定义样式API 返回 Markdown ↓ markdown-it 解析 ↓ HTML 字符串 ↓ v-html 渲染 ↓ CSS 还原“原有样式”三、Vue3 标准解析方案通用1️⃣ 安装依赖npm install markdown-it markdown-it-highlightjsnpm install highlight.js2️⃣ 封装统一 MarkdownRenderer 组件!-- components/MarkdownRenderer.vue -- template div classmarkdown-wrapper v-htmlrenderedHtml/div /template script setup import { ref, watchEffect } from vue import MarkdownIt from markdown-it import hljs from highlight.js import highlight.js/styles/github.css const props defineProps({ content: String }) const md new MarkdownIt({ html: true, linkify: true, typographer: true, highlight(code, lang) { if (lang hljs.getLanguage(lang)) { try { return hljs.highlight(code, { language: lang }).value } catch {} } return } }) const renderedHtml ref() watchEffect(() { renderedHtml.value md.render(props.content || ) }) /script style scoped .markdown-wrapper { font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto; line-height: 1.75; color: #333; } .markdown-wrapper h1, .markdown-wrapper h2, .markdown-wrapper h3 { margin-top: 24px; font-weight: 600; } .markdown-wrapper pre { background: #f6f8fa; padding: 16px; border-radius: 8px; overflow: auto; } .markdown-wrapper code { font-family: Menlo, Monaco, monospace; } .markdown-wrapper table { border-collapse: collapse; width: 100%; } .markdown-wrapper th, .markdown-wrapper td { border: 1px solid #ddd; padding: 8px 12px; } /style3️⃣ 使用示例豆包 / 元宝 / Dify 通用template MarkdownRenderer :contentaiAnswer / /template script setup import { ref, onMounted } from vue import axios from axios const aiAnswer ref() onMounted(async () { const res await axios.post(/api/dify, { query: 介绍一下 Vue 渲染 Markdown }) aiAnswer.value res.data.answer }) /script四、Dify API 返回格式适配Dify 常见返回{ answer: ## 结果\n\njs\nconsole.log(hello)\n }✅ 直接用MarkdownRenderer :contentres.data.answer /五、如何“保留原有样式”关键✅ 方法 1复用官方 CSS最像原版来源样式GitHubgithub.css豆包仿 Ant Design元宝类似腾讯文档import url(https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.3.0/github-markdown.min.css);div classmarkdown-body MarkdownRenderer :contenttext / /div✅ 方法 2自定义 Token 映射高级如果你想完全还原某个平台的 UImd.renderer.rules.heading_open (tokens, idx) { return h${tokens[idx].tag} classcustom-heading }六、安全处理强烈建议npm install sanitize-htmlimport sanitizeHtml from sanitize-html renderedHtml.value sanitizeHtml( md.render(props.content), { allowedTags: sanitizeHtml.defaults.allowedTags.concat([img]), allowedAttributes: { *: [class, style], a: [href, target] } } )七、最终推荐组合 ✅场景推荐AI 对话markdown-it highlight.js文档展示github-markdown-css富交互自定义 token 规则安全sanitize-html