Más opciones de resalte¶

Mark¶

La extensión mark permite marcar fragmentos de texto. Deben delimitarse entre dos signos == y otros dos de cierre:

Texto normal, ==y este otro marcado==.

Muestra:

Texto normal, y este otro marcado.

Se activa en mkdocs.yml con:

markdown_extensions:
    - pymdownx.mark

Tilde¶

La extensión tilde proporciona la posibilidad de ~~mostrar texto rayado~~. Debemos delimitarlo con dos símbolos ~ a cada lado:

~~texto suprimido~~

Se activa en mkdocs.yml con:

markdown_extensions:
    - pymdownx.tilde

Caret¶

La extensión Caret permite subrayar texto, delimitándolo entre dos parejas ^^:

^^Texto subrayado^^

Muestra:

Texto subrayado

Activarla en mkdocs.yml:

markdown_extensions:
  - pymdownx.caret

Superíndices y subíndices¶

Las extensiones Caret y Tilde también permiten crear superíndices y subíndices. Los superíndices se marcan delimitándolos entre caracteres ^ sencillos:

a = b^2^

Muestra:

a = b²

Los subíndices se delimitan entre caracteres ~:

CH~3~CH~2~OH

Muestra:

CH₃CH₂OH

Critic¶

La extensión Critic utiliza un marcado especial para mostrar los cambios que se han hecho en el texto, lo eliminado, lo insertado y las sustituciones, permitiendo además añadir comentarios.

Para indicar un texto añadido, debemos delimitarlo entre {++ y ++}. Para indicar un texto suprinmido, usar {-- y --} en su lugar. Por ejemplo:

Se mostrará {--el texto que se ha eliminado--}{++el texto nuevo++}.

Muestra:

Se mostrará ~~el texto que se ha eliminado~~el texto nuevo.

Activamos esta extensión en mkdocs.yml:

markdown_extensions:
  - pymdownx.critic

La opción mode indica como se visualizará el texto final:

markdown_extensions:
  - pymdownx.critic:
      mode: view

Por defecto, el valor es view, lo que visualiza ambos textos , marcando con colores el texto antiguo tachado, y el nuevo subrayado.

El modo accept muestra el texto nuevo, mientras que el modo reject muestra la versión antigua.

Cuando se trata de indicar una sustitución, podemos delimitar todo el conjunto entre ~~ y escribir el texto eliminado seguido del nuevo, separados por ~>:

Se mostrará {~~el texto que se ha eliminado~>el texto nuevo~~}.

También podemos resaltar texto específico con {==texto a marcar==}. O incluso añadir un comentario con {>>texto del comentario<<}. O por ejemplo, para insertar un bloque de comentarios:

{>>
texto línea 1
texto línea 2
texto línea 3
<<}

Keys¶

La extensión Keys permite mostrar teclas de forma gráfica:

Pulsar Ctrl+Alt+Del para reiniciar...

Esto se consigue escribiendo:

Pulsar ++ctrl+alt+del++ para continuar...

y activando la extensión en mkdocs.yml:

markdown_extensions:
    - pymdownx.keys

Las teclas se delimitan entre parejas de símbolos ++. Los nombres de las teclas han de ser los que figuran en la documentación de la extensión keys. Algunos ejemplos:

Markdown	Muestra
`++space++`	`Space`
`++backslash++`	`\`
`++brace-left++`	`{`
`++colon++`	`:`
`++comma++`	`,`
`++double-quote++`	`"`
`++equal++`	`=`
`++arrow-up++`	`Up`
`++arrow-down++`	`Down`
`++arrow-left++`	`Left`
`++arrow-right++`	`Right`

Las combinaciones de teclas se escriben separándolas con un único símbolo +:

++tecla1+tecla2+tecla3++

Botones¶

No todos los añadidos que proporciona Material for MkDocs se logran a base de extensiones. A veces, basta con definir que un elemento pertenece a una clase, y las hojas de estilo incorporadas proporcionarán unas propiedades de aspecto a todos los elementos de esa clase. Un ejemplo son los botones.

Supongamos, por ejemplo, un enlace:

[Wikipedia](https://es.wikipedia.org/)

Activamos la extensión attr_list:

markdown_extensions:
  - attr_list

y definimos el enlace como perteneciente a la clase md-button:

[Wikipedia](https://es.wikipedia.org/){ .md-button }

con lo que obtenemos un enlace con un aspecto de botón sobre el que pulsar:

Wikipedia

Los colores utilizados serán los mismos que usamos para cualquier enlace. Más adelante veremos como configurar los colores que se usan en el tema Material for MkDocs.

Para mostrar un botón con relleno de color, añadir la clase .md-button--primary:

[Wikipedia](https://es.wikipedia.org/){ .md-button .md-button--primary}

con lo que obtenemos:

Wikipedia

Botones con iconos¶

Supongamos que queremos añadir un icono:

Wikipedia

Lo primero es activar la extensión Emoji en mkdocs.yml:

markdown_extensions:
  - pymdownx.emoji
        emoji_index: !!python/name:material.extensions.emoji.twemoji 
        emoji_generator: !!python/name:material.extensions.emoji.to_svg

Y en lugar de:

[Wikipedia](){ .md-button}

Añadamos el icono:

[:books: Wikipedia](){ .md-button}

Para que no quede "pegado al texto" le aplicamos el atributo de estilo padding-right, que añade un espaciado a la derecha del icono:

:books:{style="padding-right:30px"}

Con lo que el texto de enlace será:

[ :books:{style="padding-right:30px"} ]

Para que el icono se vea algo más gande, le asignamos la clase lg, que forma parte de la hoja de estilos de Material for MkDocs. El texto markdown completo para el enlace es:

[:books:{.lg style="padding-right:30px"} Wikipedia](https://es.wikipedia.org){ .md-button}

Smart symbols¶

La extensión SmartSymbols convierte determinadas secuencias de texto en caracteres especiales. Por ejemplo:

Markdown	Resultado
(tm)	™
(c)	©
(r)	®
c/o	℅
+/-	±
-->	→
<--	←
<-->	↔
=/=	≠
1/4, etc.	¼, etc.
1st 2nd etc.	1st 2nd etc.

Se activa con:

markdown_extensions:
    - pymdownx.smartsymbols