A Jetpack Compose component used for displaying Markdown-formatted text.

Overview

MarkdownText

A library for displaying Markdown contents within Jetpack Compose. Uses Coil

Latest version

Current limitations

  • Lists that are annotated with the * must have an space after the delimiter.
  • If a line starts with an image, just the first one will be loaded. eg:
![example-image](https://example.com)![example-image-2](https://example.com)

Will only display the first image.

  • Placeholders are not supported.
  • Header closing tags are not supported.
  • Blockquotes are not supported.
  • List elements must be in the same line.
  • Code blocks are not supported.
  • Horizontal rules are only supported for -, starting with at least 2 characters without spaces.
  • Automatic links are not supported.

Usage

Add to the module's dependencies:

implementation 'com.arnyminerz.markdowntext:markdowntext:1.1.0'

Jetpack Compose example:

@Composable
fun MarkdownTextPreview() {
    val exampleImageUrl = "https://picsum.photos/300/200"
    val exampleBadge = "https://raster.shields.io/badge/Label-Awesome!-success"

    Column(
        modifier = Modifier.verticalScroll(rememberScrollState()),
    ) {
        MarkdownText(
            markdown = listOf(
                "This is markdown text with **bold** content.",
                "This is markdown text with *italic* content.",
                "**This** is where it gets complicated. With **bold and *italic* texts**.",
                "# Headers are also supported",
                "The work for separating sections",
                "## And setting",
                "Sub-sections",
                "### That get",
                "#### Deeper",
                "##### And Deeper",
                "###### And even deeper",
                "Remember _this_ ~not this~? Also works!",
                "[This](https://example.com) is a link.",
                "- Lists",
                "- are",
                "- also",
                "- supported",
                "--------",
                "That is a hr!",
                "Here is a normal inline image: ![This is an image]($exampleBadge)",
                "But this one has a link: [![This is an image]($exampleBadge)]($exampleBadge)",
                "This is a large block image:",
                "![Large image]($exampleImageUrl)",
            ).joinToString(System.lineSeparator()),
            modifier = Modifier
                .padding(horizontal = 8.dp),
            bodyStyle = MaterialTheme.typography.bodyMedium,
        )
    }
}

example-image

Comments
  • "*" is always interpreted as italic although it might be a bullet

    Hey @ArnyminerZ ! A user reported an issue with the markdown handling (regrettably as a confidential issue), the problem is when a list is not started with the "-" character but with the "*" character, the whole line is interpreted as italic instead of being an unordered list.

    I guess an additional check is necessary if there is an opening AND a closing character for "" or if there is only the "" character at the beginning of the line.

    I might also have a look at it in the next days unless you're faster πŸ˜‰

    feature 
    opened by patrickunterwegs 10
  • Considering * at the beginning of a line also as a list

    Considering * at the beginning of a line also as a list

    I have just added the Asterisk character to the check if it's a list. I'd say in the future the list handling also should allow formatting within the list items in the future, but I think that requires a bit of a structural change in the current method. So for now I'd leave it with that!

    opened by patrickunterwegs 2
  • Inline images display with a wrong aspect ratio

    Inline images display with a wrong aspect ratio

    Currently there's no way of knowing the size of the image to be loaded, and InlineTextContent requires a Placeholder with a fixed size, so currently it's being set to

    lastStyle.fontSize * 2  x  lastStyle.fontSize
    

    The best way would be to load the image, take the size, and then load the InlineTextContent, however, this must be done asynchronously. Maybe adding a loading indicator or a placeholder from Accompanist for example would be a good solution.

    bug stale 
    opened by ArnyminerZ 1
  • Add image handling

    Add image handling

    Markdown should be able to display images. Right now everything is ready for this, since the module is developed in a column, so non-inline images can be simply added one after the other. For this, I believe the best option is to use a library like Glide or Coil.

    feature 
    opened by ArnyminerZ 1
  • Bug: Headers have leading spaces

    Bug: Headers have leading spaces

    When adding a header, the spaces after the # are conserved, and multiplied by each level, so for instance this:

    ## Title
    

    Renders as:

    Β·Β·Β·Title
    

    Note: Β· are spaces

    bug 
    opened by ArnyminerZ 0
  • Feature: Use Jetbrains' Markdown parsing library

    Feature: Use Jetbrains' Markdown parsing library

    Jetbrains has released a library for parsing Markdown in Kotlin: JetBrains/Markdown.

    This would be translated into basically a library rewrite, but would make parsing much more trusty, and adding new features much easier.

    feature 
    opened by ArnyminerZ 0
  • ⬆️ Bump agp_version from 7.3.0 to 7.3.1

    ⬆️ Bump agp_version from 7.3.0 to 7.3.1

    Bumps agp_version from 7.3.0 to 7.3.1. Updates com.android.application from 7.3.0 to 7.3.1

    Updates com.android.library from 7.3.0 to 7.3.1

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    dependency patch 
    opened by dependabot[bot] 0
  • Working on marker conservation

    Working on marker conservation

    Currently working:

    • [x] Bold
    • [x] Italic
    • [x] Strikethrough
    • [x] Code
    • [ ] Links
    • [x] Headers
    • [ ] Lists
      • [ ] Unordered lists
      • [ ] Ordered lists
      • [ ] Checkboxes
    • [ ] Images
      • [ ] Inline images
      • [ ] Block images
    • [ ] Dividers

    Would help on implementing #25

    feature 
    opened by ArnyminerZ 0
  • Feature: Provide Markdown annotated text for TextFields

    Feature: Provide Markdown annotated text for TextFields

    Hey @ArnyminerZ !

    In jtx Board there was also the request to better support markdown in TextFields. Basically the idea is to show the text with the formatting but with the markdown indicators visible. In the best case those markdown indicators could have a lower opacity. The previously used library was actually doing that, so that feature got kind of lost now and it would be nice if we could add it again.

    The TextField also takes a "TextFieldValue()" which accepts an annotated string. So maybe we can have a look if the function String.markdownAnnotated() can be adapted to do this. What do you think?

    feature 
    opened by patrickunterwegs 1
  • ⬆️ Bump org.jetbrains.kotlin.android from 1.7.20 to 1.7.21

    ⬆️ Bump org.jetbrains.kotlin.android from 1.7.20 to 1.7.21

    Bumps org.jetbrains.kotlin.android from 1.7.20 to 1.7.21.

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    dependency 
    opened by dependabot[bot] 1
Releases(1.2.2)
  • 1.2.2(Dec 16, 2022)

    Migration notice!

    bodyStyle is no longer a thing. Use Text's default parameters.

    πŸš€ Features

    • Added extra styling options for MarkdownText @ArnyminerZ (#34)
    Source code(tar.gz)
    Source code(zip)
  • 1.2.1(Dec 15, 2022)

    πŸš€ Features

    • Added Github flavour @ArnyminerZ (#32)
    • Added defined custom flavours @ArnyminerZ (#31)

    πŸ“„ Documentation

    • Updated version @ArnyminerZ (#33)

    πŸ› Bug Fixes

    • Fixed leading spaces in headers @ArnyminerZ (#30)
    Source code(tar.gz)
    Source code(zip)
  • 1.2.0(Dec 15, 2022)

  • 1.1.1(Dec 6, 2022)

    Changes

    πŸ› Bug Fixes

    • :bug: Fixed inline image sizing @ArnyminerZ (#23)

    🧰 Maintenance

    • :arrow_up: Updated dependencies @ArnyminerZ (#24)
    Source code(tar.gz)
    Source code(zip)
  • 1.1.0(Nov 6, 2022)

    Changes

    • :art: Updated example screenshot @ArnyminerZ (#21)

    πŸš€ Features

    • ✨ Added span code blocks @ArnyminerZ (#16)
    • ✨ Added backslash support @ArnyminerZ (#18)
    • ✨ Added support for lists starting with * and + @ArnyminerZ (#14)
    • ✨ Added images support @ArnyminerZ (#10)
    • ✨ Added example app @ArnyminerZ (#9)

    πŸ“„ Documentation

    • :memo: Extended usage example @ArnyminerZ (#20)
    • :memo: Added license @ArnyminerZ (#19)
    • :memo: Added limitations @ArnyminerZ (#15)

    🧰 Maintenance

    • :memo: Added stale label @ArnyminerZ (#17)
    Source code(tar.gz)
    Source code(zip)
    markdown-text-release.aar(37.64 KB)
  • 1.0.1(Oct 25, 2022)

  • 1.0.0(Oct 25, 2022)

    Changes

    • :construction_worker: Bumped version @ArnyminerZ (#6)

    🧰 Maintenance

    • :construction_worker: Removed v prefix to version name @ArnyminerZ (#5)
    Source code(tar.gz)
    Source code(zip)
  • v0.1.0(Oct 25, 2022)

    Changes

    • :construction_worker: Added workflow @ArnyminerZ (#2)

    πŸš€ Features

    • πŸ‘·πŸΌ Added version generation @ArnyminerZ (#4)

    πŸ› Bug Fixes

    • :bug: Fix theming @ArnyminerZ (#1)

    🧰 Maintenance

    • πŸ‘·πŸΌ Added version generation @ArnyminerZ (#4)
    • ⬆️ Bump agp_version from 7.3.0 to 7.3.1 @dependabot (#3)
    Source code(tar.gz)
    Source code(zip)
Owner
Arnau Mora
Arnau Mora
Expandable text, similar to Text() in Jetpack Compose

A small library to display expandable texts in Jetpack Compose.

null 3 Sep 8, 2022
An Android Jetpack Compose library for displaying on-screen messages

InfoBar Compose An Android Jetpack Compose library for displaying on-screen messages. Unlike the built-in Snackbar from the Compose Material library,

Radu Salagean 78 Dec 20, 2022
Dynamic Badge with customizable features as max number before displaying with +, color, shadow, border, corner radius, font properties and more written with Jetpack Compose

✏️?? Dynamic Badge with customizable features as max number before displaying with +, color, shadow, border, corner radius, font properties and more written with Jetpack Compose. Displays numbers either in circle or rounded rectangle shape based on badge count and selected threshold to transform from circle to rounded rectangle.

Smart Tool Factory 4 Jul 27, 2022
πŸš€πŸžπŸ’ͺ Collection of Images, Modifiers, utility functions for Jetpack Compose to expand and enrich displaying, manipulating, scaling, resizing, zooming, and getting cropped ImageBitmap based on selection area

Collection of Images, Modifiers, utility functions for Jetpack Compose to expand and enrich displaying, manipulating, scaling, resizing, zooming, and getting cropped ImageBitmap based on selection area, before/after image to with handle to show partial of both images and more is cooking up

Smart Tool Factory 207 Dec 26, 2022
Jetpack Compose based project, used to stress-testing compose features / integrations and explore non-trivial functionality

Project containing Jetpack Compose samples For pagination & network images it uses CATAAS. Known issues Navigation-Compose Issue with fast tapping on

Denis Rudenko 59 Dec 14, 2022
πŸ—» Unopinionated, easy-to-use, and customizable Badge component for Jetpack Compose

Cobadge ?? Unopinionated, easy-to-use, and customizable Badge component for Jetpack Compose Getting started In this section I will walk you through th

Michael Grigoryan 5 Jun 28, 2022
Kotlin, MVVM, Navigation Component, Hilt, Jetpack Compose, Retrofit2

What is this project? This course will replace my old java mvvm introduction: https://codingwithmitch.com/courses/rest-api-mvvm-retrofit2/. Watch the

Mitch Tabian 452 Jan 1, 2023
ComposeImageBlurhash is a Jetpack Compose component with the necessary implementation to display a blurred image while the real image is loaded from the internet. Use blurhash and coil to ensure good performance.

compose-image-blurhash ComposeImageBlurhash is a Jetpack Compose component with the necessary implementation to display a blurred image while the real

Orlando Novas Rodriguez 24 Nov 18, 2022
Android Sample Kotlin+ MVI + Jetpack compose + Coroutines + Retrofit + Hilt + Room + Navigation component

MVIComposeSample Android Sample app to show user latest movies implementing MVI + Clean Architecture using kotlin & Jetpack compose following solid an

Ahmed Atwa 10 Dec 28, 2022
Icontent - Jetpack Compose component to show all random content sended by Inmersoft guide backend

icontent IContent is a library that allows loading audio visual content generica

Orlando Novas Rodriguez 3 Nov 3, 2022
❀️ A heart-shaped toggle switch component built using Jetpack Compose

heart-switch A heart-shaped toggle switch component built using Jetpack Compose. Inspired by Tore Bernhoft's I heart toggle Dribbble shot and Anatoliy

Anton Popov 30 Dec 14, 2022
A Coordinator Layout-like component in Jetpack Compose.

CollapsingToolbarInCompose Branches master: Initial code. column_version: Resulting code using a Column. ?? lazycolumn_version: Resulting code using a

Glenn 38 Dec 9, 2022
Jetpack Compose component box.

Jetpack Compose Component Box About The Project ℹ️ This project is a project where you can find and use custom components in Jetpack Compose. Our goal

Mert Toptas 43 Dec 10, 2022
Short example displaying an editable list

MVVM Profiles list App displaying a list of profiles with the ability to add, remove and edit each one Project characteristics 100% Kotlin MVVM Flow A

Gonzalo Guzzardi 0 Jan 15, 2022
A simple tool to display a text tree with Jetpack Compose🌲

A simple tool to display a text tree with Jetpack Compose??

Takahiro Menju 50 Oct 5, 2022
Drawing text around other content in Jetpack Compose

TextAroundContent Drawing text around other content in Jetpack Compose Installat

Dmitry Mysenko 8 Feb 9, 2022
This app can be used to track open slots for vaccination. This is built using Jetpack Compose.

Covid Vaccine This projects used the Cowin APIs provided by the government. Screenshots Tech Stack Used Kotlin Dagger Hilt Clean Architecture with Mod

Himanshu Singh 101 Dec 15, 2022
A Collection of major Jetpack compose UI components which are commonly used.πŸŽ‰πŸ”πŸ‘Œ

SSComposeCookBook A Collection of major Jetpack compose UI components which are commonly used. Introduction Jetpack Compose is a modern toolkit for bu

Simform Solutions 370 Dec 28, 2022
Stock Ticker / Watchlist App being used as an excuse to learn Compose and other Jetpack libs.

StockTicker App Simple app that displays a few FAANG stock tickers and allows the user to search for and add different tickers to a watchlist. API Key

Alex Hart 2 Aug 26, 2022