Skip to content

Markdown renderer for Kotlin Multiplatform Projects (Android, iOS, Desktop), using Compose.

License

Notifications You must be signed in to change notification settings

Zeng1998/multiplatform-markdown-renderer

 
 

Repository files navigation

Kotlin Multiplatform Markdown Renderer

... a Kotlin Multiplatform Markdown Renderer. (Android, Desktop, ...) powered by Compose Multiplatform



What's included 🚀Setup 🛠️Usage 🛠️License 📓


What's included 🚀

  • Super simple setup
  • Cross-platform ready
  • Lightweight

Setup

Using Gradle

Multiplatform

For multiplatform projects specify this single dependency:

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

JVM

To use the library on JVM, you have to include:

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

Android

For Android a special dependency is available:

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


Usage

val markdown = """
### What's included 🚀

- Super simple setup
- Cross-platform ready
- Lightweight
""".trimIndent()

//
Markdown(markdown)
Advanced Usage

The library offers the ability to modify different behaviour when rendering the markdown.

Provided custom style

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

Adjust List Ordering

// Use the bullet list symbol from the original markdown
CompositionLocalProvider(LocalBulletListHandler provides { "$it " }) {
    Markdown(content)
}

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

Custom Components

Since v0.9.0 it is possible to provide custom components, instead of the default ones. This can be done by providing the components MarkdownComponents to the Markdown composable.

Use the markdownComponents() to keep defaults for non overwritten components.

The MarkdownComponent will expose access to the content: String, node: ASTNode, typography: MarkdownTypography, offering full flexibility.

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

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

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

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

Dependency

This project uses JetBrains markdown Multiplatform Markdown processor as dependency to parse the markdown content.

Developed By

Contributors

This free, open source software was also made possible by a group of volunteers that put many hours of hard work into it. See the CONTRIBUTORS.md file for details.

Credits

Big thanks to Erik Hellman and his awesome article on Rendering Markdown with Jetpack Compose, and the related source MarkdownComposer.

Fork License

Copyright for portions of the code are held by [Erik Hellman, 2020] as part of project MarkdownComposer under the MIT license. All other copyright for project multiplatform-markdown-renderer are held by [Mike Penz, 2023] under the Apache License, Version 2.0.

License

Copyright 2024 Mike Penz

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

About

Markdown renderer for Kotlin Multiplatform Projects (Android, iOS, Desktop), using Compose.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • Kotlin 96.9%
  • Ruby 3.1%