Kotlin Multiplatform Markdown Renderer

The library provides a powerful Markdown rendering solution for Compose Multiplatform projects. Key features include:

• Cross-platform Support: Works on Android, iOS, Desktop, and Web.
• Material Design Integration: Supports both Material 2 and Material 3.
• Rich Markdown Support: Renders headings, lists, code blocks, tables, images, and more.
• Syntax Highlighting: Optional support for various programming languages.
• Image Loading: Integrates with Coil2 and Coil3.
• Performance: Optimized with lazy loading support for large documents.
• Customization: Extensive options for colors, typography, and components.

You can use a custom MarkdownAnnotator combined with MarkdownInlineContent to substitute specific tokens with custom UI elements (like glyphs or icons) both inside and outside of table cells.

For example, a token like ⦃check⦄ can be intercepted and rendered as a ✅ glyph within a table cell to indicate status.

Images placed inside table cells are rendered as inline content, adhering to the GFM specification which prohibits block-level content within cells. This allows for:

• Single Images: Rendering an avatar or profile image via ![alt](url).
• Mixed Content: Combining an image with surrounding text within the same cell (e.g., ![logo](url) text).

The renderer supports GitHub Flavored Markdown (GFM) tables containing a full set of inline content within cells. This includes:

• Text Styles: Bold (**text**), Italic (*text* or _text_), and Strikethrough (~~text~~).
• Code: Inline code blocks using backticks (`code`).
• Links: Standard Markdown links ([text](url)), autolinks (<url>), and GFM autolinks (https://url).
• Escaping: You can include escaped pipes (\|) within table cells to prevent them from being interpreted as column delimiters.
• Mixed Content: Cells can combine multiple inline elements, such as bold text, code, and links simultaneously.

To export library definitions for the different platforms in the sample project, run the following Gradle tasks:

./gradlew :sample:shared:exportLibraryDefinitions
./gradlew :sample:desktop:exportLibraryDefinitions
./gradlew :sample:web:exportLibraryDefinitions

The sample app includes screenshot testing. Use these commands to update reference images or validate existing ones on Android:

# Generate reference images for tests
./gradlew :sample:android:updateDebugScreenshotTest

# Generate ScreenshotTest report
./gradlew :sample:android:validateDebugScreenshotTest

Install and run the debug version of the Android application using Gradle:

./gradlew :sample:installDebug

The simplest way to render markdown is to pass a markdown string directly to the Markdown composable.

Important: Depending on your application's theme, you must import the correct implementation:

• For Material 3: com.mikepenz.markdown.m3.Markdown
• For Material 2: com.mikepenz.markdown.m2.Markdown

By default, changing the content will trigger a loading state while the new content is parsed. To prevent this and keep the previous content visible during updates, set retainState = true.

// In your composable (use the appropriate Markdown implementation for your theme)
Markdown(
    """
    # Hello Markdown

    This is a simple markdown example with:

    - Bullet points
    - **Bold text**
    - *Italic text*

    [Check out this link](https://github.com/mikepenz/multiplatform-markdown-renderer)
    """.trimIndent()
)

The library supports various image loading implementations. To use Coil, you must add the specific dependency for your version and pass the corresponding imageTransformer to the Markdown composable.

For Coil 3:

• Dependency: com.mikepenz:multiplatform-markdown-renderer-coil3:${version}
• Transformer: Coil3ImageTransformerImpl

For Coil 2:

• Dependency: com.mikepenz:multiplatform-markdown-renderer-coil2:${version}
• Transformer: Coil2ImageTransformerImpl

// Coil 3 Example
Markdown(
    MARKDOWN,
    imageTransformer = Coil3ImageTransformerImpl,
)

Run the Desktop application using the following Gradle task:

./gradlew :sample:desktop:run

Run the WebAssembly (Wasm) version of the app in a browser development mode:

./gradlew :sample:web:wasmJsBrowserDevelopmentRun