如何在Android Compose的Markdown代码块添加可点击按钮？

阿华AIGC实验室

2026-6-1

请提供需要格式化的具体内容，我会严格按照你给出的Markdown格式规则进行处理。

如果是针对你之前关于halilibo组件添加代码块按钮的问题，以下是符合要求的回答：

解决方案

直接预处理message.content的方式不可行——MarkdownText会将原始Markdown解析后生成SpannableString，你预处理添加的按钮标记会被当成普通文本解析，无法渲染成可交互按钮。

推荐两种可行方案：

1. 自定义Markdown解析器扩展

halilibo的richtext-commonmark基于CommonMark库，你可以扩展解析器，给代码块节点添加自定义渲染逻辑：

实现自定义NodeRenderer，处理代码块（CodeBlock）时，将其包装成包含按钮的Compose布局
将自定义渲染器注册到CommonMarkParser，替换默认的代码块渲染逻辑

示例代码：

// 自定义代码块渲染器
class CustomCodeBlockRenderer(
    private val onApplyCode: (String) -> Unit
) : NodeRenderer {
    override fun render(node: Node) {
        val codeBlock = node as CodeBlock
        val code = codeBlock.literal.trim()
        // 渲染为带按钮的Row布局
        Row(modifier = Modifier.fillMaxWidth(), verticalAlignment = Alignment.CenterVertically) {
            CodeBlock(
                code = code,
                modifier = Modifier.weight(1f)
            )
            Button(
                onClick = { onApplyCode(code) },
                modifier = Modifier.padding(start = 8.dp)
            ) {
                Text("应用代码")
            }
        }
    }

    override fun getNodeTypes(): Set<Class<out Node>> {
        return setOf(CodeBlock::class.java)
    }
}

// 创建自定义解析器
val customParser = CommonMarkParser(
    config = CommonMarkParserConfig(),
    nodeRenderers = listOf(CustomCodeBlockRenderer { code ->
        // 这里处理代码应用逻辑
        println("执行代码：$code")
    })
)

// 使用自定义解析器的Markdown组件
Markdown(
    modifier = Modifier.padding(12.dp),
    parser = customParser
) {
    markdown(message.content)
}