GDPR Cookie Consent by FreePrivacyPolicy

Markdown en el navegador: la librería javascript Marked

Fecha: 2019-07-15 Tiempo de lectura: 3 minutos Categoría: Miscelánea Tags: html / markdown / marked

En otros artículos hablé de una librería javascript que nos permitía escribir documentación de forma fácil, escribiendo en el fichero .html el contenido en lenguaje de marcado markdown. Se trataba de Strapdown y le he dado mucho uso desde entonces; aunque soy minimalista y me gusta ir a lo básico.

Y es que este proyecto es muy claro en los créditos de su página web; basan su trabajo en:

Marked - Fast Markdown parser in JavaScript
Google Code Prettify - Syntax highlighting in JavaScript
Twitter Bootstrap - Beautiful, responsive CSS framework
Bootswatch - Additional Bootstrap themes

Si asumimos que no necesitamos iluminación de sintaxis, y queremos evitar el framework bootstrap por su pesadez, lo lógico es usar directamente la librería de markdown; esto también nos da más control sobre los tags que deben interpretarse como markdown y reemplazarse por el HTML generado.

Lo primero para entender como funciona es ir a su documentación. El primer ejemplo es de lo más simple y no entraña ninguna complicación:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>Marked in the browser</title>
</head>
<body>
  <div id="content"></div>
  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
  <script>
    document.getElementById('content').innerHTML =
      marked('# Marked in browser\n\nRendered by **marked**.');
  </script>
</body>
</html>

Lo que debemos entender es que el contenido markdown se entrega a una función llamada marked que devuelve el contenido HTML. Este contenido es utilizado para llenar el innerHTML del elemento que queramos utilizar para pintarlo.

Este ejemplo ha decidido no utilizar complicaciones; uso un contenido básico, lo paso a la función y lo pongo en el elemento con id=content. Esto se hace inmediatamente y no hay ni editores, ni repintado mientras escribimos ni nada. Si os interesa, esto lo tenéis que implementar vosotros.

Para intentar emular el funcionamiento de Strapdown necesitamos tomar algunas decisiones de diseño:

Con estas premisas, no es difícil modificar el ejemplo para que haga lo que nos interesa. Solo habrían dos grandes cambios que hacer:

De esta manera, quedaría algo como esto:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>Lorem Ipsum</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="markdown">

# Tenebor nunc praedictaque

## Constitit forte delubraque gladio soporem dum odium

Lorem markdownum gratare stellamque senis quiescere auxiliaria tuos tetigere
horrenda reposcunt, vulnera aether deus saevior merguntque cortex spatii;
sucoque? Falcato omnes, laborum quem quaeris
[nomen](http://www.praequestus.com/loqui.html) cede dolore, nebulas *Pandione*.

  </div>
  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
  <script>
    var l = document.getElementsByClassName('markdown');
    var i;
    for (i = 0; i < l.length; i++) {
      l[i].innerHTML = marked(l[i].innerHTML);
    }
  </script>
</body>
</html>

De esta forma solo tenemos que implementar un estilo propio y añadir un título más adecuado. Esto se consigue cambiando el HTML base, y posiblemente creando un fichero style.css a nuestro gusto. En mi caso seguí los consejos de otro artículo.

TRUCO: Para el contenido de ejemplo he utilizado una herramienta web externa, que bien merece una mención: https://jaspervdj.be/lorem-markdownum/.