gist-github

Shortcode para mostrar código Github en WordPress

Probablemente has visto blogs dedicados a tutoriales WordPress, como éste, en los que se muestra código HTML, PHP, CSS, para mostrar cómo se hace.

En este blog, para mostrar código dentro de una entrada, simplemente ponemos el código dentro de etiquetas <pre> y nada más, a fin de cuentas es sólo código. Una cosa así.

<a href="<?php the_permalink(); ?>">permalink</a>

Existen varios plugins dentro del repositorio de WordPress que te permiten mostrar código dentro de una entrada o post, sin que éste se ejecute o cree problemas.

Además, estos plugins permiten resaltar el código, quedando más visual.


Shortcode para mostrar código Github en WordPress

En este tutorial vamos a ver cómo usar Gist, de Github para poder mostrar/compartir nuestro código dentro de una entrada o post. Crearemos un shortcode para mostrarlo.

gist-github

También existe plugins que realizan esta función. El código usado para este tutorial lo hemos extraído del plugin Gist GitHub Shortcode. No haremos uso del plugin entero, sólo la función básica que nos permita crear el shortcode para mostrar nuestro Gist.

Primero de todo, ¿Qué es Gist?

Gist, es una plataforma de GitHub donde podemos gestionar y compartir nuestros snippets, es decir, trozos de código.

Github tiene un sistema de incrustación de código, cada “gist” tiene un enlace de “embed” que te permite incrustar un script que mostrará el gist. Dicho de otro modo, es como si tuvieses un portapapeles en la nube para poder compartir/mostrar código.

Creando un Gist

  • gist-nuevoAccede o crea una cuenta en Github
  • Haz clic en New Gist
  • Dale una descripción y un nombre de archivo con la extensión adecuada.
  • Añade el código
  • Dale a crear Gist público o privado según quieras. Si quieres saber más haz clic aquí.
  • También puedes añadir el archivo desde tu PC.

Para que veas cómo funciona esto, vamos a usar un gist para compartir el snippet de código del Shortcode para mostrar código Github en WordPress.

Primeramente, edita el archivo functions.php de tu tema y añade el siguiente código. Recuerda no copiar la etiqueta de apertura.

[gist id=”b75e757caa601b37f328″]

Recuerda cambiar el ID de la URL.

Y ya está, ahora cuando quieras mostrar código en tu post de Gist, ya sabes cómo hacerlo.

Espero que este tutorial te haya resultado útil.

Y Tú. ¿Usas Gist u otro método para mostrar código en tu blog?

Comenta, comparte, difunde. Gracias.

Carlos A para FreelanceEvolution®

Deja un comentario

Your email address will not be published.Los campos requeridos están marcados *