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.)

kares · Accepted Answer · 2012-01-21 13:51:21Z

6

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 
});

edited Jan 21, 2012 at 13:51

answered Jan 20, 2011 at 7:17

kares

7,2011 gold badge31 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

James A. Rosen Over a year ago

Well, changing document.write will work, though that seems a bit... risky. Still, it's at least a solution.

colllin · Accepted Answer · 2013-03-28 23:05:25Z

0

I just started a project called UrlSpoiler (on github). It will help you embed gists dynamically. It's hosted on Heroku on the free/shared platform so you can play with it, but I'd recommend copying the code you need into your own app for production use.

edited Mar 28, 2013 at 23:05

answered May 27, 2011 at 21:16

colllin

9,83910 gold badges53 silver badges66 bronze badges

3 Comments

Factor Mystic Over a year ago

domain is dead, not a helpful answer

LucianNovo Over a year ago

link is currently dead. @collindo

colllin Over a year ago

thanks @LucianNovo. Link is alive now! I changed my github username a few days ago... sorry about that.

Collectives™ on Stack Overflow

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

A direct lookup to GitHub's OEmbed API.

Using the jQuery-embedly plugin.

Using GitHub's `.js` version of the gist.

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

A direct lookup to GitHub's OEmbed API.

Using the jQuery-embedly plugin.

Using GitHub's .js version of the gist.

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related

Using GitHub's `.js` version of the gist.