Insert Gists without JavaScript

If you would like to insert Github’s Gists into your blog posts or pages but don’t want the overhead or potential security implications of loading some JavaScript from a third party then it is relatively straight forward to get around.

Here is a gist I have created just for this post - https://gist.github.com/tosbourn/4949176

And here is the JavaScript file I am meant to include;

<script src="https://gist.github.com/tosbourn/4949176.js"></script>

But instead of including it, lets visit the JavaScript file at https://gist.github.com/tosbourn/4949176.js”.

Well, well, well! Looks like it is just some Document.Writes, those folks are pretty easy to work with, so lets copy the entire thing and paste it into a text editor.

Once in the text editor we need to run a find and replace on a three things;

1. Find any reference of \n and remove it.
2. Find any reference of \ and remove it.
3. Find any double spaces and remove them.

Then just remove the document.write(' and '); from the start and end of the two lines.

You are left with something like this;

<link href="https://gist.github.com/assets/embed-0af287a4b5c981db301049e56f06e5d3.css" media="screen" rel="stylesheet" />
<div id="gist4949176"><div><div><div><table cellpadding="0" cellspacing="0"><tr><td><span id="file-gistfile1-txt-L1" rel="file-gistfile1-txt-L1">1</span><span id="file-gistfile1-txt-L2" rel="file-gistfile1-txt-L2">2</span><span id="file-gistfile1-txt-L3" rel="file-gistfile1-txt-L3">3</span></td><td><pre><div id="file-gistfile1-txt-LC1">Here is my Gist!</div><div id="file-gistfile1-txt-LC2">Look at it!</div><div id="file-gistfile1-txt-LC3">Gisting all over the place</div></pre></td></tr></table></div></div><div><a href="https://gist.github.com/tosbourn/4949176/raw/678465ea9db744f03fa7628745942fae281d1123/gistfile1.txt" style="float:right">view raw</a><a href="https://gist.github.com/tosbourn/4949176#file-gistfile1-txt" style="float:right; margin-right:10px; color:#666;">gistfile1.txt</a><a href="https://gist.github.com/tosbourn/4949176">This Gist</a> brought to you by <a href="http://github.com">GitHub</a>.</div></div></div>		

Now we are almost there, we could include this on our page and no JavaScript would run, but we do still need to go across to Github to grab the CSS file and of course there will be a slight performance hit with that, so lets go on over to https://gist.github.com/assets/embed-0af287a4b5c981db301049e56f06e5d3.css and grab the CSS.

Now we simply replace the first line of our code from the link element to a style block and include the CSS, now all that is left is to copy and paste this code from our text editor into our website.

Here is the result sans external calls;

I think it works well and you can’t deny the performance benefits.

You can also make this process a bit smoother by requesting the .json or .txt versions of the Gist, in our example change .js to either .json or .txt, like so: https://gist.githubusercontent.com/tosbourn/4949176/rawt.

Thanks so much to PunKeel for suggesting the .json or .txt variants.