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:

https://garberinformatica.com/blog/2019/01/02/woocommerce-y-bootstrap/

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...

Nueva web Laboratorios Valquer

En colaboración con Amvos, hemos realizado la nueva web de laboratorios Valquer. Es una empresa fundada en 1975, con presencia en más

Nueva web credithousecar.com

Ha sido un placer realizar todo el diseño y la imagen corporativa de credithousecar.com Una web moderna y actual, con un diseño

Más...

Nueva web Laboratorios Valquer

En colaboración con Amvos, hemos realizado la nueva web de laboratorios Valquer. Es una empresa fundada en 1975, con presencia en más

Nueva web credithousecar.com

Ha sido un placer realizar todo el diseño y la imagen corporativa de credithousecar.com Una web moderna y actual, con un diseño

Deja un comentario

Ebook Gratis 7 claves para atraer clientes a tu web