Cuándo deseamos generar contenido en HTML para la web, por ejemplo para crear una entrada en un blog, tenemos en principio tres opciones:
- Escribir nosotros mismos el código HTML.
- Utilizar un editor de textos WYSIWIG
- Utilizar un lenguaje de marcado ligero
La primera opción nos proporciona la ventaja de tener todo el control sobre el código producido, pero tiene el inconveniente de ser bastante tedioso y complicado. A parte, cuando escribimos HTML un mínimo fallo puede causar un resultado desastroso (Por ejemplo si cometemos una errata del estilo describir <\a>
en lugar de </a>
)
La segunda opción, es más fácil e intuitiva, pero tiene un problema: Los editores WYSIWIG como TinyMCE suelen generar HTML de mala calidad, y solo son adecuados para gente sin conocimientos de HTML.
La tercera opción, tiene un poco las ventajas de las dos primeras opciones, sin apenas ninguno de sus inconvenientes, y es la que analizaremos en esta entrada, utilizando en concreto el lenguaje de marcado ligero Markdown
Ventajas de Markdown
En mi opinión escribir en Markdown tiene las siguientes ventajas:
- Es sencillo de aprender
- Es bastante más legible y fácil de mantener que HTML
- Aunque, por norma general, se utiliza para generar HTML, se puede también exportar a otros formatos como PDF.
- Permite incrustar HTML. Por lo tanto, en principio, todo lo que se pueda hacer en HTML se puede hacer también en Markdown
- Esta bastante usado y aceptado por la comunidad. Por ejemplo, la mayor parte de los proyectos de github contienen un fichero readme que suele estar en formato Markdown.
- Permite que te concentres en generar contenido en lugar de preocuparte de generar HTML correcto o tener que lidiar con la idiosincrasia de un determinado editor WYSYWIG.
Sintáxis
Detallaré algunos ejemplos de las cosas que podemos hacer con Markdown. Si queréis podéis probar de forma interactiva los ejemplos en https://dillinger.io
Cursiva
Para poner un texto en cursiva basta con empezar y terminar el texto con un _
.
Ejemplo:
1 | Esta _palabra_ está en cursiva |
Resultado:
Esta palabra está en cursiva
Negrita
Similar a la cursiva pero usando dos barras bajas (__
) en lugar de una:
Ejemplo:
1 | Esta __palabra__ está en negrita |
Resultado:
Esta palabra está en negrita
Hipervínculo
Para crear un hipervínculo en Markdown basta con poner entre corchetes ([
y ]
) el texto del enlace seguido de la url entre
paréntesis:
Ejemplo:
1 | Este [enlace](https://es.wikipedia.org) te llevará a la Wikipedia |
Resultado:
Este enlace te llevará a la Wikipedia
Imagenes
Muy similar a los hipervínculos pero poniendo un !
antes del corchete.
Ejemplo:
1 | ![logo de markdown](https://upload.wikimedia.org/wikipedia/commons/4/48/Markdown-mark.svg) |
Resultado:
En este caso, el texto entre cochetes, será el texto que aparecería en caso de que la imágen no cargase
Listas numeradas
Bastará con poner los números seguidos de un punto y un espacio al comienzo de cada elemento de la lista:
Ejemplo:
1 | Mi lista de frutas: |
Resultado:
Mi lista de frutas:
- Manzana
- Pera
- Kiwi
Listas no numeradas
De igual forma puedes hacer lista no númeradas utilizando el caracter -
seguido de un espacio al comienzo de cada elemento.
Ejemplo:
1 | Mi lista de legumbres: |
Resultado:
Mi lista de legumbres:
- Alubias
- Lentejas
- Garbanzos
Utilizar *
o +
en lugar de -
, producirá el mismo resultado
Títulos
Bastará con empezar la línea con una o varias almohadillas seguidas de un un espacio
Ejemplo:
1 | # Tema principal |
Resultado:
Tema principal
Tema secundario
Una forma equivalente de producir el resultado del ejemplo anterior sería:
1 | Tema principal |
Código en línea
Podemos utilizar este recurso para resaltar nombres de ficheros, urls, nombres de variables, y cosas de ese estilo. Basta con rodear el texto desado con el caracter `
Ejemplo:
1 | En JavaScript `Math.random()` genera un número aleatorio |
Resultado:
En JavaScript
Math.random()
genera un número aleatorio
Bloque de código
Si lo que necesitamos es mostrar un fragmento de código, solo tendremos que poner ``` antes y después del mismo
Ejemplo:
1 | ``` |
Resultado:
1 | // devuelve la letra correspondiente a un número DNI |
También podemos utilizar los bloque de código cuando necesitemos texto de anchura fija. Por ejemplo para ASCII Art
Si necesitáis mas información podéis consultar la página oficial de Markdown. También hay algún resumen en github
Espero que os haya sido de interés. No dudéis en comentar