Задача: вставить в сайт-документацию виджет, который содержит в себе пример исходного кода (HTML/CSS/JavaScript) и результат рендеринга. При этом:
- Должна быть подсветка синтаксиса исходного кода
- Должна быть возможность удобного копирования кода в буфер обмена
- Должна быть возможность отображения кода в оффлайн-режиме, если мы просто открыли HTML-файл на локальном компьютере без подключения к интернету.
- Основные стили документа не должны влиять на рендеринг примера. В целях сокращения времени, на сайте-документации используется библиотека Bootstrap 4 (включая reboot), а этот фреймворк даёт довольно спецефичные (высокоприоритетные) css-правила, которые трудно переопределить. Не хотелось бы, чтобы они влияли на рендеринг примера ...
Решения, которые пробовал и видел:
- Первые три пункта даёт библиотека
prism.js
. Она прекрасно подсвечивает синтаксис для многих языков и можно настроить кнопку "копировать в буфер обмена". Ну а весь остальной интерфейс (например, табы для переключения между исходным кодом и результатом) можно и самому реализовать. Остаётся вопрос, как же оградить отренденный результат примера от bootstrap-стилей. - Codepen удовлетворяет только первому и четвёртому пунктам. Codepen содержит внутренний iframe, благодаря которому результат рендеринга не зависит от стилей документа. Однако, кнопка "копировать код" отсутствует.
Кроме того, без подключения к интернету никакого codepen-виджета отображаться не будет. Можно посмотреть исходный код того скрипта, который Codepen получает удалённо (через script scr=""
) и вставить его себе в JavaScript-файл, однако помимо этого скрипта ещё ведь нужно и свой код примера получить с внешнего codepen.
Близок к идеалу официальный сайт bootstrap: там как код и результат рендеринга, кнопка "копировать код", и всё это работает в оффлайне. Ну а поскольку сам сайт bootstrap построен с использованием своих же стилей, то влияние bootstrap-стилей на примеры тут даже нужно.
Ну а лучшее, что я видел - это сайт-документация Vuetify. Виджет ниже имеет ссылку на Codepen, тем не менее, просмотр кода и результата рендеринга доступны в оффлайне. Имеется кнопка копирования кода. Но, опять же, внешние стили влияние имеют.
iframe
?