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

发布于 2024-10-13 05:14:54 字数 866 浏览 5 评论 0原文

我有一些文本，其中包含 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 嵌入插件。

调用

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

可以，但 Embedly 会从要点中删除格式。将其包装在

 标记中并没有帮助，因为没有换行符。

使用 GitHub 的 `.js` 版本的要点。

https://gist.github.com/733951.js 使用 document.write，因此当我动态需要它时，我无法控制页面中的位置。（如果我可以将其写入 HTML 源代码，它将显示在正确的位置，但这一切都是在客户端完成的。）

原文

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

梦冥 2024-10-20 05:14:54

我受到客户端要点嵌入的启发，并为此构建了一个 script.js 黑客库（我还使用它来删除嵌入的链接样式并使用我自己的更适合我的页面的样式）...

它比嵌入要点和馅饼更通用 - 实际上我用它来动态加载一些第三方小部件/谷歌地图/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 
});

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

回复收藏 0 原文