Saltar a contenido

Usando HTML y markdown

Ya hemos visto que en bloques delimitado por etiquetas HTML no tiene efecto el formato markdown, y tenemos que usar otras etiquetas manualmente. También tenemos que usarlas para aplicar estilos a un elemento.

La extensiones incorporadas permiten superar estos inconvenientes.

Markdown en bloques HTML

Veamos lo que pasa cuando delimitamos bloques mediante etiquetas HTML:

Párrafo 1 con **texto en negrita**.

<div>
Párrafo 2 con **texto en negrita**.

Párrafo 3.
</div>

Las etiquetas <div> permiten indicar bloques formados por uno o varios párrafos u otros elementos. Lo anterior muestra:

Párrafo 1 con texto en negrita.

Párrafo 2 con **texto en negrita**. Párrafo 3.

Al delimitar parte del texto entre etiquetas <div> se desactiva el efecto de la sintaxis markdown. En el ejemplo, no se identifica el texto en negrita ni la separación de párrafos.

Para lograr el efecto deseado, en este ejemplo tenemos que añadir manualmente etiquetas <b> y <p> en el interior del bloque:

Párrafo 1 con **texto en negrita**.

<div>
<p>Párrafo 2 con <b>texto en negrita.</b></p>

<p>Párrafo 3.</p>
</div>

La extensión Markdown in HTML permite que se tenga en cuenta la sintaxis markdown dentro de un bloque HTML. Tenemos que activarla en el archivo mkdocs.yml:

markdown_extensions:
  - md_in_html

Con esta extensión activada, en la etiqueta de apertura del bloque HTML tenemos que añadir un atributo markdown:

Párrafo 1 con **texto en negrita**.

<div markdown="1">
Párrafo 2 con **texto en negrita**.

Párrafo 3.
</div>

Los posibles valores de este atributo son "1", "block", o "span". Si el atributo toma el valor "1", el comportamiento dependerá de la etiqueta. Los otros dos valores se utilizan para forzar un comportamiento diferente del establecido por defecto.

Atributos

Ya hemos visto que, en formato HTML, los atributos de un elemento se definen en la etiqueta de apertura del elemento:

<p  atributo1="valor1"  atributo2="valor2" > 
Texto del párrafo  
</p>

En formato markdown, en principio no tenemos la posibilidad de establecer los atributos de un elemento. Pero la extensión attr_list nos la proporciona. Tenemos que activarla en el archivo mdocs.yml

markdown_extensions:
    - attr_list

Una vez hecho esto, para aplicar atributos a un párrafo, debemos añadir una línea delimitada entre {: y }:

Texto de un párrafo
formado por varias líneas
que se unen en una sola
{: atributo1="valor1"  atributo2="valor2" }

Por ejemplo:

Este es un párrafo en color rojo.
{: style="color:red;" }

Los atributos id y class tienen una sintaxis especial:

  • el atributo ID se escribe en formato #nombre
  • el atributo de clase en formato .nombre
  • cualquier otro atributo en formato clave="valor"

Por ejemplo:

Texto del párrafo
{:  #parraforojo  .rojo  style="color:red;"  }

Los párrafos de cabecera tienen una consideración especial en markdown. No pueden ser multilínea. Por este motivo, la lista de atributos de una cabecera se coloca al final de la línea:

Cabecera estilo setext {: atributos }
==================================

### Cabecera estilo atx ### {: atributos }

También podemos definir atributos para un fragmento dentro del texto de un párrafo; por ejemplo, un enlace. Debemos colocar la lista inmediatamente a continuación del elemento, sin dejar espacios en blanco:

Véase [enlace](http://ejemplo.com){: class="enlace" title="Título del enlace" } para más información.

Saltos de línea

La extensión nl2br hará que los saltos de línea de un documento markdown sean respetados, insertando etiquetas <br> al final de cada línea del texto html generado.

Se activa con:

markdown_extensions:
    - nl2br