Примеры на JavaScript

[Vlad]

Нужно написать скрипт, который изменяет вид примеров на сайте webref.ru подобно codepen.

 

 

 

1. Вверху каждого примера скрипт добавляет две вкладки: «Код» и «Результат», при переключении между ними, соответственно, выводится код HTML и результат примера в браузере.

 

2. Вид вкладок и примера должны настраиваться через стили, картинки лишь для понимания работы привёл. Стилизацию нужную сам сделаю.

 

3. Все примеры имеют следующий код:

 

<pre><code data-language="html">...</code></pre>

 

4. Сами примеры содержат все теги, включая html, body и др. Поэтому дополнять не надо, только отобразить.

 

5. Код примера используется в нескольких местах, но вкладки должны добавляться только к определённым элементам, так что желательно оформить скрипт в виде плагина jQuery, чтобы вызывать его для нужных селекторов.

 

6. Для подсветки синтаксиса применяется Rainbow, его нужно сохранить.

 

Свои вопросы и предложения направляйте на vlad@htmlbook.ru

[nerv]

Насколько понимаю, на сайте webref.ru используется jsfiddle.

Вероятно, ответом будет: не возможно написать такой скрипт.

Смотреть настройки стилизации внедрения (если таковые вообще есть), либо использовать другой сервис.

[Vlad]

На htmlbook нечто подобное реализовано, правда своеобразно, так что реализовать можно.