How to Embed Gist (Github) Code in WordPress

Github is a great tool founded in 2008 that are used by millions of developers around the world. It makes collaborating with you co-worker, friends or even strangers much easier. Another great feature of Github is Gist. Here’s what Gist means:

Gist is a simple way to share snippets and pastes with others. All gists are git repositories, so they are automatically versioned, forkable and usable as a git repository.

Gist has become one of my important tools when developing website and sharing code with others. There are quite a number of plugins that allows you to paste the syntaxed-highlighted code in your post. I’ve tried many of them but get frustrated for three reasons:

1. Hard to manage – Sometimes I forgot which post I has code snippets on them so it’s hard for me to update the code whenever I need to.
2. Gist is forkable – Which means someone can fork the code for improvement. By allowing this, I can improve my level of coding.
3. Indentation problem – Not sure this is just me, but many times I’ve problem with code indentation.

There are few ways to embed your gist code in WordPress. Let’s go through each of them.

Using the Provided Embed URL

After you have published your code, you can get the embed code on the left side of your screen. Copy the code and paste it on your post editor (you need to paste it in the Text tab, not the Visual tab).

This is the same method you use to embed a tweet from Twitter.

Very easy.

Using WordPress Plugin to Embed Gist Code

The are lots of plugins to embed gist on your WordPress site. However, these two are my recommendations:

1. Embed GitHub Gist

This Embed Github Gist plugin allows you to embed your gist using shortcode.

Another import feature of this plugin is cache. This is useful to the plugin does not affect your loading performance. Cache is implemented with the Transients API to minimize delay on loading content.

2. Easy Gist Embed

Easy Gist Embed is another plugin of choice. It’s much easier to embed your Gist. All you need is the URL of your gist. Simply copy the Gist URL from your browser, paste it in your post editor and you’re done. This is a similar way to embed a Youtube video.