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
    CSS Animations Between Media Queries

    CSS animations are right up there with sliced bread. CSS animations are efficient because they can be hardware accelerated, they require no JavaScript overhead, and they are composed of very little CSS code. Quite often we add CSS transforms to elements via CSS during...

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

    When you say or read "HTML5", you half expect exotic dancers and unicorns to walk into the room to the tune of "I'm Sexy and I Know It."  Can you blame us though?  We watched the fundamental APIs stagnate for so long that a basic feature...

Incredible Demos

  • By
    Implementing Basic and Fancy Show/Hide in MooTools 1.2

    One of the great parts of MooTools is that the library itself allows for maximum flexibility within its provided classes. You can see evidence of this in the "Class" class' implement method. Using the implement method, you can add your own methods to...

  • By
    Rotate Elements with CSS Transformations

    I've gone on a million rants about the lack of progress with CSS and how I'm happy that both JavaScript and browser-specific CSS have tried to push web design forward. One of those browser-specific CSS properties we love is CSS transformations. CSS transformations...

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!