Resumen: en este post te muestro cómo agregar fragmentos o snippets de código fuente a los posts de WordPress, blogger, o de tu propio gestor de contenidos sin usar plugins.

Los fragmentos de código son útiles cuando queremos mostrar código en nuestra web con WordPress.

Existen varios plugins, hace tiempo utilizaba Crayon syntax highlighter (para WP) pero tuve unos problemas con el mismo así que buscando alternativas di con la solución y hoy vengo a exponerla.

Agregar fragmentos cortos en WordPress

Si quieres agregar algo que lleva una línea o que es muy corto, simplemente escríbelo, selecciónalo y presiona SHIFT + ALT + X.

Por ejemplo, un comando sencillo:

cd descargas

De este modo, aunque la sintaxis no se resalta, sí queda en un formato legible y formateado:

En otros gestores, simplemente encierra el mismo entre las etiquetas code.

Desventajas

No hay colores bonitos ni resaltado de sintaxis

Ventajas

Útil cuando quieres poner comandos simples

Usar gist

El método que utilizo para grandes fragmentos de código es gist.

Gist es un servicio de GitHub que permite compartir fragmentos de código y también su inserción. Para usarlo necesitas una cuenta de GitHub, cuya creación no tiene ningún costo ni límite (en cuanto a gists, claro está).

Para usarlo simplemente dirígete a gist.github.com, inicia sesión y haz click en el signo + que está junto a tu foto de perfil.

Crear un gist

Escribe el nombre del archivo con extensión; puedes poner un título si quieres.

La ventaja de esto es que la sintaxis se resalta de acuerdo a la extensión del archivo.

Los botones son:

• Add file: agregar más archivos a ese gist
• Create secret gist: poner un gist que no se ve en público pero cualquiera que tenga el link puede verlo
• Create public gist: un gist que será visible para cualquiera que ingrese a tu perfil, y también para los motores de búsqueda.

Insertar el gist

Para insertarlo, al menos en WordPress, solo tienes que copiar el enlace y pegarlo en WordPress.

Es decir, copiar, por ejemplo:

https://gist.github.com/parzibyte/206ad59f7f7e1ad18f788f307b21a73e

Y pegarlo en el editor:

Otra cosa que puedes hacer fuera de WordPress es copiar el enlace que tendrá un script. Así:

Inserta ese script en tu web y listo.

En mi caso el enlace es algo así:

<script src="https://gist.github.com/parzibyte/206ad59f7f7e1ad18f788f307b21a73e.js"></script>

Como ves simplemente es el link de tu gist con un .js al final.

Pégalo en tu web (en el código fuente o HTML) y debería funcionar. Yo lo he puesto en blogger:

https://parzibyte.blogspot.com/2019/08/probando-resaltado-de-sintaxis.html

Como ves, no importa la web, pues gist se puede embeber fácilmente.

Así es como puedes insertar fragmentos o snippets de código fuente en tu web, con resaltado de sintaxis y colores bonitos.