Markdown es una sintaxis sencilla para escribir textos enriquecidos, con formato, que luego se puede convertir fácilmente en HTML para ser visualizado en los navegadores.
Markdown es un lenguaje sencillo, con una sintaxis muy resumida y fácil de recordar e interpretar por humanos, que permite escribir HTML sin la necesidad de usar etiquetas, lo que redunda en velocidad de escritura y facilidad de mantenimiento del contenido.
Existen multitud de liberías, para cualquier lenguaje, que permiten convertir el código markdown en HTML y viceversa, por lo que usarlo en cualquier tipo de aplicación es también muy sencillo y directo.
Más información:
Para qué se usa Markdown
Generalmente se usa Markdown para facilitar la vida a las personas que deben escribir contenido para la web. HTML es muy farragoso, lento de escribir y es fácil cometer errores de sintaxis. Por tanto, una solución simple podría ser Markdown.
El código de markdown lo puedes colocar en archivos de texto plano, igual que el HTML y en bloques de texto de los sistemas de gestión de contenido. Paralelamente es más seguro, porque el número de etiquetas que puedes colocar vía markdown es más limitado.
Debe quedar claro que los navegadores no entienden markdown. Por tanto, el código en Markdown será convertido en HTML por los propios CMS o librerías de programación para presentarlo en una página web.
Markdown se usa porque es un lenguaje muy natural para las personas, que permite escribir contenido muy fácilmente. La manera de especificar las etiquetas que englobarán ese contenido es muy sencilla, por eso desde hace años se ha popularizado en muchas plataformas de gestión de contenido, llegando a ser prácticamente un estándar en herramientas como los generadores de sitios estáticos.
También es muy popular en sistemas de documentación de proyectos. Por ejemplo, todos los README de los proyectos alojados en repositorios Git, como los que encuentras en GitHub, se realizan en sintaxis markdown.
Archivos Markdown
Los archivos de Markdown son archivos de texto plano, comúnmente con la extensión ".md".
Puedes crear archivos Markdown con cualquier editor de texto plano. Debe de ser un editor que no agregue estilos, como cualquiera de los habituales que se usan para programación.
Para poder ver estos archivos Markdown convertidos en su representación HTML (visualmente enriquecidos) podemos usar alguna extensión en el programa editor que estemos usando, como Markdown Preview Enhanced en Visual Studio Code. Otra opción es la extensión Markdown Viewer del navegador Chrome.
Sintaxis markdown
La sintaxis Markdown incluye una pequeña lista de códigos sencillos para representar las etiquetas más populares y básicas del HTML.
Párrafos <p>
Los párrafos los puedes escribir sin necesidad de ninguna representación en especial. Simplemente con que separes la línea con un salto de línea doble, al convertir el markdown en HTML se usará la etiqueta <p>.
Encabezados <H1>...<h6>
Los encabezados son colocados con el caracter # y un espacio en blanco al principio del párrafo. Dependiendo de la cantidad de "#" se tomará el encabezado a usar.
# ...indica <h1>
## ...indica <h2>
...
######...indica <h6>
Listas desordenadas <ul>
Las listas se colocan con un guión al principio de la línea. Luego las lineas sucesivas que formen parte de la misma lista, se colocan con un salto de línea simple y otra línea comenzando por un guión.
- Elemento
- Otro elemento
- Otro más
Listas ordenadas <ol>
Las listas desordenadas se colocan con el índice numérico seguido de un punto. Y luego el texto que se desee colocar en ese elemento. Aunque los índices la verdad es que es indiferente el número que se ponga, ya que siempre comenzarán en 1 e irán incrementando.
1. Primer elemento
2. Segundo elemento
3. Tercer elemento
Itálicas y negritas
Las itálicas y negritas son elementos en línea, por lo tanto las podemos usar dentro de un párrafo, un elemento de lista o cualquier otro elemento de bloque.
Las negritas se colocan con dos asteriscos de inicio y cierre:
En este párrafo **esta parte va en negrita**.
Las itálicas se usa un único asterisco:
Cuando alguien dice algo *lo puedo poner en en itálica*.
Si quieres colocar itálica y negrita al mismo tiempo, entonces puedes usar tres asteriscos:
En este párrafo ***este texto lo colocaré en en itálica y negrita a la vez***.
Blockquotes o citas
Los párrafos que son citas los podemos poner con la etiqueta <blockquote> que en Markdown se expresa mediante el caracter ">" al principio de la línea.
> Este párrafo será una cita y en HTML se mostrará con la etiqueta <blockquote>.
Introducir bloques de código fuente en Markdown
Markdown tiene un excelente tratamiento para los bloques de código o el código en línea (cuando en un párrafo quieres hacer una apertura y cierrre de código en línea. Lo hacemos con el caracter ` (el acento invertido).
En este párrafo `esta parte sería código` y ya esta no.
Si se trata de un bloque de código que incluya una o varias líneas completas de código, colocamos tres caracteres de acento invertido seguidos de un salto de línea, seguidos de todas las líneas de código que se desee.
```
// Esto sería un código
var x = 1;
```
Enlaces
Los enlaces se generan mediante corchetes y luego paréntesis. Pimero indicas el texto del enlace entre corchetes y luego la URL entre paréntesis.
Esto es un [enlace a desarrolloweb.com](https://www.desarrolloweb.com)
Si es solamente una URL que quieres convertir en un enlace, la puedes colocar enbutida dentro de caracteres menor qué y mayor qué.
<https://www.desarrolloweb.com>
Las imágenes
La sintaxis de las imágenes es un poco extraña. Podemos usar un texto alternativo y la URL de la imagen con el siguiente código.
Markdown en GitHub para documentar repositorios en el README.md
En GitHub indicamos la documentación de los repositorios en archivos llamados README.md. Cada carpeta puede tener un archivo README.md que aportaría documentación a lo que se encuentra dentro de esta carpeta. Por supuesto, el archivo más importante de markdown se coloca en la raíz del repositorio, pero realmente puedes colocar documentación en cualquier parte del proyecto.
Sintaxis alternativa de GitHub
GitHub acepta toda la sintaxis Markdow habitual, sin embargo, es posible encontrar algunas variantes de la sintaxis también aceptadas por GitHub. La mejor opción para encontrar estas variantes sería consultar la página Mastering Markdown que ofrece una referencia completa a todas las mejoras de sintaxis del lenguaje.
La más importante consiste en la posibilidad de marcar el lenguaje sobre el que estás escribiendo el código, para que se produzca un coloreado de sintaxis adecuado.
Para conseguir Syntax highlighting mencionamos el lenguaje con el que está escrito el pedazo de código, en la apertura del bloque. Por ejemplo si se trata de un código PHP se colocaría así.
```php
// Esto sería un código en PHP
$x = 1;
```
Este tipo de marcado de sintaxis también lo soporta DesarrolloWeb.com para la creación de bloques de código tanto en las FAQ como en los temas.
Librería para reconocer Markdown en Javascript
Existen muchas librerías para conseguir la compatibilidad con markdown en Javascript, pero la más conocida es Marked. Es rápida y ligera, bien documentada y con constantes contribuciones y mejoras.
Es una librería usada más comúnmente en NodeJS, aunque también se puede agregar soporte en los navegadores (no tiene soporte para IE pero en el resto funciona bien). En lo que respecta a Node, garantizan soporte a las versiones LTS y a la versión actual.
Crea artículos, recursos o comparte información sobre Markdown
Preguntas y respuestas de Markdown
Se han recibido 0 faqs en Markdown