Die besten Android MarkdownView Bibliotheken

Wenn Sie daran denken, lange Inhalte in Ihrer App anzuzeigen, z. B. einen Blog-Post, dann müssen Sie überlegen und planen, wie diese Inhalte gerendert werden sollen. Obwohl es möglich ist, eine Textansicht zu verwenden, werden Sie es schwer haben, diese anzupassen, um Funktionen wie Links, Farben, Überschriften usw. zu berücksichtigen. TextView ist kein guter Weg. Es bleiben also zwei Möglichkeiten: Webview oder Markdown.

In diesem Beitrag werden wir uns mit Markdown beschäftigen. Beachten Sie, dass die meisten Markdown-Bibliotheken eigentlich auf WebView aufbauen.

(a). tiagohm/MarkdownView

Android-Bibliothek zur Anzeige von Markdown-Text.

Diese Bibliothek verwendet [Flexmark] (https://github.com/vsch/flexmark-java) und einige seiner Erweiterungen.

Die Bibliothek kann:

Markdown aus String darstellen.
Markdown aus Assets wiedergeben.
Markdown aus einer URL wiedergeben.

Im Falle von URL verwendet sie AsyncTask, um den Markdown herunterzuladen, so dass Ihre App nicht einfriert. In all diesen Fällen müssen Sie nur den entsprechenden String übergeben, sei es eine URL, ein Markdown-Text oder ein Dateipfad.

Schritt 1: Installieren

Es wird in jitpack gehostet, also müssen Sie jitpack als Maven-Url unter allProjects in der build.gradle Datei auf der Root-Ebene hinzufügen:

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

Dann fügen Sie die Abhängigkeit in Ihrer app-level build.gradle Datei hinzu:

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

Dann synchronisieren Sie Ihr Projekt.

Schritt 2: MarkdownView zum Layout hinzufügen

Der nächste Schritt ist es, zu deinem Layout zu gehen und dort die MarkdownView hinzuzufügen:

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

Schritt 3: Markdown laden

Wenn Sie Java verwenden, beginnen Sie damit, die MarkdownView zu referenzieren:

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

Wenn Sie Kotlin verwenden, brauchen Sie das nicht zu tun, da Sie den View mit Kotlin-Synthetik oder noch besser mit ViewBinding importieren können.

Dann geht es in jedem Fall weiter. Sie können das Standard-CSS verwenden:

mMarkdownView.addStyleSheet(new Github());

oder ein externes css laden, das sich in den Assets befindet:

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

Dann laden Sie string markdown:

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

Oder lade ein Markdown aus Assets:

mMarkdownView.loadMarkdownFromAsset("markdown1.md");

Oder laden Sie Abschriften als Dateiobjekt. Diese Datei kann zum Beispiel aus dem Dateisystem geladen werden:

mMarkdownView.loadMarkdownFromFile(new File());

Oder Sie können die Abschriften aus dem Internet laden:

mMarkdownView.loadMarkdownFromUrl("url");

Das war's.

Schritt 3: Zusätzliche Funktionen

Sie können benutzerdefiniertes CSS verwenden. Entweder bauen Sie das CSS programmatisch über Java/Kotlin auf:

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

Oder laden Sie das CSS aus einer externen Datei:

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

Sie können auch eine externe Javascript-Datei laden:

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

Dies ist eine funktionsreiche Bibliothek. Here are it's features:

Bold **Text** or __Text__
Kursiv *Text* oder _Text_
Durchgestrichenes ~~Text~~
Horizontale Regeln ---
Überschriften #
Links [alt](url)
Bilder ![alt](url)
Code
Blockquote
Verschachtelte Blockquote
Listen
Tabellen
TaskList
AutoLink
Abkürzung
Markierung ==Text==
Tiefgestelltes H~2~O
Hochgestelltes 10^-10^
Tastendruck @ctrl+alt+del@
MathJax Inline $x = {-b \pm \sqrt{b^2-4ac} \over 2a}$
MathJax $$x = {-b \pm \sqrt{b^2-4ac} \over 2a}$$
Footnotes
Bildgrößenänderung ![alt](url@100px|auto)
Syntaxhervorhebung (mit Highlight.js)
Emoji (EmojiOne v2) :smile:
Benutzerdefiniertes CSS
Youtube @[youtube](fM-J08X6l_Q)
Twitter
JavaScripts
Label --DEFAULT-- ---SUCCESS--- ----WARNING---- -----DANGER-----
Bean {{Feldname}}
Benutzerdefinierte Attribute { #id .class name=value name='value'}
Textausrichtung, Textgröße und Textfarben mit benutzerdefinierten Attributen

Beispiel

Hier ist ein MarkdownView-Beispiel, das diese Bibliothek verwendet:

activity_main.xml

Wir beginnen mit der Erstellung des Layouts:

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

Dann schreiben wir unseren Code, entweder in kotlin oder 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;
        }
    }
}

Hier ist die Quellcode-Referenz.

Referenz

Lesen Sie mehr über diese Bibliothek hier

(b). falnatsheh/MarkdownView

MarkdownView ist ein Android-Webview mit der Fähigkeit, Markdown-Text oder -Dateien zu laden und als HTML anzuzeigen. Es verwendet MarkdownJ und erweitert Android-Webview.

MarkdownView (Markdown For Android) ist eine Android-Bibliothek, mit der Sie Markdown-Text oder -Dateien (lokal/fern) als formatiertes HTML anzeigen und die Ausgabe mit CSS gestalten können.

MarkdownView selbst erweitert Android Webview und fügt die notwendige Logik hinzu, um Markdown (mit MarkdownJ) zu parsen und die HTML-Ausgabe in der Ansicht anzuzeigen.

Schritt 1: Installation

Installieren Sie MarkdownView von jcenter:

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

Schritt 2: Hinzufügen zum Layout

Fügen Sie MarkdownView zu Ihrem XML-Layout hinzu:

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

Schritt 3: Code schreiben

Wenn Sie Java verwenden, referenzieren Sie die MarkdownView aus unserem Layout:

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

Sie können auch View Binding oder Data Binding verwenden, egal ob Sie Java oder Kotlin verwenden. Wenn Sie Kotlin verwenden, können Sie Kotlin Synthetics verwenden.

Sie können MarkdownView auch programmatisch erstellen:

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

Beispiel

Schauen wir uns nun ein vollständiges Beispiel an, wie man die MarkdownView-Bibliothek verwendet, um Markdown lokal zu laden:

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

Wie man Themes auf MarkdownView anwendet

Nehmen wir an, Sie haben Themes und möchten ein Theme anzeigen. Der Benutzer wählt ein Thema aus einem "Spinner" und wir wenden dieses Thema auf die MarkdownView an:

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

Wie lädt man Markdown aus einem String

Wenn Sie Ihr Markdown als String im Speicher haben, zeigt dieses Beispiel, wie Sie es laden können:

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());
    }
}

Wie man Markdowb aus dem Internet rendert

Wenn Sie die Markdown-Datei aus der Ferne gehostet haben und sie herunterladen und rendern möchten, sehen Sie hier, wie Sie das machen:

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

Rufen Sie diese Beispiele hier

Demo

Here's demo:

Referenz

Die vollständige Referenz finden Sie hier

(c). mukeshsolanki/MarkdownView-Android

MarkdownView ist eine einfache Bibliothek, die Ihnen hilft, Markdown-Text oder -Dateien auf Android als HTML-Seite anzuzeigen, genau wie Github.

Schritt 1: Installation

Fügen Sie jitpack in Ihre Root-Level build.gradle Datei ein:

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

Dann installieren Sie die Bibliothek:

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

Schritt 2: Layout hinzufügen

Als nächstes müssen Sie MarkdowView zu Ihrem Layout hinzufügen:

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

Schritt 3: Code

Dann schreiben Sie Java- oder Kotlin-Code:

Referenzieren Sie die MarkdownView:

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

So setzt man Markdowb aus einem String:

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

So lädst du Markdown aus Assets:

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

Und so lädt man Markdowb aus dem Dateisystem oder Pfad:

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

Beispiel

Hier ist ein vollständiges Beispiel:

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

  }
}

Quellcode finden Sie hier.

Referenz

Die vollständige Referenz finden Sie hier.

Categorized in:

Inhalt Ansicht

Tagged in:

German

Die besten Android MarkdownView Bibliotheken – 2021

(a). tiagohm/MarkdownView

Schritt 1: Installieren

Schritt 2: MarkdownView zum Layout hinzufügen

Schritt 3: Markdown laden

Schritt 3: Zusätzliche Funktionen

Beispiel

Referenz

(b). falnatsheh/MarkdownView

Schritt 1: Installation

Schritt 2: Hinzufügen zum Layout

Schritt 3: Code schreiben

Beispiel

Demo

Referenz

(c). mukeshsolanki/MarkdownView-Android

Schritt 1: Installation

Schritt 2: Layout hinzufügen

Schritt 3: Code

Beispiel

Referenz

Other Stories

Android CodeView – Beispiele und Bibliotheken

Die besten Android-Bibliotheken für die wiederholte Ausführung von Code

Press ESC to close

Or check our Popular Categories...

(a). tiagohm/MarkdownView

Schritt 1: Installieren

Schritt 2: MarkdownView zum Layout hinzufügen

Schritt 3: Markdown laden

Schritt 3: Zusätzliche Funktionen

Beispiel

Referenz

(b). falnatsheh/MarkdownView

Schritt 1: Installation

Schritt 2: Hinzufügen zum Layout

Schritt 3: Code schreiben

Beispiel

Demo

Referenz

(c). mukeshsolanki/MarkdownView-Android

Schritt 1: Installation

Schritt 2: Layout hinzufügen

Schritt 3: Code

Beispiel

Referenz

Related Articles

Android CodeView – Beispiele und Bibliotheken

Android WebView Tutorial und Beispiele

Other Stories

Android CodeView – Beispiele und Bibliotheken

Die besten Android-Bibliotheken für die wiederholte Ausführung von Code