Sintaxis extendida de Markdown

Aprende a usar la 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 mimsos 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:

Cabecera 1Cabecera 2
Elem 1, 1Elem 1, 2
Elem 1, 2Elem 2, 2

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:

ColorCódigo
Azul#RRGGBB
Verde#008000

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:

NombreTipoColor
ManzanaFrutaRojo
PeraFrutaVerde

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 &#124; 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:

MarkdownHTMLResultado
~~texto tachado~~ 
<strike>texto tachado</strike>
texto tachado

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:

Esta es una referencia 1.

Y esta es otra referencia 2.


  1. Nota de la primera referencia.‚Ü©
  2. Nota de la segunda referencia.‚Ü©

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:

Referencia a la nota nota.


  1. Esta es una nota multilínea.

    Nuevo p√°rrafo de la nota.

    M√°s p√°rrafos‚Ü©

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:

MarkdownHTMLResultado
[Encabezado](#identificador)<a href="#identificador">Encabezado</a>Encabezado

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:

Esto es una cita

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:

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

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:

  • Primera tarea
  • Segunda tarea
  • Tercera tarea

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:

Me encanta tu sonrisa ūüėĄ, pero eres m√°s lento que una tortuta ūüźĘ.

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:

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

Y esto ha sido todo.