Gist Shortcode Embed

By  on  

Blog comments and forum posts are traditionally the worst place to post code, but unfortunately are the frequent hosts of code for developers like us.  Many developers choose to post links to more dev-friendly environments like GitHub instead, but there's a certain disconnect that comes with posting an external resource for something that would be much more useful in an internal capacity.  Using some server-side magic (PHP in this case) and regular expressions, we can utilize GitHub's Gist API to display external code within comments and forum posts as desired!

The PHP

There are two formats to detect:  shortcode [gist #####] format and simple gist link format:

/*
	Embed format: <script src="https://gist.github.com/4575399.js"></script>
*/

function embedGists($string) {
	$regex1 = '/https:\/\/gist.github.com\/(\d+)/';
	$regex2 = '/\[gist (\d+)\]/';
	$replace = '<script src="https://gist.github.com/${1}.js"></script>';

	// Find [gist ######] stuff
	$string = preg_replace($regex1, $replace, $string);
	$string = preg_replace($regex2, $replace, $string);

	return $string;
}

// Test string 
$string = 'lah blah<br />[gist 4575399]<br />And another: https://gist.github.com/4575399';
echo embedGists($string);

/* Provides:  

	lah blah<br /><script src="https://gist.github.com/4575399.js"></script><br />And another: <script src="https://gist.github.com/4575399.js"></script>

*/

Since GitHub is so popular and their gist embed is so useful, using their embed functionality is a logic choice.  Better yet is that detection and output is easy to implement.  Consider GitHub gist embedding as a viable option for your tech-oriented website -- your users will be grateful!

Recent Features

  • By
    5 More HTML5 APIs You Didn&#8217;t Know Existed

    The HTML5 revolution has provided us some awesome JavaScript and HTML APIs.  Some are APIs we knew we've needed for years, others are cutting edge mobile and desktop helpers.  Regardless of API strength or purpose, anything to help us better do our job is a...

  • By
    fetch API

    One of the worst kept secrets about AJAX on the web is that the underlying API for it, XMLHttpRequest, wasn't really made for what we've been using it for.  We've done well to create elegant APIs around XHR but we know we can do better.  Our effort to...

Incredible Demos

  • By
    MooTools Overlay Plugin

    Overlays have become a big part of modern websites; we can probably attribute that to the numerous lightboxes that use them. I've found a ton of overlay code snippets out there but none of them satisfy my taste in code. Many of them are...

  • By
    MooTools Link Fading

    We all know that we can set a different link color (among other properties) on the hover event, but why not show a little bit more dynamism by making the original color fade to the next? Using MooTools 1.2, you can achieve that effect. The MooTools...

Discussion

  1. You should also take a look at Async loading gists: https://gist.github.com/4587063

  2. [gist Is this working here?]

    • This feature will come with the next push of the site on February 1st. :)

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!