Les meilleures bibliothèques Android MarkdownView

Si vous envisagez d'afficher du contenu long dans votre application, par exemple un article de blog, vous devez penser et planifier la façon dont ce contenu sera rendu. Même s'il est possible d'utiliser un textview, vous aurez du mal à le personnaliser pour tenir compte de caractéristiques comme les liens, les couleurs, les titres, etc. Le TextView n'est pas une très bonne solution. Cela nous laisse deux options : webview ou markdown.

Dans cet article, nous allons nous intéresser à markdown. Notez que la plupart des bibliothèques Markdown sont en fait construites à partir de WebView.

(a). tiagohm/MarkdownView

Bibliothèque Android permettant d'afficher du texte markdown.

Cette bibliothèque utilise [Flexmark] (https://github.com/vsch/flexmark-java) et certaines de ses extensions.

La bibliothèque peut :

rendre le markdown à partir de string.
Rendre le texte markdown à partir de assets.
Rendre le texte en clair à partir d'une URL.

Dans le cas d'un URL, elle utilise AsyncTask pour télécharger le contenu afin que votre application ne se fige pas. Dans tous ces cas, tout ce dont vous avez besoin est de passer la string appropriée, que ce soit une URL, un texte markdown ou un chemin de fichier.

Etape 1 : L'installer

Il est hébergé dans jitpack, donc vous aurez besoin d'ajouter jitpack comme une url maven dans sous la fermeture allProjects dans votre fichier build.gradle de niveau racine :

maven { url 'https://jitpack.io' }

Puis ajouter la dépendance dans votre fichier build.gradle au niveau de l'application :

implementation 'com.github.tiagohm.MarkdownView:library:0.19.0'

Puis synchronisez votre projet.

Étape 2 : Ajouter MarkdownView à la mise en page

L'étape suivante consiste à aller dans votre layout et à y ajouter le MarkdownView :

<br.tiagohm.markdownview.MarkdownView
    android:id="@+id/markdown_view"
    app:escapeHtml="false"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

Step 3 : Charger Markdown

Si vous utilisez Java, commencez par référencer le MarkdownView :

mMarkdownView = (MarkdownView)findViewById(R.id.markdown_view);

Si vous utilisez Kotlin, pas besoin de le faire puisque vous pouvez importer la vue en utilisant les synthétiques Kotlin ou encore mieux par ViewBinding.

Ensuite, dans les deux cas, nous procédons. Vous pouvez utiliser le CSS par défaut :

mMarkdownView.addStyleSheet(new Github());

ou charger un css externe situé dans le assets :

mMarkdownView.addStyleSheet(ExternalStyleSheet.fromAsset("my_css.css", null))

Ensuite, on charge le markdown string :

mMarkdownView.loadMarkdown("**MarkdownView**");

Ou charger le markdown de assets :

mMarkdownView.loadMarkdownFromAsset("markdown1.md");

Ou encore charger le markdown en tant qu'objet fichier. Ce fichier par exemple peut être chargé depuis le système de fichiers :

mMarkdownView.loadMarkdownFromFile(new File());

Ou vous pouvez charger le markdown depuis en ligne :

mMarkdownView.loadMarkdownFromUrl("url");

C'est tout.

Étape 3 : fonctionnalités supplémentaires

Vous pouvez utiliser des css personnalisés. Soit construire le CSS de manière programmatique via Java/Kotlin :

//InternalStyleSheet css = new InternalStyleSheet();
InternalStyleSheet css = new Github();
css.addFontFace("MyFont", "condensed", "italic", "bold", "url('myfont.ttf')");
css.addMedia("screen and (min-width: 1281px)");
css.addRule("h1", "color: orange");
css.endMedia();
css.addRule("h1", "color: green", "font-family: MyFont");
mMarkdownView.addStyleSheet(css);

Soit charger le CSS à partir d'un fichier externe :

mMarkdownView.addStyleSheet(ExternalStyleSheet.fromAsset("github.css", null);
mMarkdownView.addStyleSheet(ExternalStyleSheet.fromAsset("github2.css", "screen and (min-width: 1281px)");

Vous pouvez également charger un fichier Javascript externe :

JavaScript js = new ExternalJavaScript(url, async, defer);
mMarkdownView.addJavascript(js);

Il s'agit d'une bibliothèque riche en fonctionnalités. Voici ses fonctionnalités :

Gras **Texte** ou __Texte__.
Italique *Text* ou _Text_
Barré ~~Texte~~.
Règles horizontales --
Titres #
Liens [alt](url)`
Images ![alt](url)
Code
Citation en bloc
Citations en bloc imbriquées
Listes
Tableaux
TaskList
Lien automatique
Abréviation
Marqueur ==Texte==.
Sous-titre H~2~O
Superscript 10^-10^
Frappe du clavier @ctrl+alt+del@`
MathJax Inline $x = {-b \pm \sqrt{b^2-4ac} \over 2a}$
MathJax $$x = {-b \pm \sqrt{b^2-4ac} \over 2a}$'. \over 2a}$$
Notes de bas de page
Redimensionnement de l'image ![alt](url@100px|auto)
Mise en évidence de la syntaxe (avec Highlight.js)
Emoji (EmojiOne v2) :smile:
CSS personnalisé
Youtube @[youtube](fM-J08X6l_Q)`
Twitter
JavaScripts
Étiquette --DEFAULT-- ---SUCCESS--- ----WARNING---- -----DANGER-----
haricot {{fieldName}}
Attributs personnalisés { #id .class name=value name='value'}`
Alignement du texte, taille du texte et couleurs du texte à l'aide d'attributs personnalisés

Exemple

Voici un exemple de MarkdownView utilisant cette bibliothèque :

activity_main.xml

Nous commençons par créer la mise en page :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="br.tiagohm.markdownview.app.MainActivity">

    <br.tiagohm.markdownview.MarkdownView
        android:id="@+id/mark_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:escapeHtml="false" />
</LinearLayout>

MainActivity.java

Ensuite, nous écrivons notre code, soit en kotlin, soit en java :

package br.tiagohm.markdownview.app;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.Menu;
import android.view.MenuItem;

import br.tiagohm.markdownview.MarkdownView;
import br.tiagohm.markdownview.css.InternalStyleSheet;
import br.tiagohm.markdownview.css.styles.Github;

public class MainActivity extends AppCompatActivity {

    private MarkdownView mMarkdownView;
    private InternalStyleSheet mStyle = new Github();

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case R.id.change_theme_action:
                break;
        }

        return true;
    }

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

        //Cria o bean.
        MyBean myBean = new MyBean();
        myBean.setHello("Olá");
        myBean.setDiasDaSemana(MyBean.DiasDaSemana.DOMINGO);

        mMarkdownView = findViewById(R.id.mark_view);
        mMarkdownView.addStyleSheet(mStyle);
        //http://stackoverflow.com/questions/6370690/media-queries-how-to-target-desktop-tablet-and-mobile
        mStyle.addMedia("screen and (min-width: 320px)");
        mStyle.addRule("h1", "color: green");
        mStyle.endMedia();
        mStyle.addMedia("screen and (min-width: 481px)");
        mStyle.addRule("h1", "color: red");
        mStyle.endMedia();
        mStyle.addMedia("screen and (min-width: 641px)");
        mStyle.addRule("h1", "color: blue");
        mStyle.endMedia();
        mStyle.addMedia("screen and (min-width: 961px)");
        mStyle.addRule("h1", "color: yellow");
        mStyle.endMedia();
        mStyle.addMedia("screen and (min-width: 1025px)");
        mStyle.addRule("h1", "color: gray");
        mStyle.endMedia();
        mStyle.addMedia("screen and (min-width: 1281px)");
        mStyle.addRule("h1", "color: orange");
        mStyle.endMedia();
        mMarkdownView.setBean(myBean);
        mMarkdownView.loadMarkdownFromAsset("markdown1.md");
    }

    public static class MyBean {

        public enum DiasDaSemana {
            DOMINGO,
            SEGUNDA,
            TERCA,
            QUARTA,
            QUINTA,
            SEXTA,
            SABADO
        }

        private String hello;
        private DiasDaSemana diasDaSemana;

        public String getHello() {
            return hello;
        }

        public void setHello(String hello) {
            this.hello = hello;
        }

        public DiasDaSemana getDiasDaSemana() {
            return diasDaSemana;
        }

        public void setDiasDaSemana(DiasDaSemana diasDaSemana) {
            this.diasDaSemana = diasDaSemana;
        }
    }
}

Ici se trouve la référence du code source.

Référence

Pour en savoir plus sur cette bibliothèque ici

(b). falnatsheh/MarkdownView

MarkdownView est un webview Android avec la capacité de charger un texte ou un fichier Markdown et de l'afficher en HTML, il utilise MarkdownJ et étend Android webview.

MarkdownView (Markdown For Android) est une bibliothèque Android qui vous aide à afficher du texte ou des fichiers Markdown (locaux/à distance) en tant que HTML formaté, et à styliser la sortie en utilisant CSS.

La MarkdownView elle-même étend Android Webview et ajoute la logique nécessaire pour analyser le texte Markdown (en utilisant MarkdownJ) et afficher la sortie HTML sur la vue.

Étape 1 : Installation

Installer MarkdownView à partir de jcenter :

implementation 'us.feras.mdv:markdownview:1.1.0'

Étape 2 : Ajouter à la mise en page

Ajoutez MarkdownView à votre mise en page XML :

   <us.feras.mdv.MarkdownView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/markdownView" />

Étape 3 : Écrire le code

Si vous utilisez Java, référencez le MarkdownView de notre mise en page :

MarkdownView markdownView = (MarkdownView) findViewById(R.id.markdownView);
markdownView.loadMarkdown("## Hello Markdown");

Vous pouvez également utiliser view Binding ou data binding que vous utilisiez java ou kotlin. Si vous utilisez Kotlin, vous pouvez utiliser Kotlin Synthetics.

Vous pouvez également créer MarkdownView de manière programmatique :

  MarkdownView markdownView = new MarkdownView(this);
  setContentView(markdownView);
  markdownView.loadMarkdown("## Hello Markdown");

Exemple

Voyons maintenant un exemple complet de l'utilisation de la bibliothèque MarkdownView pour charger le markdown localement :

**MainActivity.java`

import us.feras.mdv.MarkdownView;
import android.app.Activity;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.Window;

public class LocalMarkdownActivity extends AppCompatActivity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        MarkdownView webView = new MarkdownView(this);
        setContentView(webView);
        webView.loadMarkdownFile("file:///android_asset/hello.md");
    }
}

**Comment appliquer des thèmes à MarkdownView ?

Disons que vous avez des thèmes et que vous voulez afficher le thème. L'utilisateur choisit un thème à partir d'un spinner et nous appliquons ce thème à markdownview :

import us.feras.mdv.MarkdownView;
import android.app.Activity;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemSelectedListener;
import android.widget.ArrayAdapter;
import android.widget.Spinner;

public class MarkdownThemesActivity extends AppCompatActivity implements
        OnItemSelectedListener {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.markdown_themes);
        Spinner themesSpinner = (Spinner) findViewById(R.id.themes_spinner);
        ArrayAdapter<CharSequence> adapter = ArrayAdapter.createFromResource(
                this, R.array.md_themes, android.R.layout.simple_spinner_item);
        adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
        themesSpinner.setAdapter(adapter);
        themesSpinner.setSelection(0);
        themesSpinner.setOnItemSelectedListener(this);
    }

    @Override
    public void onItemSelected(AdapterView<?> parent, View view, int pos,
            long id) {
        MarkdownView mdv = (MarkdownView) findViewById(R.id.markdownView);
        mdv.loadMarkdownFile("file:///android_asset/hello.md",
                "file:///android_asset/markdown_css_themes/"
                        + parent.getItemAtPosition(pos).toString() + ".css");
    }

    @Override
    public void onNothingSelected(AdapterView<?> parent) {
        // no-op
    }
}

**Comment charger un fichier markdown à partir d'une chaîne ?

Si vous ahev votre markdown en mémoire comme une string, cet exemple montre comment vous pouvez le charger :

public class MarkdownDataActivity extends AppCompatActivity {

    private EditText markdownEditText;
    private MarkdownView markdownView;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.markdown_view);
        markdownEditText = (EditText) findViewById(R.id.markdownText);
        markdownView = (MarkdownView) findViewById(R.id.markdownView);
        String text = getResources().getString(R.string.md_sample_data);
        markdownEditText.setText(text);
        updateMarkdownView();

        markdownEditText.addTextChangedListener(new TextWatcher() {

            @Override
            public void afterTextChanged(Editable s) {}

            @Override
            public void beforeTextChanged(CharSequence s, int start, int count, int after) {}

            @Override
            public void onTextChanged(CharSequence s, int start, int before, int count) {
                updateMarkdownView();
            }
        });

    }

    private void updateMarkdownView() {
        markdownView.loadMarkdown(markdownEditText.getText().toString());
    }
}

Comment rendre le markdown en ligne

Si vous ahev le fichier markdown hébergé à distance et que vous voulez le télécharger et le rendre, voici comment faire :

public class RemoteMarkdownActivity extends AppCompatActivity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        MarkdownView markdownView = new MarkdownView(this);
        setContentView(markdownView);
        markdownView.loadMarkdownFile("https://raw.github.com/falnatsheh/MarkdownView/master/README.md");
    }
}

Accédez à ces exemples ici

Démo

Voici la démo :

Référence

Trouvez la référence complète ici

(c). mukeshsolanki/MarkdownView-Android

MarkdownView est une bibliothèque simple qui vous aide à afficher du texte ou des fichiers Markdown sur Android comme une page html, tout comme Github.

Etape 1 : Installation

Ajouter jitpack dans votre fichier build.gradle au niveau de la racine :

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

Puis installez la bibliothèque :

implementation 'com.github.mukeshsolanki:MarkdownView-Android:1.1.1'

Étape 2 : Ajout de la mise en page

Ensuite, vous devez ajouter MarkdowView à votre mise en page :

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

Step 3 : Code

Ensuite, écrivez du code java ou kotlin :

Référencez le MarkdownView :

MarkdownView markdownView = (MarkdownView) findViewById(R.id.markdown_view);

Voici comment définir Markdowb à partir d'une string :

markdownView.setMarkDownText("# Hello World\nThis is a simple markdown"); //Displays markdown text
...

Voici comment vous chargez le markdown à partir de assets :

markdownView.loadMarkdownFromAssets("README.md"); //Loads the markdown file from the assets folder
...

Et voici comment vous chargez le markdown à partir du système de fichiers ou du chemin :

File markdownFile=new File("filePath");
markdownView.loadMarkdownFromFile(markdownFile); //Loads the markdown file.

Exemple

Voici un exemple complet :

**MainActivity.java`

package com.mukesh.markdownview.example;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import com.mukesh.MarkdownView;

public class MainActivity extends AppCompatActivity {

  @Override protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    MarkdownView markdownView = (MarkdownView) findViewById(R.id.markdown_view);
    markdownView.setMarkDownText("# Hello World\nThis is a simple markdown\n"
        + "https://github.com/mukeshsolanki/MarkdownView-Android/");
    //markdownView.loadMarkdownFromAssets("README.md");
    markdownView.setOpenUrlInBrowser(true); // default false

  }
}

Trouvez le code source [ici] (https://github.com/mukeshsolanki/MarkdownView-Android/tree/master/app).

Référence

Trouvez la référence complète ici.

Catégorisé:

French Vue du contenu

Les meilleures bibliothèques Android MarkdownView – 2021

(a). tiagohm/MarkdownView

Etape 1 : L'installer

Étape 2 : Ajouter MarkdownView à la mise en page

Step 3 : Charger Markdown

Étape 3 : fonctionnalités supplémentaires

Exemple

Référence

(b). falnatsheh/MarkdownView

Étape 1 : Installation

Étape 2 : Ajouter à la mise en page

Étape 3 : Écrire le code

Exemple

Démo

Référence

(c). mukeshsolanki/MarkdownView-Android

Etape 1 : Installation

Étape 2 : Ajout de la mise en page

Step 3 : Code

Exemple

Référence

Oclemy

Autres Histoires

Android CodeView – Exemples et bibliothèques

Meilleures librairies Android pour exécuter un code de manière répétitive

Appuyez sur ESC pour fermer

Ou consultez nos catégories populaires...

(a). tiagohm/MarkdownView

Etape 1 : L'installer

Étape 2 : Ajouter MarkdownView à la mise en page

Step 3 : Charger Markdown

Étape 3 : fonctionnalités supplémentaires

Exemple

Référence

(b). falnatsheh/MarkdownView

Étape 1 : Installation

Étape 2 : Ajouter à la mise en page

Étape 3 : Écrire le code

Exemple

Démo

Référence

(c). mukeshsolanki/MarkdownView-Android

Etape 1 : Installation

Étape 2 : Ajout de la mise en page

Step 3 : Code

Exemple

Référence

Oclemy

Articles Liés

Exemples de comptes et AccountManager Android

Kotlin Android Nested RecyclerView Exemple

Exemple de StateFlow pour Android en Kotlin

Kotlin Android Text To Speech et Speech To Text Exe

Autres Histoires

Android CodeView – Exemples et bibliothèques

Meilleures librairies Android pour exécuter un code de manière répétitive