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

Question

我有一些文字包含GitHub Gists的网址。我想查找这些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 plugin。

调用

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

Answer 2

我刚开始了一个名为UrlSpoiler（on github）的项目。它将帮助您动态嵌入gists。它在免费/共享平台上的Heroku上托管，因此您可以使用它，但我建议您将所需的代码复制到您自己的应用程序中以供生产使用。