Aprende a convertir Markdown a HTML directamente en el navegador con Javascript y sin solicitudes externas.

Cómo convertir Markdown a HTML en JavaScript usando Remarkable

Markdown es uno de los lenguajes de marcado ligero más utilizados en Internet. Es ideal para un subconjunto de tareas, principalmente publicaciones de blogs y comentarios. Con solo un par de caracteres adicionales, Markdown hace que el formato de documentos enriquecido sea rápido y atractivo. Markdown se puede convertir a HTML en muchos lenguajes de programación, por supuesto, no podemos olvidar nuestro amado Javascript. Si desea convertir markdown a HTML fácilmente con Javascript, ya sea en el navegador, Node.js u otro tiempo de ejecución de Javascript, le recomendamos que utilice Remarkable.

Remarkable es un analizador de rebajas bien hecho. Es realmente rápido y fácil de extender, ya que no paga con velocidad por su flexibilidad porque está escrito en estilo monomórfico y usa cachés en línea JIT de manera efectiva. Tiene una sintaxis configurable, eso significa que puedes agregar nuevas reglas e incluso reemplazar las existentes. Sigue las especificaciones de CommonMark .

Requisitos

Para convertir markdown fácilmente a HTML en Javascript, necesitará como se mencionó anteriormente, Remarkable. Puede descargar la biblioteca con NPM:

npm install remarkable --save

O con Bower:

bower install remarkable --save

O si no usa un administrador de paquetes, use un CDN ( o descargue el script del repositorio en Github aquí ):

<script src="https://cdn.jsdelivr.net/remarkable/1.7.1/remarkable.min.js"></script>

Para obtener más información sobre la biblioteca, visite el repositorio oficial de Github aquí .

Usando Remarkable

Remarkable puede ser fácilmente en su expresión más básica en el siguiente ejemplo:

// Si usa require (Node, etc.), primero requiera el módulo y luego cree la instancia
var Remarkable = require('remarkable');
// Si está en el navegador, la clase Remarkable ya está disponible en la ventana
var md = new Remarkable();

// Imprime: <h1>Remarkable rulezz!</h1>
console.log(md.render('# Remarkable rulezz!'));

Remarkable se puede configurar para que funcione de la misma manera que Github Flavored Markdown , sin embargo, las etiquetas HTML no están permitidas. Puede personalizar Remarkable en el constructor o con el método set.

Nota

Si le preocupa el rendimiento de su aplicación, para lograr el mejor rendimiento posible, no modifique una instancia de Remarkable sobre la marcha. Si necesita varias configuraciones, cree varias instancias e inicialice cada una con una configuración que sea ideal para esa instancia.

Personalización notable en el constructor

Como se mencionó, puede modificar las opciones de notable a través del constructor:

// Valores predeterminados reales

var md = new Remarkable({
    html: false, // Habilitar etiquetas HTML en la fuente
    xhtmlOut: false, // Use '/' para cerrar etiquetas individuales (<br />)
    breaks: false, // Convertir '\n' in párrafos en <br>
    linkify: false, // Conversión automática de texto similar a una URL en enlaces

    // Habilite algunos reemplazos neutrales en el idioma + embellecimiento de citas
    typographer: false,

    // Pares de reemplazo de comillas simples y dobles, cuando el tipógrafo está habilitado,
    // y citas inteligentes. Establezca dobles en '«»' para ruso, '„“' para alemán.
    quotes: '“”‘’'
});

console.log(md.render('# Remarkable rulezz!'));

Personalización notable a través del método de configuración

Alternativamente, puede modificar las propiedades sobre la marcha utilizando el método set:

var md = new Remarkable();

md.set({
    html: true,
    breaks: true
});

Resaltado de sintaxis de código

De forma predeterminada, fragmentos de código de proceso notables como lo hace github, por ejemplo, la siguiente rebaja:

# Remarkable rulezz!

```javascript 
alert(window.location.host)
```

Se convertiría en el siguiente HTML:

<h1>Remarkable rulezz!</h1>
<pre>
    <code class="language-javascript">alert(window.location.host)</code>
</pre>

Lo que facilita el resaltado de código con complementos como Prism.js o HighlightJS . Sin embargo, si desea devolver directamente el marcado resaltado (el código ya formateado con los intervalos de resaltado, etc.), puede usar la función de resaltado que le permite personalizar cómo se debe manejar la cadena de código (esta función es especialmente útil en el servidor lado, por ejemplo, NodeJS). El siguiente ejemplo muestra cómo resaltar directamente el código usando HighlightJS:

Nota

El resaltado debe  devolver HTML de escape o "" si no se cambia la cadena de origen.

var md = new Remarkable({
    // Modifique el HTML generado resaltando el código directamente
    highlight: function (str, lang) {
        if (lang && hljs.getLanguage(lang)) {
            try {
                return hljs.highlight(lang, str).value;
            } catch (err) {}
        }

        try {
            return hljs.highlightAuto(str).value;
        } catch (err) {}

        return ''; // use external default escaping
    }
});

// resto de tu código

Que con el ejemplo de Markdown, debería generar el siguiente HTML:

<h1>Remarkable rulezz!</h1>
<pre>
    <code class="language-javascript">alert(<span class="hljs-built_in">window</span>.location.host)</code>
</pre>

Bastante fácil, ¿verdad?

Usando complementos

Remarkable le permite utilizar complementos e incluso crear sus propios complementos . Para registrarlos en Remarkable solo, use el método use:

var md = new Remarkable();

md.use(plugin1)
  .use(plugin2, opts)
  .use(plugin3);

Por ejemplo, para agregar el complemento bastante notable  (usado bonificación de rebajas con Remarkable usando reglas de renderizado personalizadas), simplemente podría usar el siguiente código:

var prettify = require('pretty-remarkable');
var Remarkable = require('remarkable');
var md = new Remarkable();

// registrar el complemento
md.use(prettify);

// usar
var result = md.render('\n\n\n# foo\n\n\nbar\n# baz');
//=> '# foo\n\nbar\n\n# baz'

Que te diviertas ❤️!


Interesado en la programación desde los 14 años, Carlos es un programador autodidacta, fundador y autor de la mayoría de los artículos de Our Code World.

Conviertete en un programador más sociable

Patrocinadores