Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

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

License

NotificationsYou must be signed in to change notification settings

Ask71-mobile/multiplatform-markdown-renderer

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

... a powerful Kotlin Multiplatform Markdown Renderer for Kotlin Multiplatform projects using Compose Multiplatform



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


What's included 🚀

  • Cross-platform Markdown Rendering - Works on Android, iOS, Desktop, and Web
  • Material Design Integration - Seamless integration with Material 2 and Material 3 themes
  • Rich Markdown Support - Renders headings, lists, code blocks, tables, images, and more
  • Syntax Highlighting - Optional code syntax highlighting for various programming languages
  • Image Loading - Flexible image loading with Coil2 and Coil3 integration
  • Customization Options - Extensive customization for colors, typography, components, and more
  • Performance Optimized - Efficient rendering with lazy loading support for large documents
  • Extended Text Spans - Support for advanced text styling with extended spans
  • Lightweight - Minimal dependencies and optimized for performance

Setup

Using Gradle

Choose the appropriate configuration based on your project type:

Multiplatform

For multiplatform projects, add these dependencies to yourbuild.gradle.kts:

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}")}

JVM (Desktop)

For JVM-only projects, add this dependency:

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

Android

For Android-only projects, add this dependency:

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

Important

Since version 0.13.0, the core library does not depend on a Material theme. You must includeeither the-m2 or-m3 module to get access to the default styling.


Usage

What's included 🚀

The most basic usage is to simply pass your markdown string to theMarkdown composable:

// 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())

Note: Import eithercom.mikepenz.markdown.m3.Markdown for Material 3 orcom.mikepenz.markdown.m2.Markdown for Material 2 themed applications.

Advanced Usage

rememberMarkdownState

For better performance, especially with larger markdown content, userememberMarkdownState or movethe parsing of the markdown into your viewmodel:

val markdownState= rememberMarkdownState(markdown)Markdown(markdownState)

[!NOTE]
Since version 0.33.0, markdown content is parsed asynchronously by default, resulting in a loadingstate being displayed prior to the parsing result. TherememberMarkdownState function offers theability to require immediate parsing with theimmediate parameter, but this is not advised as itmight block the composition of the UI.

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

Lazy Loading for Large Documents

Since version 0.33.0, the library supports rendering large markdown documents efficiently usingLazyColumn instead ofColumn. This is particularly useful for very long markdown content.

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

Parse Markdown in VM

[!NOTE]
This approach is also advised if you want to retain scroll position even when navigating awaySee:mikepenz#374Retaining state in the VM ensures parsing will not have to be done again, and the component can beimmediately filled.

// In the VM setup the flow to parse the markdownval markdownFlow= parseMarkdownFlow("# Markdown")    .stateIn(lifecycleScope,SharingStarted.Eagerly,State.Loading())// In the Composable use the flowval state by markdownFlow.collectAsStateWithLifecycle()Markdown(state)

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))

Disable Animation

By default, theMarkdownText animates size changes (if images are loaded).

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

Extended spans

Starting with 0.16.0 the library includes supportforextended-spans.

The library was integrated to make it multiplatform-compatible.All credits for its functionality go toSaket Narayan.

It is not enabled by default, however you can enable it quickly by configuring theextendedSpansfor yourMarkdown composeable.Define theExtendedSpans you want to apply (including optionally your own custom ones) and returnit.

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

Extend Annotated string handling

The library already handles a significant amount of different tokens, however not all. To allowspecial integrations expand this, you can pass in a customannotator to theMarkdowncomposeable. Thisannotator allows you to customize existing handled tokens, but also add newones.

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

Adjust List Ordering

// Use the bullet list symbol from the original markdownCompositionLocalProvider(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))}

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 componentsMarkdownComponents to theMarkdown composable.

Use themarkdownComponents() to keep defaults for non overwritten components.

TheMarkdownComponent will expose access tothecontent: String,node: ASTNode,typography: MarkdownTypography,offering full flexibility.

// 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 exampleval 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` composableText(        styledText,        textAlign=TextAlign.End    )}// Define the `Markdown` composable and pass in the custom paragraph componentMarkdown(    content,    components= markdownComponents(        paragraph= customParagraphComponent// customParagraphComponentComplex    ))

Another example to of a custom component is changing the rendering of an unordered list.

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

Table Support

Starting with 0.30.0, the library includes support for rendering tables in markdown. TheMarkdowncomposable will automatically handle table elements in your markdown content.

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

Image Loading

To configure image loading, the library offers different implementations, to offer great flexibilityfor the respective integration.After adding the dependency, the chosen image transformer implementation has to be passed to theMarkdown API.

Note

Please refer to the official documentation for the specific image loading integration you areusing (e.g., coil3) on how to adjust itsbehavior.

coil3

// Offers coil3 (Coil3ImageTransformerImpl)implementation("com.mikepenz:multiplatform-markdown-renderer-coil3:${version}")
Markdown(MARKDOWN,    imageTransformer=Coil3ImageTransformerImpl,)

coil2

// Offers coil2 (Coil2ImageTransformerImpl)implementation("com.mikepenz:multiplatform-markdown-renderer-coil2:${version}")
Markdown(MARKDOWN,    imageTransformer=Coil2ImageTransformerImpl,)

Syntax Highlighting

The library (introduced with 0.27.0) offers optional support for syntax highlighting viatheHighlights project.This support is not included in the core, and can be enabled by adding themultiplatform-markdown-renderer-codedependency.

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

Once added, theMarkdown has to be configured to use the alternative code highlighter.

// Use default color schemeMarkdown(MARKDOWN,    components= markdownComponents(        codeBlock= highlightedCodeBlock,        codeFence= highlightedCodeFence,    ))// ADVANCED: Customize Highlights library by defining different themeval isDarkTheme= isSystemInDarkTheme()val highlightsBuilder= remember(isDarkTheme) {Highlights.Builder().theme(SyntaxThemes.atom(darkMode= isDarkTheme))}Markdown(MARKDOWN,    components= markdownComponents(        codeBlock= {MarkdownHighlightedCodeBlock(                content= it.content,                node= it.node,                highlightsBuilder= highlightsBuilder            )        },        codeFence= {MarkdownHighlightedCodeFence(                content= it.content,                node= it.node,                highlightsBuilder= highlightsBuilder            )        },    ))

Dependencies

This library uses the following key dependencies:

Developed By

Contributors

This free, open source software was made possible by a group of volunteers who put many hours ofhard work into it. See theCONTRIBUTORS.md file for details.

Credits

Big thanks toErik Hellman and his awesome articleonRendering Markdown with Jetpack Compose,and the related sourceMarkdownComposer.

Also huge thanks toSaket Narayan for his great work ontheextended-spans project, which was ported into thisproject to make it multiplatform.

Fork License

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

License

Copyright 2025 Mike PenzLicensed 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.0Unless required by applicable law or agreed to in writing, softwaredistributed 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 andlimitations under the License.

About

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

Resources

License

Security policy

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • Kotlin99.2%
  • Ruby0.8%

[8]ページ先頭

©2009-2025 Movatter.jp