支付宝开源移动端流式 Markdown 渲染引擎 FluidMarkdown

在大模型驱动的智能应用时代,AI 生成内容的规模与复杂度持续攀升。无论是对话助手、智能体服务,还是客服系统与知识问答,Markdown 已成为连接 AI 与用户界面的关键桥梁,让信息表达更清晰、更结构化。

然而,在移动端原生开发中,想要实现高效、流畅的实时 Markdown 渲染并同时兼顾流式增量输出与灵活样式定制,仍是一项棘手的技术挑战。

为此,支付宝终端技术团队推出并开源了 FluidMarkdown ------ 一款专为智能化业务场景打造的移动端原生 Markdown 渲染库。它能够轻松应对大模型的逐字输出,并为开发者提供高度可定制的交互与视觉表现,助力构建新一代智能应用体验。

  • GitHub 地址:github.com/antgroup/Fl...

  • 开源协议:Apache-2.0

  • 支持平台:iOS / Android(HarmonyOS 平台开发中)

为什么选择 FluidMarkdown?

市面上主流的 Markdown 解析方案多集中于 Web 端(如 marked.js、remark),而在移动端原生环境中存在明显不足:

  • 语法覆盖有限:多数库仅支持基础语法,缺乏对复杂嵌套结构或 HTML 扩展的支持;

  • 缺乏流式渲染:无法适配大模型"逐字生成"的特性;

  • 定制能力不足:样式扩展与交互事件(点击、曝光、状态回调等)支持薄弱。

FluidMarkdown 正是为填补这一空白而生。它能够将大模型实时返回的 Markdown 文本,以低延迟、高保真、可交互的方式渲染到原生组件,并支持动态内容追加与高度灵活的视觉定制。

目前,FluidMarkdown 已在蚂蚁集团多个高流量 AI 场景中稳定运行,兼容性、稳定性与扩展性均经过大规模验证。

✨ 核心特性一览

完整 Markdown 语法支持

基于 CommonMark 规范实现,覆盖绝大多数常用语法:

  • 标题、段落、引用、分隔线

  • 有序/无序列表

  • 表格、代码块(支持语言标识)

  • 数学公式(LaTeX)、行内代码

  • 超链接、图片、脚注等

混合 HTML 标签支持

除标准 Markdown 外,还支持部分 HTML 标签渲染,满足富文本扩展需求:

xml 复制代码
<s>, <sup>, <sub>, <mark>, <a>, <span>, <cite>, <del>, <font>, <u>, <img>

双渲染模式:流式 + 全量

  • 流式渲染:边接收边渲染,完美适配大模型的 token 流式输出;

  • 全量渲染:一次性完整渲染,适配传统场景。

高度可定制化的样式系统

通过结构化 Model 暴露渲染节点,开发者可自由控制:

  • 列表前缀符号(数字、字母、自定义 Icon)

  • 字体、颜色、间距等样式属性

  • 自定义标签处理器(见下文扩展能力)

丰富的运行时回调

  • 可点击元素(如链接、图片)的事件监听

  • 内容曝光区域监测(可用于埋点)

  • 打印状态变更通知(开始、进行中、结束)

扩展标签支持(AMHTMLTransformer)

通过 AMHTMLTransformer 支持自定义标签与样式扩展,例如:

  • <icon>

  • <iconlink>

  • 以及部分标准 HTML 标签的样式增强

  • 更多内容可参看 AMHTMLTransformer 类

🤝 欢迎使用并参与 FluidMarkdown

FluidMarkdown 致力于为智能时代提供流畅、灵活的移动端原生 Markdown 渲染体验。FluidMarkdown 的开源愿景是:"共创 AI 基建,贡献点滴变化。"

我们相信,优秀的基础设施源于社区的共同打磨。

无论你是移动端开发者、Markdown 爱好者,还是企业团队,都欢迎参与 FluidMarkdown:

  • 移动端开发者:可以在项目中集成 FluidMarkdown 并反馈使用体验与问题;

  • Markdown 爱好者:可以参与功能扩展、样式优化或贡献代码;

  • 企业团队:可以在实际项目中落地使用,并提出改进建议。

你的参与,都是推动 FluidMarkdown 不断成长的重要力量。

  • 🌟 如果你在体验后如果觉得有价值,请顺手在 GitHub 点一个 Star 支持项目;

  • 💬 如果有任何问题或建议,欢迎提 Issue 或直接联系 maintainer;

  • ✨ 也欢迎 Fork 与 PR。

让我们携手,为下一代智能应用,打造更流畅、更强大的内容呈现方式!

🙏 致谢

FluidMarkdown 的诞生离不开众多开源项目与工程师的努力。我们在此特别致敬以下优秀项目:

同时,也感谢所有曾经参与蚂蚁内部 Markdown 组件建设与贡献的工程师们。

GitHub:github.com/antgroup/Fl...

相关推荐
Simon_He9 天前
这次来点狠的:用 Vue 3 把 AI 的“碎片 Markdown”渲染得又快又稳(Monaco 实时更新 + Mermaid 渐进绘图)
前端·vue.js·markdown
Simon_He11 天前
一款适用于 Vue 的高性能流式 Markdown 渲染器,源自我们的 AI 聊天机器人
前端·vue.js·markdown
xiezhr11 天前
一款带有AI功能的markdown工具
ai·markdown·效率工具·笔记工具
Neverfadeaway12 天前
Jupyter Notebook 介绍、安装及使用
jupyter·markdown·ipython·jupyter详解·jupyter快捷键
Simon_He15 天前
vue-markdown-renderer:比 vercel streamdown 更低 CPU、更多节点支持、真正的流式渲染体验
前端·vue.js·markdown
CodeCraft Studio17 天前
国产化Word处理组件Spire.DOC教程:使用 Python 将 Markdown 转换为 HTML 的详细教程
python·html·word·markdown·国产化·spire.doc·文档格式转换
XiaoMu_00120 天前
【Markdown转Word完整教程】从原理到实现
word·markdown
堆栈future24 天前
AI工作流自动生成公众号图文并发布到wemark
llm·aigc·markdown
程序员大阳24 天前
VSCode中使用Markdown
vscode·markdown·插入图片