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
    Create Namespaced Classes with MooTools

    MooTools has always gotten a bit of grief for not inherently using and standardizing namespaced-based JavaScript classes like the Dojo Toolkit does.  Many developers create their classes as globals which is generally frowned up.  I mostly disagree with that stance, but each to their own.  In any event...

  • By
    Convert XML to JSON with JavaScript

    If you follow me on Twitter, you know that I've been working on a super top secret mobile application using Appcelerator Titanium.  The experience has been great:  using JavaScript to create easy to write, easy to test, native mobile apps has been fun.  My...

Incredible Demos

  • By
    CSS Columns

    One major gripe that we've always had about CSS is that creating layouts seems to be more difficult than it should be. We have, of course, adapted and mastered the techniques for creating layouts, but there's no shaking the feeling that there should be a...

  • By
    Retrieve Your Gmail Emails Using PHP and IMAP

    Grabbing emails from your Gmail account using PHP is probably easier than you think. Armed with PHP and its IMAP extension, you can retrieve emails from your Gmail account in no time! Just for fun, I'll be using the MooTools Fx.Accordion plugin...

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!