Dynamically embedding Gists

I updated my site to utilize html5 history and ajax recently. One of the challenges I faced was how to handle Gist embeds. Since they only consist of a single script tag it initially seemed like there wasn’t a lot to go on. Not to mention that it would trigger a document.write() … and that would naturally ruin my site if it were triggered dynamically.

After looking some more at this embed system I found out that the Gist embed also has a json version which gives you its HTML content and a link to a stylesheet that it must load. With this info, I made a small jQuery snippet that would replace all these script elements with the actual HTML from the Gist

Please do note that I used a function called add_stylesheet_once in the script displayed above. This is purely because I didn’t want the same stylesheet to embedded many, many times after navigating a few pages containing Gists.