Sintaxis extendida de Markdown

La sintaxis básica de Markdown te proporciona todos aquellos elementos básicos que necesitarás a la hora de redactar la mayoría de los documentos en tu día a día. Sin embargo, existe también una sintaxis extendida que te permitirá crear elemtos adicionales que no se incluyen en la especificación de la sintaxis básica.

Introducción

Algunos de los elementos que se incluyen con la sitaxis básica son tablas, listas de tareas, pies de página, bloques de código mejorados o resaltado de sintaxis. Estas funcionalidades han sido agregadas tanto por personas individuales como por varias empresas con el objetivo de poder crear documentos más complejos. Por ello, no existe una sola sintaxis extendida, sino varias. Puedes consultar cuáles son los diferentes lenguajes basados en Markdown aquí.

No todas las sintaxis extendidas soportan los mismos elementos. Habitualmente tendrás que buscar la especificación o la sección de ayuda del editor o de la aplicación Markdown que utilices para comprobar cuáles son los elementos de la sintaxis extendida de Markdown que incorporan.

En muchos casos suele ser posible habilitar ciertos elementos mediante extensiones de la aplicaicón o editor que uses, aunque de entrada no estén soportados por el procesador Markdown que utilicen.

Tablas

Para agregar tablas Markdown debes definir las cabeceras de columna mediante al menos tres guiones --- que se situarán por debajo del texto de la cabecera. Para separar las diferentes cabeceras tendrás que usar un símbolo de tubería |:

| Cabecera 1 | Cabecera 2 |
| ---------- | ---------- |
| Elem 1, 1  | Elem 1, 2  |
| Elem 1, 2  | Elem 2, 2  |

La reprensentación HTML equivalente a la tabla del ejemplo anterior será la siguiente:

<table>
  <thead>
    <tr>
      <th>Cabecera 1</th>
      <th>Cabecera 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Elem 1, 1</td>
      <td>Elem 1, 2</td>
    </tr>
    <tr>
      <td>Elem 1, 2</td>
      <td>Elem 2, 2</td>
    </tr>
  </tbody>
</table>

Y la reprensentación final visual sería la siguiente:

Los espacios entre las celdas pueden variar, por lo que no es imprescindible que agregues siempre el mismo número de guiones. La represnetación final será siempre la misma:

| Color | Código|
| --- | ---- |
| Azul | #RRGGBB |
| Verde | #008000 |

Este sería el resultado una vez se renderice la tabla, en donde tal y como ves, es suficiente con agregar tres guiones en la parte inferior de las cabeceras y los símbolos no necesariamente deben estar alineados:

Si el proceso de generación de tablas te resulta tedioso, siempre puedes usar algún generador de tablas como este.

Alineación

Puedes alinear los elementos de una tabla en el centro, a la derecha o a la izquirrda usando dos puntos : en uno de los lados que definen la cabecera de la tabla para alinear su contenido a la izquierda o a la derecha respectivamente. Para alinear el contenido de la tabla en el centro, debes usar un símbolo : a cada lado de los guiones.

La primera columna del siguiente ejemplo tendrá su contenido alineado a la izquierda, la segunda en el centro y al tercera a la derecha:

| Nombre  | Tipo    | Color |
| :---    |  :----: |  ---: |
| Manzana | Fruta   | Rojo  |
| Pera    | Fruta   | Verde |

Esta sería la reprensentación visual final de la tabla:

Formato

En el interior de las tablas podrás agregar varios elementos mediante la sintaxis Markdown, como enlaces, texto en negrita o cursiva o código que puedas incluir en línea. Eso sí, no podrás agregar bloques de código o cualqueir elemento que necesite varias líneas para ser reprensentado.

En el interior de las tablas Markdown no podrás agregar encabezados citas, listas, líneas horizontales, imágenes o etiquetas HTML. En dicho caso tendrías que crear la tabla mediante HTML.

Si necesitas mostrar el carácter tubería | en el interior de la tabla, tendrás que usar su código HTML | en su lugar.

Texto tachado

Para agregar un texto tachado en Markdown tendrás que usar dos guiones ondulados ~~ tanto antes como después del texto que quires tachar. Esto agregará una línea horizontal a través del texto tal y como ves en este ejemplo. El texto tachado suele usarse para indicar que ciertas palabras o elementos son un error:

El siguiente texto ~~estará tachado~~ 

A continuación puedes ver el código Markdown que crea un nuevo párrafo, su equivalencia en HTML y su representación final:

~~texto tachado~~ 

<strike>texto tachado</strike>

Notas al pie

Muchas versiones de la sintaxis extendida de Markdown también permiten agregar notas y referencias sin la necesidad de sobrecargar la sintaxis del cuerpo del documento.

Cuando agregas una nota al pie, se agregará un índice que enlazará con la nota y que se mostrará al final del documento con independencia del lugar en donde la definas. Al hacer clic en el índice, saltarás hasta la nota referenciada, al final del documento.

Para agregar una nota tendrás que añadir entre corchetes un acento circunflejo seguido del nombre del identificador de la nota [^id]. Los identificadores podrán contener números y letras, pero no espacios ni tabulaciones. Tendrás que usar el mismo identificador para relacionar el índice con la nota que se mostrará el pie de página.

Para definir el texto de la nota en sí mismo, tendrás que agregar, de nuevo entre corchetes, un acento circunflejo seguido del nombre del identificador de la nota [^id]. Luego deberás agregar dos puntos y el texto de la nota en sí mismo.

El texto de la nota puede estar difinido en una sola línea o en varias líneas.

Notas de una línea

A continuación agregamos dos notas cuyo texto está definido en una sola línea:

Esta es una referencia [^1].

Y esta es una referencia [^2].

[^1]: Nota de la primera referencia.
[^2]: Nota de la segunda referencia.

No necesitas colocar las notas en el pie de página, sino que puedes redactarlas en cualquier lugar. Luego, se agregarán secuencialmente, según hayan sido definidas, al final del documento.

La representación HTML de la nota anterior será la siguiente:

<p>
    Esta es una referencia <sup id="fnref-1"><a href="#fn-1" class="footnote-ref">1</a></sup>.
</p>
<p>
    Y esta es otra referencia <sup id="fnref-2"><a href="#fn-2" class="footnote-ref">2</a></sup>.
</p>
<div class="footnotes">
    <hr/>
    <ol>
        <li id="fn-1">Nota de la primera referencia.<a href="#fnref-1" class="footnote-backref">↩</a></li>
        <li id="fn-2">Nota de la segunda referencia.<a href="#fnref-2" class="footnote-backref">↩</a></li>
    </ol>
</div>

El resultado de la nota anterior, una vez renderizada, será la siguiente:

Notas multilínea

También podemos definir el texto de las notas en varias líneas. Para ello tendremos que agregar una sangría o indentado de cuatro espacios tras la primera línea de la nota, que no necesitará tener ninguna sangría.

A continuación agregamos dos notas cuyo texto está definido en varias líneas:

Referencia a la nota [^nota].

[^nota]: Esta es una nota multilínea.

  Nuevo párrafo de la nota.

La representación HTML de la nota anterior será la siguiente:

<p>
  Referencia a la nota <sup id="fnref-nota"><a href="#fn-nota" class="footnote-ref">nota</a></sup>.
</p>
<div class="footnotes">
  <hr>
  <ol>
    <li id="fn-nota">
      <p>Esta es una nota multilínea.</p>
      <p>Nuevo párrafo de la nota.<a href="#fnref-nota" class="footnote-backref">↩</a></p>
    </li>
  </ol>
</div>

La representación visual sería la siguiente:

Bloques de código

La sintaxis extendida de Markdown también posibilita la creación de bloques des código sin la necesidad de que tengan los cuatro espacios de sangría o la tabulación. Para ello, dependiendo del procesador de Markdown que utilices, tendrás que iniciar y cerrar el bloque de código con tres tildes invertidas ```.

Bloques estándar

Los bloques de código que se inician y se cierran con tres comillas invertidas son aceptados por la mayor parte de los procesadores de texto y herramientas Markdown. Su funcionalidad se limita a crear un bloque de código sin formato ni resaltado de sintaxis.

En el siguiente ejemplo agregamos un bloque de código:

```
const value = 3;
let result = value * 4;
```

La versión equivalente en HTML de este código sería la siguiente:

<pre>
  <code>
    const value = 3;
    let result = value * 4;
  </code>
</pre>

Y su representación final sería la siguiente:

const value = 3;
let result = value * 4;

En la hipótesis de que necesites agregar varias comillas invertidas consecutivas en un bloque de código, tendrás que iniciar y cerrar el bloque de código con un número de comillas superior al número de comillas consecutivas presentes en el bloque.

Por ejemplo, si quieres incluir tres comillas consecutivas en el bloque, tendrás que iniciarlo y cerrarlo con cuatro comillas ````.

Resaltado de sintaxis

Muchos procesadores Markdown soportan los bloques de código con resaltado de sintaxis para una gran cantidad de lenguajes de programación. Esto coloreará y agregará formato al código según el lenguaje de programación con el que se corresponda.

Para ello tendremos que indicar el lenguaje de programación tras las tres comillas de apertura del bloque de código.

A continuación agregamos un bloque de código JavaScript:

```javascript
const value = 3;
let result = value * 4;
```

La versión equivalente en HTML de este código sería la siguiente, aunque todo dependerá de la extensión usada por el procesador de sintaxis que se utilice:

<pre class="language-javascript">
    <code class="language-javascript">
        <span class="token keyword">const</span> value <span class="token operator">=</span> <span class="token number">3</span><span class="token punctuation">;</span>
        <span class="token keyword">let</span> result <span class="token operator">=</span> value <span class="token operator">*</span> <span class="token number">4</span><span class="token punctuation">;</span>
    </code>
</pre>

Tal y como ves, se agregan etiquetas para cada uno de los elementos de la sitnaxis, ya que es el único modo de poder usar estilos CSS.

La representación visual final sería esta:

const value = 3;
let result = value * 4;

Al igual que ocurre con los bloques de código que no usan resaltado de sintaxis, si incluyes más de dos comillas consecutivas en el interior del bloque, tendrás que abrirlo y cerrarlo con un número superior de comillas a este.

Ids de cabecera

La mayor parte de los procesarores Markdown soportan los identificadores personalizados para los encabezados. Estos identificadores establecerán el valor del atributo id cuando el código Markdown se procese y se convierta en HTML.

Para añadir un identificador personalizado tendrás que agregarlo entre llaves justo después del encabezado, dejando un espacio de por medio. El identificador tendrá que comenzar por un carácter de sostenido # al igual que ocurre en HTML:

## Un encabezado {#id-encabezado}

La versión HTML del encabezado será la siguiente:

<h2 id="id-encabezado">Un encabezado</h2>

Cuando agregas un identificador a la cabecera podrás enlazarla tanto desde el documento Markdown actual como desde otras páginas. Para agregar un enlace a una cabecera basta con crear un enlace normal y agregar el símbolo # seguido del nombre del identificador como enlace:

Para agregar un enlace al encabezado desde otra página, tendrás que indicar la URL como enlace seguida del símbolo # y el nombre del identificador, del mismo modo que en HTML.

[Encabezado](https://dominio.tld/pagina#identificador).

Citas abreviadas

Algunos procesadores Markdown también soportan una sintaxis abreviada para las citas. Podrás agregarlas en línea usando dos comillas dobles tanto al principio como al final de la cita:

Esto es una ""cita""

La representación HTML de la cita abreviada anterior sería la siguiente:

	
<p>Esto es una <cite>cita</cite></p>

Y la representación final en pantalla de la cita sería esta:

Listas de definiciones

Muchos procesadores Markdown también aceptan listas de definiciones, que se componen de una serie de términos y sus correspondientes definiciones.

Para crera una lista de definiciones tendrás que agregar un término en la primera línea y, en la línea siguiente, dos puntos : seguidos de un espacio y la definición asociada al término.

También puedes agregar más de una definición para un mismo término. Para ello basta con que agregues definiciones adicionales en sucesivas líneas:

Término 1
: Esta es la definición del término 1

Término 2
: Esta es la primera definición del término 2
: Esta es la segunda definición del término 2

La representación HTML de la lista definiciones anterior sería la siguiente:

<dl>
  <dt>Término 1</dt>
  <dd>Esta es la definición del término 1</dd>
  <dt>Término 2</dt>
  <dd>Esta es la primera definición del término 2</dd>
  <dd>Esta es la segunda definición del término 2</dd>
</dl>

La representación final en pantalla de la lista de definiciones anterior será la siguiente:

Listas de tareas

También podrás crear listas de tareas con algunos editores Markdown, aunque no es algo que esté soportado por todos los procesadores Markdown.

Las listas de tareas se componen de checkboxes que se mostrarán al lado del contenido. Para crear una tarea en una lista de tareas tendrás que agregar un guión - seguido de un espacio en blanco y dos corchetes, siendo uno de apertura y otro de cierre. En el interior de los corchetes podrás agregar:

• Espacio en blanco: Agrega un espacio en blanco para indicar que la tarea no ha sido completada.
• Equis x: Agrega una x para indicar que la tarea ha sido completada.

A continuación de los corchetes tendrás que dejar un espacio en blanco, agregando seguidamente la descripción de la tarea:

- [x] Primera tarea
- [ ] Segunda tarea
- [ ] Tercera tarea

La representación HTML den código Markdown anterior será la siguiente:

<ul class="contains-task-list">
  <li class="task-list-item"><input type="checkbox" disabled="" checked="checked"> Primera tarea</li>
  <li class="task-list-item"><input type="checkbox" disabled=""> Segunda tarea</li>
  <li class="task-list-item"><input type="checkbox" disabled=""> Tercera tarea</li>
</ul>

Una posible representación visual en pantalla de la lista de tareas sería la siguiente:

Emojis

Muchas de las sintaxis extendidas de Markdown también soportan el uso de emojis. Podrás agregar emojis de dos formas, bien sea copiándolos y pegándolos o mediante shortcodes en caso de estar soportados por la versión de Markdown que uses.

Copiar y pegar emojis

En la mayor parte de los casos podrás copiar los emojis desde fuentes como la emojipedia o esta lista y luego pegarlos en el editor o la aplicación Markdown que utilices. Una vez pegues cualquier emoji, deberías poder verlo directamente en el editor.

Cuando exportes el documento Markdown a HTML o a PDF, los emojis también se deberían exportar junto con el texto, ya que están soportados por la mayoría de los procesadores Markdown.

Shortcodes de emojis

Otro posible modo mediante el cual podrás agregar emojis consiste en usar shortcodes, soportados por la mayor parte de los procesadores Markdown. Los shortcodes incluyen el nombre del emoji y comienzan y terminan por dos puntos :nombre-emoji:. En el siguiente ejemplo agregamos un emoji mediante su shortcode:

Me encanta tu sonrisa :smile:, pero eres más lento que una tortuga :turtle:.

La representación final de los emojis anteriores sería la siguiente:

Los shortcodes de emojis están soportados por algunos de los editores Markdown más utilizados, pero no por todos. Consulta la documentación del editor que uses para comprobar si están soportados. Para ver la lista completa de emojis consulta la lista de emojis para Markdown.

Enlaces automáticos

Muchos procesadores Markdown convertirán automáticamente en enlaces las URLs* que encuentren en el texto. Si por ejemplo escribes la URL https://www.neoguias.com, el procesador Markdown usará dicho texto como texto del enlace o anchor y agregará un enlace a la URL especificada, siendo equivalente a agregar este enlace:

[https://www.neoguias.com](https://www.neoguias.com)

La representación HTML del enlace será la siguiente:

<a href="https://www.neoguias.com">https://www.neoguias.com</a>

Y la representación visual en pantalla del enlace será esta:

Si no quieres que se muestre un enlace automático, puedes eliminarlo si muestras la URL encapsualda como código:

`https://www.neoguias.com`

De modo que la verisón equivalente HTML y la representación final sería la siguiente:

https://dom.com

<a href="https://dom.com">https://dom.com</a>

`https://dom.com`

<code>https://dom.com</code>

Y esto ha sido todo.