Compose Markdown：简洁高效的Jetpack Compose markdown 渲染库
🚀 Compose Markdown：让 Markdown 在 Jetpack Compose 中焕发新生！
🏠 项目主页
在移动开发的世界里，Markdown 渲染一直是个让人头疼的问题。传统的 WebView 笨重缓慢，原生实现又复杂繁琐。但现在，一切都不同了！🎉
✨ 为什么选择 Compose Markdown？
想象一下，你正在开发一个技术博客应用，需要展示复杂的 Markdown 内容。传统方案会让你在性能和功能之间艰难抉择，但 Compose Markdown 让这一切变得轻而易举！
🎯 三大核心优势
1. 🎨 极致定制化 - 你的样式，你做主
🎨全面的样式控制 - 打造独一无二的视觉体验
val customStyle = TypographyStyle(strongEmphasis = SpanStyle(fontWeight = FontWeight.Bold,color = Color(0xFF2196F3) // 蓝色粗体，让重点更突出),code = TextStyle(fontFamily = FontFamily.Monospace,fontSize = 14.sp,color = Color(0xFF37474F),background = Color(0xFFF5F5F5) // 优雅的代码块样式),// 还有更多样式等你探索...
)
不同于那些"一刀切"的解决方案，Compose Markdown 给你完全的样式控制权。从字体颜色到间距布局，从链接样式到代码高亮，每一个细节都可以按你的喜好定制！
🔧 自定义Node识别渲染 - 扩展无极限
更强大的是，你可以为任何Markdown语法元素创建完全自定义的渲染器：
// 自定义警告框渲染器
class AlertRenderer : IBlockRenderer<CustomAlertBlock> {@Composableoverride fun Invoke(node: CustomAlertBlock, modifier: Modifier) {Card(modifier = modifier.fillMaxWidth(),colors = CardDefaults.cardColors(containerColor = when(node.type) {"warning" -> Color(0xFFFFF3CD)"error" -> Color(0xFFF8D7DA)else -> Color(0xFFD1ECF1)})) {Row(modifier = Modifier.padding(16.dp)) {Icon(imageVector = when(node.type) {"warning" -> Icons.Filled.Warning"error" -> Icons.Filled.Errorelse -> Icons.Filled.Info},contentDescription = null)Spacer(modifier = Modifier.width(8.dp))Text(text = node.content)}}}
}// 注册自定义渲染器
val config = MarkdownRenderConfig.Builder().addBlockRenderer(CustomAlertBlock::class.java, AlertRenderer()).build()
这意味着你可以：
- 🎯 识别自定义语法：比如
:::warning警告块 - 🎨 创造专属UI：用Material Design 3组件渲染
- 🔌 无缝集成：与现有Markdown语法完美共存
- 📱 原生体验：完全的Compose风格，而非HTML渲染
2. ⚡ 卓越性能 - 快如闪电的渲染速度
⚡ 异步解析：利用协程和线程池，确保UI线程畅通无阻
传统的 Markdown 渲染器要么同步解析造成卡顿，要么异步处理但逻辑复杂。Compose Markdown 巧妙地提供了双重选择：
// 小文档？同步渲染，即开即用！
MarkdownView(content = shortMarkdown,markdownRenderConfig = config
)// 大文档？异步处理，用户体验满分！
MarkdownView(content = longMarkdown,markdownRenderConfig = config,parseDispatcher = MarkdownThreadPool.dispatcher,onLoading = { CircularProgressIndicator() }
)
这种智能的设计让你可以根据内容大小选择最合适的渲染策略，小文档秒开，大文档不卡顿！
🚀 LazyMarkdownView - 大型文档的终极武器
对于巨型Markdown文件（比如几十MB的技术文档），我们提供了革命性的分块懒加载方案：
LazyMarkdownView(file = File("huge_documentation.md"), // 50MB的技术文档markdownRenderConfig = config,chunkLoaderConfig = ChunkLoaderConfig(parserDispatcher = MarkdownThreadPool.dispatcher,chunkSize = 1024 * 50 // 50KB分块大小),nestedPrefetchItemCount = 5 // 预加载5个分块
)
分块加载的魔法：
- 📊 智能分块：将大文件切分为小块，按需解析
- 👀 可视区域优化：只渲染用户可见的内容
- 🔮 预测性加载：根据滚动方向智能预加载
- 💾 内存友好：不再担心OOM，无论文件多大
- ⚡ 流畅滚动：内置预取策略，滚动丝滑如缎
这种设计让你可以轻松处理任意大小的Markdown文件，从几KB的README到几百MB的完整项目文档，统统不在话下！
3. 🏗️ 现代架构 - 100% Jetpack Compose
告别混合开发的痛苦！Compose Markdown 从头到尾都是纯 Compose 实现：
- 🎭 状态管理：使用
remember和mutableStateOf进行智能缓存 - 🔄 异步处理：
LaunchedEffect配合协程，丝滑如缎 - 🧩 模块化设计：每个组件都是独立的 Composable，复用性极强
🛠️ 简单上手，立即体验
基础用法 - 3 行代码搞定
@Composable
fun MyMarkdownScreen() {val markdownContent = """# 欢迎使用 Compose Markdown! 🎉这是一个**超棒**的 Markdown 渲染库：- ✅ 支持标准语法- 🎨 完全可定制- ⚡ 性能卓越```kotlin// 代码高亮也很漂亮！fun hello() = println("Hello Compose!")```| 特性 | 支持度 ||------|--------|| 表格 | ✅ 完美 || 图片 | ✅ 完美 || 链接 | ✅ 完美 |"""MarkdownView(content = markdownContent,markdownRenderConfig = MarkdownRenderConfig.Builder().build())
}
就是这么简单！三行代码，你就拥有了一个功能完整的 Markdown 渲染器！
进阶定制 - 打造专属风格
@Composable
fun CustomStyledMarkdown() {val config = MarkdownRenderConfig.Builder().typographyStyle(TypographyStyle(// 自定义段落间距spaceHeight = 12.dp,// 炫酷的分割线breakLineColor = Color(0xFF6200EA),)).build()MarkdownView(content = yourMarkdown,markdownRenderConfig = config,linkInteractionListener = { url ->// 自定义链接点击处理openInBrowser(url)})
}
懒加载列表 - 处理海量内容
对于包含大量 Markdown 内容的列表，我们还贴心地提供了 LazyMarkdownView：
LazyMarkdownView(file = file,markdownRenderConfig = config,modifier = Modifier.fillMaxSize().padding(16.dp))
🔥 实战场景
📱 技术博客应用
想象你在开发一个类似掘金的技术分享应用，Compose Markdown 让你轻松实现：
- 📝 文章内容的完美渲染
- 🎨 主题切换的无缝适配
- 🔗 站内链接的智能跳转
📚 笔记管理工具
构建下一代的笔记应用？Compose Markdown 为你提供：
- ⚡ 实时预览功能
- 🏷️ 自定义标签样式
- 📊 表格和图表的原生支持
💬 聊天应用
在聊天应用中支持 Markdown？小菜一碟：
- 💬 消息气泡内的格式化文本
- 📋 代码片段的语法高亮
- 🔗 链接的自动识别和渲染
🌟 架构亮点
插件化设计
// 需要任务列表功能？轻松扩展！
val configWithTasks = MarkdownRenderConfig.Builder().addRenderPlugin(TaskMarkdownRenderPlugin()) // 支持 - [ ] 任务列表.build()
清晰的状态定义让错误处理变得优雅而可靠。
🎯 性能优化黑科技
- 智能解析策略：小内容同步解析，大内容异步处理
- 内存优化：使用
remember避免重复解析 - 线程池管理：专门的
MarkdownThreadPool确保性能 - 懒加载支持：大列表场景下的内存友好
- 分块加载渲染：处理超大文件的利器
🚀 未来展望
Compose Markdown 不仅仅是一个渲染库，更是一个生态系统：
- 🔧 扩展性：插件化架构支持自定义语法
- 🎨 主题系统：Material Design 3 完美集成
- 📊 数据可视化：未来支持图表和数学公式
- 🌐 多平台：Compose Multiplatform 适配在路上
💡 结语
在 Jetpack Compose 的世界里，Compose Markdown 不只是一个工具，更是一个革命性的突破。它证明了现代 Android 开发可以既优雅又高效，既强大又简洁。
无论你是在构建下一个爆款应用，还是在完善现有项目的用户体验，Compose Markdown 都将是你最可靠的伙伴。
现在就开始你的 Compose Markdown 之旅吧！让每一行 Markdown 都绽放出 Compose 的光芒！ ✨
Made with ❤️ by Compose enthusiasts, for the Android community.
📖 快速链接
- 🏠 项目主页