在大模型驱动的智能应用浪潮中,从对话助手到智能体服务,从知识问答到代码生成,AI 输出日益倾向以 Markdown 进行结构化表达。Markdown 不仅提供语义清晰的文本规范,更成为连接大模型输出与用户界面的关键桥梁。
在鸿蒙生态的移动端开发中,如何高效、流畅地渲染 AI 实时输出的 Markdown 内容?如何在保持高性能的同时,支持流式增量渲染、高度可定制样式与深度交互能力?
FluidMarkdown 宣布新增对 HarmonyOS 的原生支持,采用 Apache 2.0 开源协议。至此,FluidMarkdown 实现了 iOS / Android / HarmonyOS 全平台、性能卓越的纯原生 Markdown 流式渲染解决方案。
🔗 GitHub 地址:
https://github.com/antgroup/FluidMarkdown
鸿蒙版核心特性一览
完整 Markdown 语法支持
FluidMarkdown 鸿蒙版使用成熟、可靠、高性能的 Markdown 语法解析器,完全兼容 CommonMark 等流行规范,为业务产品的研发演进提供了最为完备的语法层面支持:
标题、段落、引用、分隔线
有序/无序列表、任务列表
表格、代码块(含语法高亮)、行内代码
数学公式(LaTeX)、脚注、超链接、图片等
< 左右滑动查看更多 >
混合 HTML 标签安全渲染
支持<s>、<sup>、<sub>、<mark>、<u>、<img>等常用标签,嵌套Markdown标准语法,兼顾灵活性与安全性。
< 左右滑动查看更多 >
真正的流式渲染(Streaming Render)
支持 增量追加,完美匹配大模型“打字机”式输出;
渲染过程零闪烁、无回流,保障丝滑体验;
同时兼容全量渲染,无缝切换使用场景。
深度鸿蒙原生集成
基于 ArkTS + Stage 模型 构建,100% 纯原生组件;
极致可定制的样式系统
通过结构化 Model 暴露每个渲染节点,开发者可自由控制:
列表前缀(数字、字母、自定义图标)
字体、颜色、行高、边距等视觉属性
自定义标签处理器(如<icon>、<iconlink>)
丰富的运行时交互能力
链接/图片点击回调
内容区域曝光监测(可用于埋点与性能分析)
渲染状态通知(开始、进行中、完成)
技术理念:轻量 · 稳定 · 可扩展
FluidMarkdown for HarmonyOS 延续了项目一贯的设计哲学:
最小侵入:仅需几行代码即可嵌入聊天页、知识卡片、AI 助手等业务模块;
解耦架构:解析层、样式层、渲染层清晰分离,便于二次开发。
快速接入示例(HarmonyOS)
import{Markdown,EMarkdownMode,MarkdownController}from'FluidMarkdown';@ComponentV2exportstructMyComponent{@Paramcontent?:string=undefined;privatescroller:Scroller=newScroller();privatemarkdownController:MarkdownController=newMarkdownController();build() {Scroll(this.scroller) {Markdown({content:this.content,controller:this.markdownController,mode:EMarkdownMode.Normal,onMarkdownTypingReady) =>{},
onMarkdownAreaChange) =>{},
onMarkdownNodeClick:data=>{},}).margin(12)}.width('100%').height('100%').scrollable(ScrollDirection.Vertical).margin(12)}}
| 欢迎光临 链载Ai (http://www.lianzai.com/) | Powered by Discuz! X3.5 |