在 Jetpack compose 中显示 Markdown 内容

Question

目前没有用于显示md内容的 jetpack compose 库。

# Header
## H2

` code `
```dsd```
...

如何制作可以显示降价内容的可组合函数？

Answer 1

您可以使用https://github.com/halilozercan/compose-richtext库。 它有一个 commonmark 模块，可以根据 commonmark 规范呈现 markdown 内容。

完整文档可在https://halilibo.com/compose-richtext/richtext-commonmark/ 获得

该库的使用示例：

RichText(
  modifier = Modifier.padding(16.dp)
) {
  Markdown(
    """
    # Demo

    Emphasis, aka italics, with *asterisks* or _underscores_. Strong emphasis, aka bold, with **asterisks** or __underscores__. Combined emphasis with **asterisks and _underscores_**. [Links with two blocks, text in square-brackets, destination is in parentheses.](https://www.example.com). Inline `code` has `back-ticks around` it.

    1. First ordered list item
    2. Another item
        * Unordered sub-list.
    3. And another item.
        You can have properly indented paragraphs within list items. Notice the blank line above, and the leading spaces (at least one, but we'll use three here to also align the raw Markdown).

    * Unordered list can use asterisks
    - Or minuses
    + Or pluses
    ---

    ```javascript
    var s = "code blocks use monospace font";
    alert(s);
    ```

    Markdown | Table | Extension
    --- | --- | ---
    *renders* | `beautiful images` | ![random image](https://picsum.photos/seed/picsum/400/400 "Text 1")
    1 | 2 | 3

    > Blockquotes are very handy in email to emulate reply text.
    > This line is part of the same quote.
    """.trimIndent()
  )
}

Answer 2

目前（2020 年 10 月），没有可用的库来显示Jetpack-compose降价文件或内容。

但是，可以使用较旧的库来显示 Markdown 并将其移植到Composable

使用 mukeshsolanki 的MarkdownView-Android ：

1. 创建一个可组合的：

@Composable
fun MarkdownText(
    content: String,
    modifier: Modifier = Modifier
) {
    Box(modifier = modifier.padding(2.dp)) {
        AndroidView(viewBlock = ::MarkdownView, modifier = modifier) {
            it.setMarkDownText(content)
        }
    }
}

2. 在你的组合物中使用它

MarkdownText(
    content = """
    # Header
    ## H2

    ` code `
    ```dsd```
    """.trimIndent(),
    modifier = Modifier.fillMaxSize()
)