openai/compose-richtext
Publicmirrored fromhttps://github.com/openai/compose-richtextAvailable
docs/richtext-commonmark.md
106lines · modecode
| 1 | # Commonmark Markdown |
| 2 | |
| 3 | [](https://developer.android.com/studio/build/dependencies) |
| 4 | [](https://kotlinlang.org/docs/mpp-intro.html) |
| 5 | |
| 6 | Library for parsing and rendering Markdown in Compose using [CommonMark](https://github.com/commonmark/commonmark-java) |
| 7 | library/spec to parse, and [richtext-markdown](../richtext-markdown/) to render. |
| 8 | |
| 9 | ## Gradle |
| 10 | |
| 11 | ```kotlin |
| 12 | dependencies { |
| 13 | implementation("com.halilibo.compose-richtext:richtext-commonmark:${richtext_version}") |
| 14 | } |
| 15 | ``` |
| 16 | |
| 17 | ## Parsing |
| 18 | |
| 19 | `richtext-markdown` module renders a given Markdown Abstract Syntax Tree. It accepts a root |
| 20 | `AstNode`. This library gives you a parser called `CommonmarkAstNodeParser` to easily convert any |
| 21 | String to an `AstNode` that represents the Markdown tree. |
| 22 | |
| 23 | ```kotlin |
| 24 | val parser = CommonmarkAstNodeParser() |
| 25 | val astNode = parser.parse( |
| 26 | """ |
| 27 | # Demo |
| 28 | |
| 29 | 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. |
| 30 | |
| 31 | 1. First ordered list item |
| 32 | 2. Another item |
| 33 | * Unordered sub-list. |
| 34 | 3. And another item. |
| 35 | 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). |
| 36 | |
| 37 | * Unordered list can use asterisks |
| 38 | - Or minuses |
| 39 | + Or pluses |
| 40 | """.trimIndent() |
| 41 | ) |
| 42 | // ... |
| 43 | |
| 44 | RichTextScope.BasicMarkdown(astNode) |
| 45 | ``` |
| 46 | |
| 47 | ## Rendering |
| 48 | |
| 49 | The simplest way to render markdown is just pass a string to the [`Markdown`](../api/richtext-commonmark/com.halilibo.richtext.markdown/-markdown.html) |
| 50 | composable under RichText scope: |
| 51 | |
| 52 | ~~~kotlin |
| 53 | RichText( |
| 54 | modifier = Modifier.padding(16.dp) |
| 55 | ) { |
| 56 | Markdown( |
| 57 | """ |
| 58 | # Demo |
| 59 | |
| 60 | 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. |
| 61 | |
| 62 | 1. First ordered list item |
| 63 | 2. Another item |
| 64 | * Unordered sub-list. |
| 65 | 3. And another item. |
| 66 | 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). |
| 67 | |
| 68 | * Unordered list can use asterisks |
| 69 | - Or minuses |
| 70 | + Or pluses |
| 71 | --- |
| 72 | |
| 73 | ```javascript |
| 74 | var s = "code blocks use monospace font"; |
| 75 | alert(s); |
| 76 | ``` |
| 77 | |
| 78 | Markdown | Table | Extension |
| 79 | --- | --- | --- |
| 80 | *renders* | `beautiful images` |  |
| 81 | 1 | 2 | 3 |
| 82 | |
| 83 | > Blockquotes are very handy in email to emulate reply text. |
| 84 | > This line is part of the same quote. |
| 85 | """.trimIndent() |
| 86 | ) |
| 87 | } |
| 88 | ~~~ |
| 89 | |
| 90 | Which produces something like this: |
| 91 | |
| 92 |  |
| 93 | |
| 94 | ## [`MarkdownParseOptions`](../api/richtext-commonmark/com.halilibo.richtext.commonmark/-markdown-parse-options.html) |
| 95 | |
| 96 | Passing `MarkdownParseOptions` into either `Markdown` composable or `CommonmarkAstNodeParser.parse` method provides the ability to control some aspects of the markdown parser: |
| 97 | |
| 98 | ```kotlin |
| 99 | val markdownParseOptions = MarkdownParseOptions( |
| 100 | autolink = false |
| 101 | ) |
| 102 | |
| 103 | Markdown( |
| 104 | markdownParseOptions = markdownParseOptions |
| 105 | ) |
| 106 | ``` |
| 107 | |