2013-03-20 11:58:12

Embedding GitHub Gists in your WordPress posts

I tried several of the readily available Wordpress plugins to integrate gists into my posts. Unfortunately, most were outdated or did not have the functionality I was looking for.

Want to download right away? Download the gist embed plugin from Wordpress.com

What I did find, was a very interesting JavaScript library, written by Blair Vanderhoof and extended by Kashif Umair Liaqat, called gist-embed. The functionality of this jQuery powered script was exactly what I was looking for. With just a few minor adjustments, this would be very simple to convert to a Wordpress plugin. (The changes have now been integrated into the main branch.)

Gist Embed Plugin

So let us quickly walk through on how to install and use this plugin. You can download the latest version from GitHub, please refer to the README.md file for installation instructions.

Once enabled, you will notice a new icon appearing in your WYSIWYG editor. The well known GitHub icon:gist-embed

WYSIWYG gist embed

Clicking this icon will bring up a dialog where you can enter your gist's information.

gist embed dialog


Loading gist https://gist.github.com/ThomasHambach/5168951, file "app.js", lines 1 to 10.


Want to go the manual way? No problem, refer to the readme file at the GitHub project page to get started.