Giter Site home page Giter Site logo

mukeshsolanki / markdownview-android Goto Github PK

View Code? Open in Web Editor NEW
578.0 16.0 93.0 3.5 MB

Markdown lets you easily display markdown data in android and its compose ready.

License: MIT License

Java 4.45% JavaScript 91.33% CSS 3.87% HTML 0.35%
markdownview readme android gradle md codeview android-webview compose composer-library jetpack-compose jetpack jetpack-android

markdownview-android's Introduction

Compose Markdown View



MarkdownView is a composable library that helps you display Markdown text or files on Android as a html page just like Github.

Demo

Supporting Compose Markdown View

Compose Markdown View is an independent project with ongoing development and support made possible thanks to your donations.

Getting started

Its really simple to integrate Markdown in android. All you need to do make the following change to you build gradle under the app module.

Step 1. Add the JitPack repository to your build file. Add it in your root build.gradle at the end of repositories:

allprojects {
  repositories {
    ...
    maven { url "https://jitpack.io" }
  }
}

Step 2. Add the dependency

dependencies {
    implementation 'com.github.mukeshsolanki:MarkdownView-Android:2.0.0'
}

How to use Markdown

Its fairly simple and straight forward to use Markdown in you application.

  • Using Compose

Just use MarkDown composable where you need to display the view like

MarkDown(
    url = URL("https://raw.githubusercontent.com/mukeshsolanki/MarkdownView-Android/main/README.md"),
    modifier = Modifier.fillMaxSize()
)
  • Using Older View System (aka XML)

Add a compose view in your xml file like

<androidx.compose.ui.platform.ComposeView
    android:id="@+id/markdown"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

and reference it in your activity/fragment and assign the markdown text/file like wise.

val markdown = findViewById(R.id.markdown)
markdown.composeView.apply {
    // Dispose of the Composition when the view's LifecycleOwner is destroyed
    setViewCompositionStrategy(DisposeOnViewTreeLifecycleDestroyed)
    setContent {
       // In Compose world
       MaterialTheme {
            MarkDown(
                url = URL("https://raw.githubusercontent.com/mukeshsolanki/MarkdownView-Android/main/README.md"),
                modifier = Modifier.fillMaxSize()
            )
       }
    }
}

Markdown Sources

You have 3 different sources from where markdown data can be read

  • Text - You can pass the content and string to render the markdown
MarkDown(
    text = "# Test Markdown",
    modifier = Modifier.fillMaxSize()
)
  • File - You can read from a file and display the markdown data.
MarkDown(
    file = file,
    modifier = Modifier.fillMaxSize()
)
  • URL - You can also specify the url of the markdown file.
MarkDown(
    url = URL("https://raw.githubusercontent.com/mukeshsolanki/MarkdownView-Android/main/README.md"),
    modifier = Modifier.fillMaxSize()
)

Author

Maintained by Mukesh Solanki

Contribution

GitHub contributors

  • Bug reports and pull requests are welcome.

License

Copyright (c) 2018 Mukesh Solanki

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

markdownview-android's People

Contributors

littlehans8 avatar mukeshsolanki avatar tajchert avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

markdownview-android's Issues

Using the library, nothing is being displayed in the application.

Hi I am trying to use the MarkdownView library and what I have observed is no matter what I do, nothing is being displayed in my layout. I have followed exactly what has been given in the example yet no text is being displayed in the application.

The links to the file where I using the MarkdownView

https://github.com/codeahead14/Working_with_Git_API/blob/Submission_v1/app/src/main/java/com/example/gaurav/gitfetchapp/Repositories/RepositoryBranchPagerFragment.java

https://github.com/codeahead14/Working_with_Git_API/blob/Submission_v1/app/src/main/res/layout/repository_branch_details_layout.xml

android 4.4 nativeOnDraw failed;

Hi,

I have a problem on devices with Android 4.4 (kitkat)

This is the error: nativeOnDraw failed; clearing to background color

Practically the markdownview overwrites and also hides the toolbar.

I also tried it with: markdown.setLayerType(View.LAYER_TYPE_SOFTWARE, null);

but it does not solve the problem.

Tips?
Thank you

Handle click of link. Not call shouldOverrideUrlLoading()

My code:

`public class MarkdownViewMukeshActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.markdown_view_mukesh_activity);

    MarkdownView markdownViewMukesh = (MarkdownView) findViewById(R.id.markdownView_Mukesh);
    markdownViewMukesh.setWebViewClient(new MyWebViewClient());
    markdownViewMukesh.loadMarkdownFromAssets("my_custom.md");
}

}`

My WebClient class:

`

public class MyWebViewClient extends WebViewClient {

@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
    if (url.contains("command:")) {
         // do some custom handle
        }
        return true;
    } else {
        return false;
    }
}`

My markdown_view_mukesh_activity.xml:

`

<com.mukesh.MarkdownView
    android:id="@+id/markdownView_Mukesh"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

`

File my_custom.md success show. But when I click some link - NOT call method shouldOverrideUrlLoading(). Why?

Load from url doesn't work.

Hey first of all i wanna say your library is awesome, however i have an issue about loading md files from URL, it doesn't work or should i say the text is not formatted rather its just plain text with all the tags and stuff.

Images within markdown text

Hi,

thank you for your library, it really helps a lot!
I have one question; how to display images inside the MarkdownView?

I've tried
![home](file:///android_asset/markdown/images/home.png)
and
![home](images/home.png)
but I still get the FileNotFoundException.

Thank you in advance

check list issue

can you add a check list feature?
image
This one.
It seems to be used like this - [ ]

Render Problem

Hi,
finding a small rendering problem with code block.

on simple editor I see perfettament as:
schermata 2017-02-10 alle 17 31 52
instead of Android I have this effect:
screenshot_2017-02-10-17-31-24

how do I fix?

thank you

Adaptable background.

How can I change the background color? Since it's a webview, transparancy on higher api versions is nut supported, especially not with hardware acceleration. any ideas?

not scrollable

Hi there! i have specified a custom height for my MarkdownView and my view is not scrollable any more.
thanks.

Hyperlink issue

after loading a webpage which has some hyperlink in it, and when we click on a link it is opening and changing all the contents that loaded. and how should we direct the link to external browser than replacing the contents that already loaded

Flexibility theming

Your library is so cool, but seem like it has static theme and dev can not customize at all. In my personal situation, I have a table with large content inside, without divider between two row or two columns, the table isn't readable, it will be better if dev can easy customize theme without extends your library.

Screenshoot

Have a look at https://github.com/falnatsheh/MarkdownView, It allows dev set theme dynamically but it can not display table at all.

Open url in system browser?

If the markdown file have url,and I want to open the url in my system browser instead of opening in MarkdownView.if add this feature i think will be better.

MarkdownView doesn't work

When I run in my network callback,it seems doesn't work.The code like this:

 @Override public void respondSuccess(final Trees data) { // my netwrokCallback
         Thread thread = new Thread(new Runnable() {
     @Override public void run() {
       try {
         // get markdown txt from bootstrap
         Blob blob = mGitDateService.getBlob("twbs", "bootstrap",
             "e0e7c32bdd7d6d91efc36ad9da1a39549c9b0e13").execute().body();
         final String txtMarkdown = new String(Base64.decode(blob.content, Base64.DEFAULT));
         Log.d(TAG, "run: " + txtMarkdown); // log->success
         getActivity().runOnUiThread(new Runnable() {
           @Override public void run() {
             mTxtDescription.setText(txtMarkdown); // I test the code in a TextView, show normal
             mMarkdownView.setMarkDownText(txtMarkdown); // show abnormal,the markdown is blank
             Log.d(TAG, "run: " + "already set markdownTxt"); // log->success
           }
         });
       } catch (IOException e) {
         e.printStackTrace();
       }
     }
   });
   thread.start();
 }

Styling

Is it possible to add styling, like background color, font, font size, font color, ...

cannot load markdown image in assets folder

I use the code to load markdown in assets folder
markdownView.loadMarkdownFromAssets(detailModel.getHtml()+".md");
but cannot load the image in assets folder like
![](pic/15112671993156.jpg)
Thanks!

Can apply CSS style?

My code:

`public class MarkdownViewMukeshActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.markdown_view_mukesh_activity);

    MarkdownView markdownViewMukesh = (MarkdownView) findViewById(R.id.markdownView_Mukesh);
     markdownViewMukesh.loadMarkdownFromAssets("my_file.md");
}

}`

OK. It's work.
The question is: Can I apply also CSS style to markdown file?

Support collapsible content

Subject of the issue

I've used this to include my changelog in the app, but the collapsable sections aren't working as expected.

Steps to reproduce

Include the library, load a CHANGELOG.md that contains collapsible sections which has markdown in them, according to this gist.

<details>
<summary>This shouldn't be parsed</summary>

### Some other text that should be bigger.
</details>

Expected behaviour

The markdown inside the collapsible section should be parsed and rendered as well.

An Example

This shouldn't be parsed

Some other text that should be bigger.

Actual behaviour

The markdown inside the collapsible section is rendered raw. Content outside it is rendered as expected.

Screenshots

Actual Behaviour - 1
Actual Behaviour - 2

Internal links not working

First of all, thanks for making this vary handy tool. I'm using it to create a user manual for my App, and finding it would be very useful to have a table of contents at the top, but I'm not able to create one because the internal linking doesn't work.

Subject of the issue

Internal links, e.g.

[Link to Section](#section-name)

...

# Section Name

Steps to reproduce

Above markdown should do it.

Expected behaviour

Upon clicking internal link, screen should jump to that heading.

Actual behaviour

Screen just goes blank.

URL images are not being rendered

Subject of the issue

When using jetpack compose, none of the URL images are being rendered.

Tell us how to reproduce this issue. Please provide a working demo.

Use something like anywhere

Expected behaviour

It should show the image

Actual behaviour

The image isn't shown.

Could be a coil issue?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.