Sintaxis extendida

Introducción

La sintaxis original de Markdown, publicada por John Gruber, agregó varios elementos esenciales para editar documentos, pero algunos usuarios no quedaron satisfechos.

La sintaxis extendida intenta resolver esta insatisfacción agregando nuevos elementos a través de nuevas marcas.

Tablas, bloques de código, generación automática de links e incluso notas al pie son ejemplos de cómo extender la sintaxis básica de Markdown.

Estos elementos se pueden activar instalando un plugin para su procesador Markdown o incluso usando una pequeña variación de la sintaxis del lenguaje.

NOTA: es muy posible que su aplicación Markdown ya tenga soporte para los elementos presentados en este artículo, por lo que vale la pena probar cada uno de ellos mientras sigue el tutorial.

Sabores de Markdown

Markdown tiene algunos sabores diferentes, es decir, variaciones de la sintaxis básica del lenguaje.

Estas variaciones, además de admitir la sintaxis básica, agregan elementos que enriquecen la edición de documentos.

Las aplicaciones compatibles con Markdown suelen utilizar uno de los idiomas que se muestran a continuación:

CommonMark

GitHub-flavored Markdown (GFM)

Markdown Extra

R Markdown

MultiMarkdown

Creando tablas en Markdown

Se puede utilizar una tabla en Markdown para presentar comparaciones de datos por parte del usuario.

Para crear una tabla en Markdown usamos guiones - y barras verticales | para separar filas y columnas.

La primera línea de la tabla es donde construimos el encabezado, separando esa línea por tres o más guiones --- para que el procesador Markdown entienda el formato.

La separación de las columnas se realiza mediante la barra vertical |, también llamada pipe por los programadores.

A continuación se muestra una tabla de ejemplo:

| Título  | Título   |
| ------- | -------- |
| Texto   | Texto    |
| Texto   | Texto    |

Las barras verticales | utilizados en los extremos de la tabla son para fines puramente cosméticos, es decir, puede crear una tabla sin las barras laterales.

Ejemplo:

Título  | Título
------- | --------
Texto   | Texto
Texto   | Texto

La salida presentada en HTML:

El ancho de las celdas, dentro de una tabla Markdown, puede variar.

Ejemplo:

| Título | Título |
| --- | ----------- |
| Texto | Texto |
| Texto     | Texto |

Generando tablas en Markdown automáticamente

Markdown vino para facilitar la edición de documentos y crear tablas puede volverse un poco más tedioso.

El uso de barras verticales y guiones puede disgustar a algunos usuarios, por lo que es interesante que podamos automatizar el proceso de formateo de tablas en Markdown.

Paso 1 - Abra nuestro editor Markdown haciendo clic aquí.

Paso 2: haga clic en el icono de generación automática de tablas para abrir el panel de opciones.

Paso 3 - En el panel de opciones:

1. Ingrese el número de filas en la tabla.
2. Establezca el número de columnas en la tabla.
3. Elija la posición de alineación del texto dentro de las columnas.
4. Haga clic para confirmar y generar la estructura de la tabla.

Paso 4 - Complete los valores para cada celda.

Alineación

Markdown le permite alinear el contenido de una columna de la tabla a la izquierda, a la derecha o al centro.

Para alinear el contenido a la izquierda en una tabla Markdown, coloque dos puntos : antes de los guiones --- que separan la línea del encabezado.

Ejemplo:

| Fruta  | Verduras | Verduras |
| :---    | :----    | :---    |
| Anacardo    | Berro   | Zanahoria |
| Manzana    | Brócoli | Guisante |

Resultado en HTML:

NOTA: Usar los dos puntos para alinear el texto a la izquierda es opcional, ya que el contenido de la tabla ya está alineado en esa posición por defecto.

Para alinear el texto a la derecha dentro de la tabla Markdown, inserte los dos puntos : después de los guiones --- que separan la línea del encabezado.

Ejemplo:

| Fruta  | Verduras | Verduras |
|    ---: |    ----: |    ---: |
| Anacardo    | Berro   | Zanahoria |
| Manzana    | Brócoli | Guisante |

Resultado en HTML:

Para alinear el contenido de la columna con el centro en una tabla Markdown, agregue dos puntos : antes y después de los guiones que separan la línea del encabezado.

Ejemplo:

| Fruta  | Verduras | Verduras |
|  :---:  |  :----:  |  :---:  |
| Anacardo    | Berro   | Zanahoria |
| Manzana    | Brócoli | Guisante |

Resultado en HTML:

Es posible fusionar el formato de alineación, ya que esto solo influye en el contenido dentro de la columna.

Ejemplo:

| Fruta  | Verduras | Verduras |
| :---    |  :----:  |    ---: |
| Anacardo    | Berro   | Zanahoria |
| Manzana    | Brócoli | Guisante |

Resultado en HTML:

Cabe señalar que la alineación de los guiones --- de la línea que separa los títulos de la tabla es irrelevante para el procesador Markdown, lo que realmente se tendrá en cuenta es la posición de los dos puntos :.

En el siguiente ejemplo, los guiones --- se colocan a la izquierda de la columna y la alineación funciona uniformemente.

| Fruta  | Verduras | Verduras |
| :---    | :----:   | ---:    |
| Anacardo    | Berro   | Zanahoria |
| Manzana    | Brócoli | Guisante |

Resultado en HTML:

NOTA: El contenido del encabezado de la tabla también se alineará de acuerdo con la posición de los dos puntos.

Dar formato al texto en tablas

Puede insertar algunos elementos básicos de Markdown dentro de una tabla.

Algunos formatos permitidos son, crear links, enfatizar el contenido en negrita o cursiva y resaltar el texto como código, sin embargo solo se acepta el código en línea, es decir, cuando se crea con la apertura y cierre de comillas traseras `.

Los títulos, bloques de código, blockquotes, listas, líneas horizontales, imágenes y tags HTML no funcionan.

NOTA: Incluso puedes encontrar aplicaciones que aceptan la inserción de los elementos mencionados anteriormente dentro de una tabla, pero esto perjudicará la portabilidad de tu documento, ya que otros programas no lo soportan.

Escapar de barras verticales en tablas

Ya aprendiste que, para separar las columnas de la tabla usamos la barra vertical |.

Ahora, si desea mostrar ese mismo carácter como contenido dentro de una celda, debe usar la codificación HTML: |.

Bloque de código cercado

Un bloque de código rodeado permite crear representaciones de código sin tener que sangrar la línea en cuatro espacios o una pestaña, además, también te permite definir qué lenguaje de programación representa el bloque, con esto, es posible aplicar la sintaxis adecuada destacando.

Para crear un bloque de código delimitado en Markdown, coloque tres comillas sencillas ```antes del contenido y tres comillas sencillas ``` después del contenido.

Ejemplo:

```
{
  "nombre": "Robert",
  "apellido": "Salles",
  "edad": 25
}
```

La salida renderizada se ve así:

{
  "nombre": "Robert",
  "apellido": "Salles",
  "edad": 25
}

NOTA: Algunos procesadores Markdown le permiten usar mosaicos ~~~ en lugar de comillas para formar el bloque de código.

Consulte también: Cómo escapar de la comilla sencilla dentro de un bloque de código.

Resaltado de sintaxis

Muchas bibliotecas JavaScript se utilizan para resaltar bloques de código, como: Prism.js & highlight.js.

Toman un tag HTML específico, generalmente tag pre o tag código y aplican el resaltado basado en la sintaxis del lenguaje de programación del bloque de código.

La sintaxis del lenguaje generalmente se define mediante el parámetro class de tag, por ejemplo:

<code class="lang-markdown"></code>

Usando la clase lang-markdown, el framework sabrá que el contenido entre el tags código debe resaltarse de acuerdo con el lenguaje Markdown.

NOTA: La aplicación del resaltado se puede realizar incluso de forma automática, algunas herramientas tienen la capacidad de detectar lenguajes de programación de forma automatizada, sin necesidad de definirlo en el parámetro class.

Al construir el bloque de código usando Markdown, puede especificar el lenguaje de programación justo después de las primeras tres comillas traseras ``` de apertura.

Ejemplo:

```json
{
  "Nombre": "Robert",
  "apellido": "Salles",
  "edad": 25
}
```

Como en la primera línea del bloque, justo después de las tres etapas iniciales, se especificó json, el código se resaltará en consecuencia:

{
  "Nombre": "Robert",
  "apellido": "Salles",
  "edad": 25
}

NOTA: el código solo se resaltará si usa una biblioteca JavaScript que realiza este tipo de tarea, HTML en sí no resalta el código.

Notas al pie

Una nota al pie de página sobre Markdown permite al usuario crear una referencia a algún concepto mencionado en el documento.

Por lo general, estas notas al pie se colocan al final del documento, pero en Markdown puede definirlas en cualquier parte del texto.

Al crear una nota al pie, se insertará un número en superíndice en forma de link en el lugar donde lo creó, cuando el usuario haga clic en ese link será llevado directamente al lugar que contiene la referencia de la nota.

La sintaxis para crear la nota al pie se divide en dos partes.

La primera parte representa el número que contiene el link y se crea utilizando corchetes, un signo de intercalación y un identificador, por ejemplo: [^1].

El identificador puede contener números y letras, pero no acepta espacios ni tabulaciones.

La segunda parte cubre el contenido de la referencia en sí, para crearla use corchetes, un signo de intercalación seguido del mismo identificador (que creó anteriormente), dos puntos, un espacio en blanco y el texto, ejemplo: [^1]: Mi nota al pie.

Aquí hay una simple nota al pie[^1]. Aquí hay una nota a pie de página más elaborada[^bignote].

[^1]: Esta es la primera nota a pie de página.

[^bignote]: Aquí hay uno con varios párrafos y código.

    Sangra los párrafos para incluirlos en la nota al pie.

    `{ mi código }`

    Agrega tantos párrafos como quieras.

El renderizado en buen deshacer se ve así:

Aquí hay una simple nota al pie¹. Aquí hay una nota a pie de página más elaborada².

NOTA: El contenido del pie de página se puede colocar en cualquier lugar del documento excepto dentro de otros elementos Markdown como tablas, listas y bloques de código.

NOTA: Las notas al pie de página siempre se numerarán secuencialmente, independientemente de los identificadores que haya creado, una secuencia de notas [^ 35], [^ yyyy] y [^ 102_444], se representará como 1, 2 y 3.

Agregar ID o Class a los elementos Markdown

Al crear tags en HTML, podemos asignarles una identificación única y una identificación genérica a través de los parámetros id y class.

Ejemplo:

<h2 id="special-title"></h2> & <p class="bg-blue"></p>

Con id podemos obtener una referencia específica para un elemento en particular, normalmente el id del elemento es único dentro del marcado HTML.

El parámetro class es genérico y se puede asignar a varios elementos.

La función de id o class es permitirle reconocer fácilmente estos elementos a través de JavaScript o CSS, usando este id o este class podemos manejar propiedades como color, tamaño, ubicación, etc.

Para agregar un id o un class a un elemento Markdown, abra las llaves { justo después del contenido del elemento, coloque un signo de almohadilla # para indicar un id o un . para indicar un class, luego el propio identificador y, finalmente, cerrar las llaves }.

Ejemplos:

### Mi título {#identifier}

Mi párrafo{.my-class}

El HTML se ve así:

<h3 id="identifier">Mi título</h3>

<p class="my-class">Mi párrafo</p>

NOTA: Tenga en cuenta que no todas las aplicaciones Markdown admiten la inserción de los parámetros id o class, siempre es importante consultar la documentación del programa.

Links para ids en Markdown

Con la misma sintaxis estándar para crear links [](), podemos vincular una referencia directa a un id en el documento mismo.

Dentro del paréntesis donde colocamos el URL, inserte el id del elemento precedido por el signo de almohadilla #.

Si el id está en otro documento, el formato es similar, sin embargo, antes de la identificación, coloque la página URL.

Ejemplo:

[ID de título](https://es.markdown.net.br/sintaxis-extendida/#markdown-title-id)

Lista de definiciones

Una lista de definiciones en HTML está representada por tags dl y dt. Esta lista representa términos y sus explicaciones de manera conceptual.

Para crear una lista de definiciones con Markdown, escriba el término en una línea, presione la tecla Enter, dos puntos, un espacio en blanco y la definición del término.

Ejemplo:

Primer periodo
: Esta es la definición del primer término.

Segundo período
: Esta es una definición del segundo término.
: Esta es otra definición del segundo término.

El HTML se ve así:

<dl>
  <dt>Primer periodo</dt>
  <dd>Esta es la definición del primer término.</dd>
  <dt>Segundo período</dt>
  <dd>Esta es una definición del segundo término. </dd>
  <dd>Esta es otra definición del segundo término.</dd>
</dl>

Es el resultado:

Primer periodo

Esta es la definición del primer término.

Segundo período

Esta es una definición del segundo término.

Esta es otra definición del segundo término.

Tachado en Markdown

El tachado se usa para corregir un error comparativamente, generalmente seguido de una corrección en la misma línea.

Tachado no es más que un formato que inserta una línea horizontal en el medio de un contenido.

Para marcar contenido en Markdown use dos mosaicos ~~ antes y después del texto a formatear.

Markdown es: ~~difícil~~ fácil de aprender.

Y el resultado es este:

Markdown es: difícil fácil de aprender.

Listas de tareas en Markdown

Una lista de tareas en Markdown permite al usuario crear una secuencia de elementos con casillas de verificación a su izquierda usando corchetes [].

Como estamos trabajando con una lista, es necesario comenzar la línea del artículo con un guión -.

Para marcar una tarea como completada, coloque una x dentro de los corchetes [x].

- [x] Lorem ipsum dolor sit amet
- [ ] Lorem consectetur adipisicing elit
- [ ] Lorem ut labore et dfolore

La salida renderizada se ve así:

Insertar Emojis en el documento Markdown

Sí, puede insertar el famoso emoticons directamente en el formato Markdown de su documento.

Hay dos formas más utilizadas para la tarea, copiar y pegar el emoji en el contenido o ingresar códigos emoji.

Entenderemos mejor cómo funcionan los dos procedimientos, pero primero, haga clic aquí para abrir nuestro editor Markdown y probar el emoji en tiempo real.

Copiar y pegar emoji en Markdown

Paso 1 - Abra esta página de Emojipedia que contiene un emoticon sonriente y haga clic en el botón Copy.

Paso 2 - Vuelve a nuestro editor Markdown, haz clic en el panel izquierdo y presiona CTRL + V para pegar.

NOTA: Puede explorar Emojipedia para encontrar su emoji favorito, el procedimiento de copiar y pegar es el mismo para todos ellos.

Si su aplicación Markdown es compatible, verá la representación de emoticon directamente en el texto.

Al convertir el documento Markdown a HTML o incluso PDF, los emojis todavía se representan correctamente.

NOTA: Si el documento HTML no muestra los emojis como debería, codifique las páginas en UTF-8.

Usar códigos de acceso de Emoji

Un código emoji se forma identificando el emoticon rodeado por dos puntos.

¡Fui de campamento! :tent: Vuelvo dentro de poco.

¡Esto es tan divertido! :joy:

La salida renderizada se ve así:

¡Fui de campamento! ⛺ Vuelvo dentro de poco.

¡Esto es tan divertido! 😂

Descubriendo el código de acceso de Emojis

Si no conoce el código de acceso de emoji, utilice nuestro editor Markdown para averiguarlo.

Paso 1 - Haga clic aquí para abrir Markeditor.

Paso 2 - Haga clic en el botón para insertar emoji en la barra de herramientas.

Paso 3 - En la ventana de selección de Emoji:

1. Elija la fuente de la que desea obtener los emojis.
2. Haga clic en el emoji que se insertará en el documento (puede hacer clic en varios emojis en la misma ventana).
3. Presione el botón confirmar para colocar el código de acceso a las imágenes en el texto.

En el panel de la izquierda puede ver los códigos del emoji y en el panel de la derecha el renderizado.

NOTA: Las imágenes de emoticons pueden variar ampliamente de una aplicación a otra, en esta lista encontrará los emojis compatibles con el Markdown usado por GitHub, puede probarlos en su aplicación para ver si son compatibles.

Link automático de URL en Markdown

Algunos procesadores Markdown convierten URL en links cuando encuentran una dirección entre los signos menor que < y mayor que >.

Ejemplo:

<https://es.markdown.net.br>

En otras ocasiones, no es necesario incrustar la dirección entre <>, es decir, simplemente inserta la URL en el propio documento y la aplicación lo convertirá automáticamente.

Ejemplo:

https://es.markdown.net.br

La salida renderizada se ve así:

https://es.markdown.net.br

Deshabilitar el enlace de URL automático

Si solo desea representar un URL en un documento y evitar que la aplicación lo convierta automáticamente a link, incluya la dirección entre comillas sencillas ``.

`https://es.markdown.net.br`

La salida renderizada se ve así:

https://es.markdown.net.br

NOTA: Vale la pena recordar que el uso de comillas sencillas para envolver el contenido lo transforma en código.