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

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

Прямой поиск в OEmbed API GitHub.

За https://gist.github.com/733951, это означает, что я делаю поиск JSON-P https://github.com/api/oembed?format=json&url=https%3A%2F%2Fgist.github.com%2F733951извлеките html свойство объекта, и добавьте добавив это на мою страницу. Проблема здесь в том, что OEmbed API GitHub возвращает только первые три строки Gist.

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

призвание

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

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

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

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

Источник

2 ответа

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

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

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 
});
Источник

Я только начал проект под названием UrlSpoiler ( на github). Это поможет вам динамически встраивать гистологию. Он размещен на Heroku на бесплатной / совместно используемой платформе, поэтому вы можете поиграть с ним, но я бы рекомендовал скопировать необходимый код в ваше собственное приложение для производственного использования.

Источник
Другие вопросы по тегам