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
    Interview with a Pornhub Web Developer

    Regardless of your stance on pornography, it would be impossible to deny the massive impact the adult website industry has had on pushing the web forward. From pushing the browser's video limits to pushing ads through WebSocket so ad blockers don't detect them, you have...

  • By
    Conquering Impostor Syndrome

    Two years ago I documented my struggles with Imposter Syndrome and the response was immense.  I received messages of support and commiseration from new web developers, veteran engineers, and even persons of all experience levels in other professions.  I've even caught myself reading the post...

Incredible Demos

  • By
    JavaScript Battery API

    Mozilla Aurora 11 was recently released with a bevy of new features. One of those great new features is their initial implementation of the Battery Status API. This simple API provides you information about the battery's current charge level, its...

  • By
    Creating Spacers with Flexbox

    I was one of the biggest fans of flexbox before it hit but, due to being shuffled around at Mozilla, I never had the chance to use it in any practice project; thus, flexbox still seems like a bit of a mystery to me.  This greatly...

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!