🚀 Compose Markdown：简洁高效的Jetpack Compose markdown 渲染库Jetpack

🚀 Compose Markdown：让 Markdown 在 Jetpack Compose 中焕发新生！

创作不易,博主自制微信小程序《宝宝学加减》,烦请大家搜索打开支持下,如若文章有幸对你有用,万分荣幸

在移动开发的世界里，Markdown 渲染一直是个让人头疼的问题。传统的 WebView 笨重缓慢，原生实现又复杂繁琐。但现在，一切都不同了！🎉

📸 Sample Screenshots

Custom Styles	Tables and Code Blocks	Custom Plugins (Alerts)
Custom typography styles	Complex tables and code highlighting	Custom block

✨ 为什么选择 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> {
    @Composable
    override 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.Error
                        else -> 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.

📖 快速链接

🏠 项目主页