... a Kotlin Multiplatform Markdown Renderer. (Android, Desktop, ...) powered by Compose Multiplatform
What's included 🚀 • Setup 🛠️ • Usage 🛠️ • License 📓
- Super simple setup
- Cross-platform ready
- Lightweight
Multiplatform
For multiplatform projects specify this single dependency:
dependencies {
implementation("com.mikepenz:multiplatform-markdown-renderer:${version}")
// Offers Material 2 defaults for Material 2 themed apps (com.mikepenz.markdown.m2.Markdown)
implementation("com.mikepenz:multiplatform-markdown-renderer-m2:${version}")
// Offers Material 3 defaults for Material 3 themed apps (com.mikepenz.markdown.m3.Markdown)
implementation("com.mikepenz:multiplatform-markdown-renderer-m3:${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}")
}Tip
Since 0.13.0 the core library does not depend on a Material theme anymore. Include the -m2
or -m3 module to get
access to the defaults.
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.
Markdown(
content,
colors = markdownColors(text = Color.Red),
typography = markdownTypography(h1 = MaterialTheme.typography.body1)
)Starting with 0.16.0 the library includes support for extended-spans.
The library was integrated to to make it multiplatform compatible. All credits for its functionality goes to Saket Narayan.
It is not enabled by default, however you can enable it quickly by configuring the extendedSpans
for your Markdown composeable.
Define the ExtendedSpans you want to apply (including optionally your own custom ones) and return
it.
Markdown(
content,
extendedSpans = markdownExtendedSpans {
val animator = rememberSquigglyUnderlineAnimator()
remember {
ExtendedSpans(
RoundedCornerSpanPainter(),
SquigglyUnderlineSpanPainter(animator = animator)
)
}
}
)The library already handles a significant amount of different tokens, however not all. To allow
special integrations expand this, you can pass in a custom annotator to the Markdown
composeable. This annotator allows you to customize existing handled tokens, but also add new
ones.
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 { "$it " }) {
Markdown(content)
}
// Replace the ordered list symbol with `A.)` instead.
CompositionLocalProvider(LocalOrderedListHandler provides { "A.) " }) {
Markdown(content, Modifier.fillMaxSize().padding(16.dp).verticalScroll(scrollState))
}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` composable and pass in the custom paragraph component
Markdown(
content,
components = markdownComponents(
paragraph = customParagraphComponent
)
)
In the current versions of the library, image loading is included in different variants.
- Android: Uses
coilto load images (Default configuration). The globalImageLoaderis respected. - JVM: Load image as HTTPUrlConnection and set to the view
- JS / Native: No image loading provided at this time
Provide your own ImageTransformer to the Markdown compose function to modify this behavior.
Note
It is planned to update to coil3 for all platforms once it reaches a more stable release cycle.
This project uses JetBrains markdown Multiplatform Markdown processor as dependency to parse the markdown content.
- Mike Penz
- mikepenz.com - [email protected]
- paypal.me/mikepenz
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.
Big thanks to Erik Hellman and his awesome article on Rendering Markdown with Jetpack Compose, and the related source MarkdownComposer.
Also huge thanks to Saket Narayan for his great work on the extended-spans project. Ported into this project to make it multiplatform.
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.
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.
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent