Añadir resaltado de sintaxis en Gutenberg

Share on facebook
Share on linkedin
Share on twitter
Share on email

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”

Selección 021 Añadir resaltado de sintaxis en Gutenberg
Code de Advanced Gutenberg Blocks

Funciona realmente bien y se pueden elegir distintos estilos:

Selección 022 Añadir resaltado de sintaxis en Gutenberg

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:

Selección 023 Añadir resaltado de sintaxis en Gutenberg
Bloque Code

Así se vería un código 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.

Selección 024 Añadir resaltado de sintaxis en Gutenberg
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:

Selección 026 Añadir resaltado de sintaxis en Gutenberg

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

image Añadir resaltado de sintaxis en Gutenberg
Manage Blocks
Selección 028 Añadir resaltado de sintaxis en Gutenberg
Ejemplo del bloque Unsplash

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

Selección 029 Añadir resaltado de sintaxis en Gutenberg
Disable WP Blocks

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

Selección 025 Añadir resaltado de sintaxis en Gutenberg
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.

Si te ha servido, deja un comentario

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Más entradas
Blog

¿Qué es AJAX?

Jesse James Garret es probablemente la primera persona en usar el término AJAX en su artículo llamado “AJAX: A New Approach to Web Applications” publicado

Categorías
¿Quieres impulsar tu negocio?
escríbenos y manténte en contacto
Desarrollo de tiendas online Garber Informática
Contacta con nosotros