告别AI回答的‘乱码’：手把手教你用mp-html+marked在uni-app小程序里优雅展示Markdown
在开发AI问答类应用时，后端返回的Markdown文本直接展示在小程序中往往会出现格式混乱、代码块无法高亮等问题。本文将详细介绍如何在uni-app中通过mp-html和marked的组合方案，实现Markdown内容的优雅展示。
1. 为什么需要Markdown解析方案
AI助手返回的文本通常包含丰富的Markdown语法元素：标题、列表、代码块、表格等。原生的小程序组件无法直接解析这些语法，导致用户看到的是包含各种符号的"乱码"文本。
主要痛点包括：
- 代码块显示为普通文本，失去语法高亮
- 无序列表和有序列表无法正确渲染
- 表格结构完全混乱
- 链接和图片无法正常展示
通过mp-html+marked的组合方案，我们可以将Markdown转换为结构化的HTML，再通过mp-html组件在小程序中完美呈现。
2. 技术选型：mp-html vs towxml
在uni-app生态中，主要有两种主流的Markdown解析方案：
| 特性 | mp-html | towxml |
|---|---|---|
| 多端支持 | 全平台支持 | 仅微信小程序 |
| 性能 | 优秀 | 良好 |
| 代码高亮 | 需配合highlight.js | 内置基本高亮 |
| 维护状态 | 活跃更新 | 维护较少 |
| 体积 | 较大 | 较小 |
对于需要跨平台的项目，mp-html是更好的选择。它不仅在微信小程序表现良好，也能完美适配H5和其他小程序平台。
3. 完整实现方案
3.1 安装依赖
首先通过npm安装所需依赖：
npm install mp-html marked highlight.js3.2 基础配置
在页面中引入组件和库：
import mpHtml from "mp-html/dist/uni-app/components/mp-html/mp-html"; import { marked } from "marked"; import hljs from "highlight.js"; import "highlight.js/styles/atom-one-dark.css";3.3 初始化Marked和代码高亮
配置marked和highlight.js的初始化参数：
methods: { initMarked() { hljs.configure({ useBR: true, tabReplace: " ", }); marked.setOptions({ renderer: new marked.Renderer(), gfm: true, tables: true, breaks: false, pedantic: false, highlight: function(code, lang) { if (lang && hljs.getLanguage(lang)) { return hljs.highlight(lang, code, true).value; } return hljs.highlightAuto(code).value; } }); } }3.4 转换并渲染Markdown
在mounted钩子中初始化并转换Markdown：
mounted() { this.initMarked(); this.html = marked(this.markdownText) .replace(/<pre>/g, '<pre class="hljs">'); }4. 样式优化技巧
默认的渲染结果可能不符合产品设计风格，可以通过CSS进行深度定制：
/* 代码块样式 */ .hljs { border-radius: 8px; padding: 12px; font-family: 'Menlo', monospace; font-size: 14px; } /* 表格样式 */ table { border-collapse: collapse; width: 100%; } th, td { border: 1px solid #ddd; padding: 8px; } /* 列表样式 */ ul, ol { padding-left: 20px; }5. 性能优化建议
当处理大量Markdown内容时，可以考虑以下优化措施：
- 延迟渲染：对于长内容，分批渲染
- 缓存结果：对转换后的HTML进行缓存
- 按需加载：只加载当前可视区域的内容
- 精简highlight.js：只引入需要的语言包
// 按需引入语言包 import javascript from 'highlight.js/lib/languages/javascript'; hljs.registerLanguage('javascript', javascript);6. 常见问题解决方案
Q1: 图片无法显示怎么办？
在mp-html配置中添加图片域名白名单：
<mp-html :content="html" domain="https://your-cdn-domain.com" />Q2: 如何处理Markdown中的自定义组件？
可以通过marked的renderer自定义渲染逻辑：
const renderer = new marked.Renderer(); renderer.heading = function(text, level) { return `<custom-heading level="${level}">${text}</custom-heading>`; };Q3: 如何支持数学公式？
可以引入katex库进行额外处理：
import katex from 'katex'; import 'katex/dist/katex.min.css'; // 在marked选项中处理公式 marked.setOptions({ // ...其他配置 extensions: [{ name: 'math', level: 'inline', start(src) { return src.indexOf('$') === 0; }, tokenizer(src, tokens) { const match = src.match(/^\$+([^$\n]+?)\$+/); if (match) { return { type: 'math', raw: match[0], text: match[1].trim() }; } }, renderer(token) { return katex.renderToString(token.text); } }] });在实际项目中，我们发现代码块的高亮显示对开发者用户特别重要。通过合理的样式调整，可以让技术文档的阅读体验提升数个档次。
