Añadir resaltado de sintaxis en Gutenberg

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn

Aún nos estamos acostumbrado a Gutenberg, en nuevo modo de crear contenido para WordPress usando bloques. Ha llegado para quedarse y lo mejor que podemos hacer es acostumbrarnos a él. En este blog escribimos muchos fragmentos de código y usábamos antes un plugin para resaltar la sintaxis el cual actualmente ha quedado obsoleto y no funciona como debiera en Gutenberg. Es más, la única forma de hacerlo funcionar sería activando el editor antiguo, cosa que vamos a evitar. Entonces, ¿cómo podemos añadir resaltado de sintaxis en Gutenberg? Pues con otro plugin.

Entre los distintos plugins disponibles que pueden realizar esta tarea, he optado por el siguiente:

Que incluye varios tipos de bloques, como noticias, display, post, tabla de contenido, unsplash… y además uno que se llama “code”

Code de Advanced Gutenberg Blocks

Funciona realmente bien y se pueden elegir distintos estilos:

En el siguiente enlace tenéis una demo de los distintos temas disponibles:

https://codemirror.net/demo/theme.html

Para insertar el bloque con vuestro código solo hay que seleccionar el mismo y elegir el lenguaje:

Bloque Code

Así se vería un código HTML:

HTML
prueba/bloque/html

En este post, puedes ver un ejemplo de cómo queda:

Estas son las opciones disponibles para el bloque, Lenguaje de programación, título del bloque o del archivo, auto envolver filas largas, mostrar los números de línea, inicio de línea, resaltado entre dos líneas.

Opciones bloque Code

Es un bloque muy fácil de utilizar y que mejorará el aspecto de vuestras entradas.

Desde el menú del plugin podemos gestionar los bloques del mismo (como el bloque code aquí mostrado), desactivar bloques de WordPress y editar opciones del plugin:

En Manage Blocks podemos activar/desactivar los distintos bloques que proporciona el plugin así como editar las opciones si el bloque las permite:

Manage Blocks
Ejemplo del bloque Unsplash

También podemos desactivar bloques de WordPress en el apartado Disable WP Blocks

Disable WP Blocks

En Tweak Editor disponemos de algunas opciones para editar, por si nuestro tema no muestra correctamente los bloques:

Tweak Editor

Es un plugin con muchas opciones y que muestra la potencia que puede llegar a alcanzar WordPress con Gutenberg.

Espero que os sirva.

Más...

Cómo añadir un plugin a WordPress

Paso a paso te enseñamos a añadir un plugin a Wordpress de la manera más sencilla posible. Toma nota de las indicaciones y crea nuevos plugins para WordPress.

Deja un comentario