Code, de Chris Ried

El editor de bloques de WordPress, también conocido como Gutenberg por su nombre en clave, sigue acaparando gran parte de nuestras entradas del blog. Pero, ¿qué queréis que hagamos si cada día aparecen cosas nuevas sobre esto? ?

Nos prometieron que con Gutenberg todo sería más fácil. Pero si tienes un blog en el que más de una vez (y de dos) hablamos de temas técnicos en los que metemos fragmentos de código (PHP, JavaScript, y demás), ¿es esto ahora más fácil que con el editor clásico?

La respuesta depende del gusto del que escribe, pero en mi caso te diré que sí, hoy en día meter fragmentos de código en las entradas de nuestro blog es más sencillo que con el editor clásico. Pero también te diré que ha necesitado un esfuerzo previo por nuestra parte. Veamos a qué me refiero…

Para meter fragmentos de código dentro del editor clásico podías seguir varios caminos distintos. Uno de ellos era meter los fragmentos de código entre las etiquetas <pre> y </pre> de HTML. Esto para el caso de fragmentos de código que ocupan múltiples líneas.

Si sólo querías marcar añadir un trocito de código compuesto por pocas palabras, podías meter el código entre etiquetas <code> y </code>. Algo, por cierto, muy fácil de hacer seleccionado el código y utilizando el atajo de teclado ctrl + alt + x en Mac OS X (en Windows seguramente sea parecido).

Otra opción era utilizar un shortcode de terceros o algún plugin que nos ayudara a incluir fragmentos de código y a resaltar su sintaxis. Entre los plugins más populares para esto tenemos a Syntax Highlighter (ahora llamado Syntax Highlighter Evolved).

En su día recuerdo que habíamos usado este plugin en nuestra web para el resaltado de sintaxis de código. Lo bueno es que ahora se ha actualizado e incluye soporte para añadir bloques de código en el editor de bloques de WordPress.

Captura de pantalla del plugin SyntaxHighlighter Evolved que nos permite añadir bloques de código en Gutenberg para incluir fragmentos de código en nuestras entradas y páginas
El plugin SyntaxHighlighter Evolved nos permite añadir bloques de código en Gutenberg para incluir fragmentos de código en nuestras entradas y páginas.

Pero… ¿no incluye ya Gutenberg un bloque de código por defecto? La respuesta es que sí, pero este bloque de código que el editor de bloques trae no resalta la sintaxis de tu código. Simplemente utiliza una fuente mono-espaciada y no crea un nuevo bloque al pulsar la tecla intro. Pero por todo lo demás se comporta como un bloque de párrafo.

Si tienes la necesidad de añadir fragmentos de código en tus contenidos, es mucho más recomendable que utilices los bloques del plugin SyntaxHighlighter Evolved que los bloques de código por defecto de WordPress.

No quiero dejar de mencionar que el código original del plugin SyntaxHighlighter Evolved es de Alex Mills, que hace poco nos dejó después de perder la batalla contra la leucemia. La adaptación al editor de bloques la realizó Ian Dunn, como puedes ver aquí.

¿Cómo añadimos fragmentos de código en Nelio?

Después de haber estado probando diferentes maneras de incluir fragmentos de código en WordPress a lo largo del tiempo, finalmente nos hemos decantado por escribir los fragmentos de código directamente en Gist y crear un tipo de bloque adicional para importar los Gists en el editor de bloques.

Gist es un servicio gratuito de GitHub para alojar fragmentos de código. Aquí tienes un ejemplo del resultado final de un bloque Gist que incluye código en PHP:

Lo que más nos gusta es el resaltado de sintaxis y que si hay que hacer cambios los podemos hacer directamente en el Gist (en la web de GitHub) y automáticamente se actualiza en nuestra web sin tener que hacer cambios allí.

En el editor de bloques, nuestro bloque Gist te permite incluir la URL del Gist y de ahí es capaz de sacar los diferentes fragmentos de código que el Gist contiene y mostrarlos todos o sólo uno de ellos. Todas las opciones las hemos metido en la barra lateral del bloque, como puedes ver a continuación:

Uso de un bloque Gist para incluir fragmentos de código en nuestras entradas.
Aquí puedes ver cómo es un bloque Gist en el editor de bloques y las opciones que proporciona en su barra lateral.

Para la creación de este bloque de Gist nos hemos inspirado en la colección de bloques GhostKit, que tiene muchos otros tipos de bloque más. Te animo a probarlo.

Si quieres que subamos este bloque al repositorio de plugins de WordPress puedes meternos presión en la zona de comentarios. Y si metes código en tus contenidos de alguna otra forma, nos encantará que nos expliques cómo lo haces ?

Imagen destacada de Chris Ried en Unsplash.

6 respuestas a «Cómo meter fragmentos de código en el editor de bloques Gutenberg»

  1. Avatar de Daniel Martin

    Me ha gustado eso de «meteros presión».
    Vamos, metedlo ahora mismo! Vamos!!! ????

    Gracias por el artículo. Saludos

    1. Avatar de Antonio Villegas

      ¡Gracias, Daniel! Presión recibida ?

  2. Avatar de Juan Camilo Alvarez
    Juan Camilo Alvarez

    Hola Antonio, un saludo.

    Excelente guía, me ha servido un montón y lo del plugin para que el fragmento de código se vea bien, está de lujo. Muchas gracias.

    Saludos.

  3. Avatar de Gabriela
    Gabriela

    Hola! decidí actualizar la versión de WP, tenía 4.5. a partir de eso se desajustaron varias cosas, que fui solucionando, excepto que al editar una entrada «duplica» el primer párrafo = bajada + inicio del texto
    Pego captura debajo:

    El jefe……

    El jefe….

    Supongo que es porque interfiere con el código que usó el programador del sitio, ya que antes tomaba por defecto el primer párrafo como bajada (negrita) pero no lo duplicaba.

    Estoy tratando desde ayer de encontrar ese código/función, no es lo mio….

    Si tenes idea dónde y cómo buscarlo o solución posible BIENVENIDO, porque no pueden subir notas hasta que no solucione este tema….GRACIAS

    1. Avatar de Antonio Villegas

      Hola Gabriela. Con los datos que me indicas es imposible saber qué está pasando. Te recomiendo que contactes con el programador del sitio para conocer qué está causando este problema.

Deja una respuesta

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

He leído y acepto la política de privacidad de Nelio Software

Tus datos personales se almacenarán en SiteGround y serán usados por Nelio Software con el único objetivo de publicar tu comentario aquí. Con el envío de este comentario, nos das el consentimiento expreso para ello. Escríbenos para acceder, rectificar, limitar o eliminar tus datos personales.