Pasar al contenido principal

🔥 Hoy comenzamos la especialidad en programación backend con PHP con Yesi Days ¡La primera clase es en vivo y gratis! 😍 Reserva tu lugar. Comienza en:

Alexys Lozada
José Luján
Manuel Rodriguez
José Luján
Luis Avilés
Álvaro Felipe
José Luján
Beto Quiroga
Jonathan MirCha
Jonathan MirCha
Álvaro Felipe
Alexys Lozada, Álvaro Felipe, Jonathan MirCha
Beto Quiroga
Alexys Lozada
Alexys Lozada
José Luján
Álvaro Felipe
Álvaro Felipe
Jonathan MirCha
Jonathan MirCha
Alexys Lozada, José Luján
Alexys Lozada, José Luján
Alexys Lozada, José Luján
Camilo Adobe
Álvaro Felipe
José Luján
Jonathan MirCha
Álvaro Felipe
Álvaro Felipe
Beto Quiroga, Alexys Lozada
Álvaro Felipe
Juan Villalvazo
Luis Avilés
Jonathan MirCha
Jonathan MirCha
Jonathan MirCha

Integrar Markdown en Pug

Pug y Markdown

Markdown es un lenguaje de marcado que, con una sintaxis muy sencilla, te permite escribir HTML, por ello es recomendable para blogs y páginas que cuentan con muchas entradas de texto.

Un pequeño ejemplo de lo que puede hacer Markdown :

# Titulo 
Hola **EDcomunidad**, soy un párrafo escrito con *Markdown*

Devuelve el siguiente código HTML

<h1>Título</h1>
<p>Hola <strong>EDcomunidad</strong>, soy un párrafo escrito con <em>Markdown</em>.

Para convertir Markdown a HTML necesitas una herramienta como https://dillinger.io/ también existen librerías o plugins para tu editor de código favorito. 

Puedes ver la sintaxis completa de Markdown en Github.

Integrando Markdown con Pug

Pug es otro lenguaje que permite escribir HTML con una sintaxis sencilla (a diferencia de Markdown, con Pug se puede programar). Pug por sí solo no interpreta la sintaxis de Markdown. Es decir, no podemos hacer include docs.md dentro de un archivo .pug porque nos lanzará un error. Sin embargo tenemos a Markdown-it un filtro de pug que "parsea" (analiza) la sintaxis Markdown y la renderiza en formato html.

Para instalarlo usa el siguiente comando en la terminal.

npm install --save-dev jstransformer-markdown-it

Ahora, existen 3 formas de integrar markdown a tu proyecto con pug.

Colocando directamente el filtro :markdown-it y escribiendo dentro de el.

	:markdown-it
    Hola humano, este es un **párrafo**. Además este es un link [Google] (http://google.com)

Puedes escribir HTML estándar dentro de markdown usando el parámetro html

	:markdown-it(html)
    ##Hola humano, este no es un **párrafo** es un h2    
    <p>Soy un elemento HTML dentro de Markdown </p>

O incluyendo un archivo .md (extensión Markdown) en tu archivo pug:

include:markdown-it(html) md/docs/example.md

Como ves, es muy sencillo de usar ¡Espero que lo uses en muchos proyectos!

Gracias por leer.

Suscríbete al blog de EDteam

Ingresa tu correo electrónico para recibir nuestro boletín semanal