如何在页面上动态嵌入完整的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 版本的gist。

https://gist.github.com/733951.js 使用document.write，所以我没有任何控制权动态要求它出现在页面的哪个位置。(如果我可以将其写入HTML源代码中，它将显示在正确的位置，但这全部是在客户端完成的。)

- James A. Rosen

Answer 1

我受到客户端gist嵌入的启发，并建立了一个名为script.js的hack库，专门用于此（我还使用它来删除嵌入链接样式，并使用适合我的页面的自定义样式）... 它比仅仅嵌入gists和pasties更加通用 - 实际上，我正在使用它来动态加载一些第三方小部件/谷歌地图/推特帖子)... 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 
});

- kares

---

好的，更改 document.write 可以解决问题，但这似乎有点...冒险。不过，至少这是一个解决方案。 - James A. Rosen

Answer 2

我刚刚启动了一个名为UrlSpoiler (在github上)的项目。它可以帮助您动态嵌入GitHub Gist，目前它托管在Heroku的免费/共享平台上，所以您可以使用它进行测试，但出于生产目的，我建议您将需要的代码复制到自己的应用程序中。

- colllin

---

域名已经失效，这不是一个有用的答案。 - Factor Mystic

链接目前已失效。 - LucianNovo

感谢@LucianNovo。链接现在可用！我几天前更改了我的Github用户名... 对此很抱歉。 - colllin