Как я могу динамически встраивать весь GitHub Gist на страницу?

Question

У меня есть текст, который включает URL-адреса GistHub Gists. Я хотел бы найти эти URL-адреса и поместить Gist в строку содержимого на стороне клиента. Некоторые вещи, которые я пробовал:

Прямой доступ к 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 объекта и добавьте его на мою страницу. Эта проблема вот что GitHub OEmbed API возвращает только первые три строки Gist.

Использование плагина jQuery-embedly .

Calling

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

работает, но Embedly удаляет форматирование из Gist. Заключение в тег <pre> не помогает, потому что нет разрывов строки.

Использование GitHub's .js версии gist.

https://gist.github.com/733951.js использует document.write, поэтому я не могу контролировать, где на странице, когда мне это требуется динамически. (Если бы я мог записать его в исходный HTML-код, он бы отображался в нужном месте, но все это делается на стороне клиента.)

Answer 1

Я был вдохновлен встраиванием клиентской базы и специально для этого создал хак-библиотеку script.js (я также использую ее, чтобы удалить встроенный стиль ссылок и использовать свой собственный стиль, который лучше подходит для моей страницы) ...

Это более общее, чем просто встраивание гистограмм и текстов - на самом деле я использую его для динамической загрузки некоторых сторонних виджетов / карт Google / сообщений в Твиттере) ...

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

Вот пример встраивания:

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

ОБНОВЛЕНИЕ : API gist с тех пор поддерживает 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 ( на github ). Это поможет вам динамически встраивать гистологию. Он размещен на Heroku на бесплатной / совместно используемой платформе, поэтому вы можете играть с ним, но я бы рекомендовал скопировать необходимый код в ваше собственное приложение для производственного использования.