es Spanish

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”

Añadir resaltado de sintaxis en Gutenberg
Code de Advanced Gutenberg Blocks

Funciona realmente bien y se pueden elegir distintos estilos:

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:

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

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:

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:

Añadir resaltado de sintaxis en Gutenberg
Manage Blocks
Añadir resaltado de sintaxis en Gutenberg
Ejemplo del bloque Unsplash

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

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:

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

Ejemplo Seo en Imagen
Apuntes

¿Cómo optimizar imágenes para web?

¿Tienes una página web? ¿Un blog? ¿Una tienda online? En ese caso debes de saber la importancia de optimizar las imágenes que vayas utilizar para

Permitir Iframes en PrestaShop
Prestashop

Añadir iframe a PrestaShop

Si has intentado añadir un iframe a PrestaShop 1.7, te habrás dado cuenta que no te deja. Si activas la tienda en modo debug, da

Categorías

¿Quieres impulsar tu negocio?

escríbenos y manténte en contacto

Desarrollo de tiendas online Garber Informática