Las mejores bibliotecas MarkdownView para Android

Si estás pensando o mostrando contenido largo en tu aplicación, por ejemplo una entrada de blog, entonces necesitas pensar y planificar cómo se va a renderizar este contenido. Aunque es posible usar un textview, te será difícil personalizarlo para tener en cuenta características como enlaces, colores, encabezados, etc. TextView no es una ruta muy buena para ir. Eso nos deja con dos opciones: webview o markdown.

En este post veremos markdown. Tenga en cuenta que la mayoría de las bibliotecas de Markdown son en realidad construidas a partir de WebView.

(a). tiagohm/MarkdownView

Librería de Android para mostrar texto markdown.

Esta biblioteca utiliza Flexmark y algunas de sus extensiones.

La biblioteca puede:

renderizar markdown desde string.
Renderizar markdown desde assets.
renderizar markdown desde una URL.

En los casos de URL utiliza AsyncTask para descargar el markdown para que tu aplicación no se congele. En todos estos casos todo lo que necesitas es pasar la cadena apropiada, ya sea una URL, un texto markdown o una ruta de archivo.

Paso 1: Instalarlo

Está alojado en jitpack, por lo que tendrás que añadir jitpack como url de maven en el cierre de allProjects en tu archivo build.gradle a nivel de raíz:

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

Luego añade la dependencia en tu archivo build.gradle a nivel de aplicación:

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

Luego sincroniza tu proyecto.

Paso 2: Añadir MarkdownView al Layout

El siguiente paso es ir a tu layout y añadir el MarkdownView allí:

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

Paso 3: Cargar Markdown

Si estás usando Java, empieza por referenciar el MarkdownView:

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

Si estás usando Kotlin, no es necesario hacerlo ya que puedes importar la vista usando la sintaxis de Kotlin o incluso mejor mediante ViewBinding.

Entonces en cualquiera de los dos casos procedemos. Puedes usar el CSS por defecto:

mMarkdownView.addStyleSheet(new Github());

o cargar un css externo ubicado en los assets:

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

A continuación, cargue string markdown:

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

O cargar markdown desde assets:

mMarkdownView.loadMarkdownFromAsset("markdown1.md");

O cargar markdown como un objeto de archivo. Este archivo, por ejemplo, puede ser cargado desde el sistema de archivos:

mMarkdownView.loadMarkdownFromFile(new File());

O se puede cargar el markdown desde online:

mMarkdownView.loadMarkdownFromUrl("url");

Eso es todo.

Paso 3: Características adicionales

Puedes usar css personalizado. O bien construir el CSS programáticamente a través de 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);

O cargar el CSS desde un archivo externo:

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

También puedes cargar un archivo externo de Javascript:

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

Esta es una biblioteca rica en características. Estas son sus características:

Negrita **Texto** o __Texto__
Cursiva *Texto* o _Texto_
Tachado ~~Texto~~
Reglas horizontales ---
Encabezados #
Enlaces [alt](url)
Imágenes ![alt](url)
Código
Cita en bloque
Cita en bloque anidada
Listas
Tablas
Lista de tareas
Autoenlace
Abreviatura
Marca ==Texto==
Subíndice H~2~O
Superíndice 10^-10^
Pulsación de tecla @ctrl+alt+del@
MathJax Inline $x = {-b \pm \sqrt{b^2-4ac} \Nsobre 2a}$
MathJax $$x = {-b \pm \sqrt{b^2-4ac}} \sobre 2a}$$
Notas a pie de página
Cambio de tamaño de la imagen ![alt](url@100px|auto)
Resaltado de sintaxis (usando Highlight.js)
Emoji (EmojiOne v2) :smile:
CSS personalizado
Youtube @[youtube](fM-J08X6l_Q)
Twitter
JavaScripts
Etiqueta --DEFAULT-- ---SUCCESS--- ----WARNING---- -----DANGER-----
Bean {{fieldName}}
Atributos personalizados { #id .class name=value name='value'}`
Alineación, tamaño y colores del texto mediante atributos personalizados

Ejemplo

Aquí hay un ejemplo de MarkdownView usando esta biblioteca:

activity_main.xml

Comenzamos creando el layout:

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

Luego escribimos nuestro código, ya sea en kotlin o 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;
        }
    }
}

Aquí está la referencia del código fuente.

Referencia

Lee más sobre esta librería aquí

(b). falnatsheh/MarkdownView

MarkdownView es un webview de Android con la capacidad de cargar texto o archivo Markdown y mostrarlo como HTML, utiliza MarkdownJ y extiende el webview de Android.

MarkdownView (Markdown For Android) es una librería para Android que te ayuda a mostrar texto o archivos Markdown (local/remoto) como HTML formateado, y estilizar la salida usando CSS.

La propia MarkdownView extiende Android Webview y añade la lógica necesaria para analizar Markdown (usando MarkdownJ) y mostrar el HTML de salida en la vista.

Paso 1: Instalación

Instalar MarkdownView desde jcenter:

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

Paso 2: Añadir al Layout

Añadir MarkdownView a su diseño XML:

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

Paso 3: Escribir el código

Si estás usando Java haz referencia al MarkdownView de nuestro layout:

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

También puedes usar view Binding o data binding tanto si usas java como kotlin. Si estás usando Kotlin puedes usar Kotlin Synthetics.

También puedes crear MarkdownView mediante programación:

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

Ejemplo

Veamos ahora un ejemplo completo de cómo usar la librería MarkdownView para cargar markdown localmente:

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

Cómo aplicar temas a MarkdownView

Digamos que tienes temas y quieres mostrar un tema. El usuario elige un tema de un spinner y aplicamos ese tema a 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
    }
}

Cómo cargar Markdown desde una cadena

Si usted ahev su markdown en la memoria como una cadena, este ejemplo muestra cómo se puede cargar:

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

Cómo cargar Markdown desde una cadena

Si ahev el archivo markdown alojado remotamente y quieres descargarlo y renderizarlo, aquí se muestra cómo hacerlo:

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

Acceda a estos ejemplos aquí

Demo

Aquí está la demo:

Referencia

Encuentra la referencia completa aquí

(c). mukeshsolanki/MarkdownView-Android

MarkdownView es una sencilla librería que te ayuda a mostrar texto o archivos Markdown en Android como una página html al igual que Github.

Paso 1: Instalación

Añade jitpack en tu archivo de nivel raíz build.gradle:

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

Luego instala la librería:

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

Paso 2: Añadir Layout

Lo siguiente que tienes que hacer es añadir MarkdowView a tu layout:

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

Paso 3: Código

A continuación, escribe el código java o kotlin:

Haz referencia al MarkdownView:

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

Así es como se establece Markdowb desde una cadena:

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

Así es como se carga Markdown desde assets:

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

Y aquí está cómo cargar markdown desde el sistema de archivos o la ruta:

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

Ejemplo

Aquí hay un ejemplo completo:

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

  }
}

Encuentra el código fuente aquí.

Referencia

Encuentra la referencia completa aquí.

Categorizado en:

Spanish Vista del contenido

Etiquetado en:

Spanish

Las mejores bibliotecas MarkdownView para Android – 2021

(a). tiagohm/MarkdownView

Paso 1: Instalarlo

Paso 2: Añadir MarkdownView al Layout

Paso 3: Cargar Markdown

Paso 3: Características adicionales

Ejemplo

Referencia

(b). falnatsheh/MarkdownView

Paso 1: Instalación

Paso 2: Añadir al Layout

Paso 3: Escribir el código

Ejemplo

Demo

Referencia

(c). mukeshsolanki/MarkdownView-Android

Paso 1: Instalación

Paso 2: Añadir Layout

Paso 3: Código

Ejemplo

Referencia

Oclemy

Otras Historias

Android CodeView – Ejemplos y Bibliotecas

Las mejores librerías Android para ejecutar un código de forma repetitiva

Presiona ESC para cerrar

O revisa nuestras Categorías más Populares...

(a). tiagohm/MarkdownView

Paso 1: Instalarlo

Paso 2: Añadir MarkdownView al Layout

Paso 3: Cargar Markdown

Paso 3: Características adicionales

Ejemplo

Referencia

(b). falnatsheh/MarkdownView

Paso 1: Instalación

Paso 2: Añadir al Layout

Paso 3: Escribir el código

Ejemplo

Demo

Referencia

(c). mukeshsolanki/MarkdownView-Android

Paso 1: Instalación

Paso 2: Añadir Layout

Paso 3: Código

Ejemplo

Referencia

Oclemy

Artículos Relacionados

Ejemplos de Account y AccountManager en Android

Kotlin Android Nested RecyclerView Ejemplo

Kotlin Android StateFlow Ejemplo

Kotlin Android Text To Speech y Speech To Text Ejemplo

Otras Historias

Android CodeView – Ejemplos y Bibliotecas

Las mejores librerías Android para ejecutar un código de forma repetitiva