Insert Gists without JavaScript

How to insert GitHub Gists into your blog posts 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 -

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

<script src=""></script>

But instead of including it, lets visit the JavaScript file at”.

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="" 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="" style="float:right">view raw</a><a href="" style="float:right; margin-right:10px; color:#666;">gistfile1.txt</a><a href="">This Gist</a> brought to you by <a href="">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 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;

Here is my Gist!
Look at it!
Gisting all over the place

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:

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

Recent posts View all


The best way to test model scopes in Rails

Learn about Rails scopes and how to best test them with both Rspec and Minitest


Finding out what called a Ruby method

A quick way to understand what is calling your code using the caller method