dependencies {
    // Core library
    implementation("com.mikepenz:multiplatform-markdown-renderer:${version}")

    // Choose ONE of the following based on your Material theme:

    // For Material 2 themed apps
    implementation("com.mikepenz:multiplatform-markdown-renderer-m2:${version}")

    // OR for Material 3 themed apps
    implementation("com.mikepenz:multiplatform-markdown-renderer-m3:${version}")
}

dependencies {
    implementation("com.mikepenz:multiplatform-markdown-renderer-jvm:${version}")
}

dependencies {
    implementation("com.mikepenz:multiplatform-markdown-renderer-android:${version}")
}

val markdownState = rememberMarkdownState(markdown)
Markdown(markdownState)

// Default asynchronous parsing (recommended)
val markdownState = rememberMarkdownState(markdown)

// Force immediate parsing (not recommended)
val markdownState = rememberMarkdownState(markdown, immediate = true)

// Retain previous content during updates (avoids showing loading state)
val markdownState = rememberMarkdownState(
    markdown,
    retainState = true
)
Markdown(markdownState)

// With dynamic content loading
val markdownState = rememberMarkdownState(
    key, // key that triggers re-parsing
    retainState = true
) {
    "# Dynamic content $counter"
}
Markdown(markdownState)

Markdown(
    markdownState = markdownState,
    success = { state, components, modifier ->
        LazyMarkdownSuccess(state, components, modifier, contentPadding = PaddingValues(16.dp))
    },
    modifier = Modifier.fillMaxSize()
)

// In the VM setup the flow to parse the markdown
val markdownFlow = parseMarkdownFlow("# Markdown")
    .stateIn(lifecycleScope, SharingStarted.Eagerly, State.Loading())

// In the Composable use the flow
val state by markdownFlow.collectAsStateWithLifecycle()
Markdown(state)

Markdown(
    content,
    colors = markdownColor(text = Color.Red),
    typography = markdownTypography(h1 = MaterialTheme.typography.body1)
)

Markdown(
    content,
    animations = markdownAnimations(
        animateTextSize = {
            this
            /** No animation */
        }
    ),
)

Markdown(
    content,
    extendedSpans = markdownExtendedSpans {
        val animator = rememberSquigglyUnderlineAnimator()
        remember {
            ExtendedSpans(
                RoundedCornerSpanPainter(),
                SquigglyUnderlineSpanPainter(animator = animator)
            )
        }
    }
)

Markdown(
    content,
    annotator = markdownAnnotator { content, child ->
        if (child.type == GFMElementTypes.STRIKETHROUGH) {
            append("Replaced you :)")
            true // return true to consume this ASTNode child
        } else false
    }
)

// Use the bullet list symbol from the original markdown
CompositionLocalProvider(LocalBulletListHandler provides { type, bullet, index, listNumber, depth -> "$bullet " }) {
    Markdown(content)
}

// Replace the ordered list symbol with `A.)` instead.
CompositionLocalProvider(LocalOrderedListHandler provides { type, bullet, index, listNumber, depth -> "A.) " }) {
    Markdown(content, Modifier.fillMaxSize().padding(16.dp).verticalScroll(scrollState))
}

// Simple adjusted paragraph with different Modifier.
val customParagraphComponent: MarkdownComponent = {
    Box(modifier = Modifier.fillMaxWidth()) {
        MarkdownParagraph(it.content, it.node, Modifier.align(Alignment.CenterEnd))
    }
}

// Full custom paragraph example 
val customParagraphComponentComplex: MarkdownComponent = {
    // build a styled paragraph. (util function provided by the library)
    val styledText = buildAnnotatedString {
        pushStyle(LocalMarkdownTypography.current.paragraph.toSpanStyle())
        buildMarkdownAnnotatedString(it.content, it.node, annotatorSettings())
        pop()
    }

    // define the `Text` composable
    Text(
        styledText,
        textAlign = TextAlign.End
    )
}

// Define the `Markdown` composable and pass in the custom paragraph component
Markdown(
    content,
    components = markdownComponents(
        paragraph = customParagraphComponent // customParagraphComponentComplex
    )
)

// Define a custom component for rendering unordered list items in Markdown
val customUnorderedListComponent: MarkdownComponent = {
    // Use the MarkdownListItems composable to render the list items
    MarkdownListItems(it.content, it.node, depth = 0) { startNumber, index, child ->
        // Render an icon for the bullet point with a green tint
        Icon(
            imageVector = icon,
            tint = Color.Green,
            contentDescription = null,
            modifier = Modifier.size(20.dp),
        )
    }
}

// Define the `Markdown` composable and pass in the custom unorderedList component
Markdown(
    content,
    components = markdownComponents(
        unorderedList = customUnorderedListComponent
    )
)

val markdown = """
| Header 1 | Header 2 |
|----------|----------|
| Cell 1   | Cell 2   |
| Cell 3   | Cell 4   |
""".trimIndent()

Markdown(markdown)