Как можно динамически вставлять GitHub Gist на страницу?
У меня есть текст, содержащий URL-адреса для GitHub Gists. Я бы хотел найти эти URL-адреса и поместить Gist inline в клиентскую часть содержимого. Некоторые вещи, которые я пробовал:
Прямой поиск API GitHub OEmbed.
Для https://gist.github.com/733951
это означает, что я выполняю поиск JSON-P для
https://github.com/api/oembed?format=json&url=https%3A%2F%2Fgist.github.com%2F733951
извлеките свойство html
объекта и добавьте добавление этого на мою страницу. Проблема вот что API GitHub OEmbed возвращает только первые три строки Gist.
Вызов
jQuery('a.something').embedly({allowscripts: true})
работает, но Embedly удаляет форматирование из Gist. Обертка его в теге <pre>
не помогает, потому что нет разрывов строк.
Использование версии gitHub .js
версии.
https://gist.github.com/733951.js
использует document.write
, поэтому я не могу контролировать, где на странице, когда я требую его динамически. (Если бы я мог записать его в источник HTML, он появился бы в нужном месте, но все это делается на стороне клиента.)
Ответы
Ответ 1
Я был вдохновлен внедрением gist на стороне клиента и создал для него библиотеку html script.js
(я также использую ее, чтобы удалить встроенный стиль ссылок и использовать свой собственный стиль, который лучше подходит для моей страницы)...
Это более общий, чем просто встраивание gists и pasties - на самом деле я использую его для динамической загрузки некоторых сторонних виджетов /google maps/twitter posts)...
https://github.com/kares/script.js
Здесь пример внедрения:
https://github.com/kares/script.js/blob/master/examples/gistsAndPasties.html
UPDATE: 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
});
Ответ 2
Я только что начал проект под названием UrlSpoiler (в github). Это поможет вам внедрить gists динамически. Он размещал на Heroku на бесплатной/общей платформе, поэтому вы можете играть с ней, но я бы рекомендовал скопировать код, который вам нужен, в ваше собственное приложение для использования в целях производства.