如何在页面上动态嵌入整个GitHub Gist？

Question

我有一些文本,包括GitHub Gists的URL.我想查找这些URL并将Gist内联到内容客户端.我试过的一些事情:

直接查找GitHub的OEmbed API.

因为https://gist.github.com/733951,这意味着我进行JSON-P查找 https://github.com/api/oembed?format=json&url=https%3A%2F%2Fgist.github.com%2F733951,提取html对象的属性,并添加到我的页面.这里的问题是GitHub的OEmbed API只返回Gist的前三行.

使用jQuery-embedly插件.

调用

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

有效,但Embedly从Gist中删除格式.将其包装在<pre>标记中无济于事,因为没有换行符.

使用GitHub .js版本的要点.

https://gist.github.com/733951.js使用document.write,所以当我动态地需要它时,我无法控制页面中的位置.(如果我可以将它写入HTML源代码,它会显示在正确的位置,但这都是在客户端完成的.)

Answer 1

我受到了客户端gist嵌入的启发,并script.js为此构建了一个hack库(我也使用它来删除嵌入式链接样式并使用我自己的风格,更适合我的页面)...

它比仅仅嵌入gists和pasties更通用 - 实际上我用它来动态加载一些第三方小部件/ google maps/twitter帖子...

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

这是嵌入示例:

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

更新:gist的API从那时起支持JSONP,jQuery示例:

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