How can I embed an entire GitHub Gist dynamically on a page?

Question

I have some text that includes URLs to GitHub Gists. I'd like to look for those URLs and put the Gist inline in the content client-side. Some things I've tried:

A direct lookup to GitHub's OEmbed API.

For https://gist.github.com/733951, this means I do a JSON-P lookup to https://github.com/api/oembed?format=json&url=https%3A%2F%2Fgist.github.com%2F733951, extract the html property of the object, and add adding that to my page. The problem here is that GitHub's OEmbed API only returns the first three lines of the Gist.

Using the jQuery-embedly plugin.

Calling

jQuery('a.something').embedly({allowscripts: true})

works, but Embedly strips formatting from the Gist. Wrapping it in a <pre> tag doesn't help because there are no line-breaks.

Using GitHub's .js version of the gist.

https://gist.github.com/733951.js uses document.write, so I don't have any control over where in the page when I require it dynamically. (If I could write it into the HTML source it would show up in the right place, but this is all being done client-side.)

Answer 1

I've been inspired by client side gist embedding and built a script.js hack library just for that (I also use it to remove the embedded link style and use my own style that fits better on my page) ...

It's more generic than just embedding gists and pasties - actually I'm using it to dynamically load some third-party widgets / google maps / twitter posts) ...

https://github.com/kares/script.js

Here's the embedding example :

https://github.com/kares/script.js/blob/master/examples/gistsAndPasties.html

UPDATE: gist's API since then supports JSONP, jQuery sample:

var printGist = function(gist) {
    console.log(gist.repo, ' (' + gist.description + ') :');
    console.log(gist.div);
};
$.ajax({ 
    url: 'https://gist.github.com/1641153.json', 
    dataType: 'jsonp', success: printGist 
});