在 Jetpack compose 中显示 markdown 内容

Question

目前没有用于显示 md 内容的 Jetpack Compose 库。

# Header
## H2

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

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

Answer 1

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

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

使用 mukeshsolanki 的 MarkdownView-Android :

创建可组合项：

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

在您的可组合项中使用它

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

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

Answer 2

您可以使用 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()
  )
}

在 Jetpack compose 中显示 markdown 内容

Display markdown content in Jetpack compose

android

android-jetpack-compose