В статье о программировании бывает полезным полезным добавить демо, которое иллюстрирует работу того или иного кода. Это можно сделать без плагинов, честно говоря, я даже не знаю, существуют ли такие плагины для WordPress.
Из этой статьи вы узнаете, как вставить симпатичное демо кодов Python, Java, JavaScript, HTML и CSS на сайт.
Пример:
Для простоты здесь показан кусочек HTML (который нельзя назвать программированием, этот пример взят для простоты восприятия), здесь может быть код на Python или Java.
Как видите, прямо в этом окошке можно сделать изменения и посмотреть, что будет.
Такую симпатичную штучку позволяет добавить интерактивная оболочка Trinket.
Как добавить демо из Trinket?
Заходим по адресу trinket.io, бесплатно регистрируемся.
Для того, чтобы создать нужное демо, в эккаунте в выпадающем меню выбираем New Trinket и нужный язык программирования.
Пишем демо код, который собираемся вставить в статью, сохраняем. Если есть необходимость, тринкету можно дать имя. Выбираем пункт меню Share> Embed и получаем код для вставки на сайт
Осталось скопировать этот код, и добавить демо в статью.
Плюс в том, что это iframe, и, соответсвенно, код находится и выполняется на чужом сервере. Ну а минус в том, что если нечаянно поменять или удалить код в Trinket, то это изменение произойдет и на сайте.
В Trinket нельзя полноценно продемонстрировать HTML-CSS-JS, а ведь статьи об использовании HTML-CSS-JS широко распространены. С этой задачей справляется JSFiddle.
Пример
Для того, чтобы посмотреть код и результат, нужно нажать на соответствующую вкладку
Как добавить демо из JSFiddle?
Порядок действий точно такой же, как и для Trinket
- регистрируемся в JSFiddle
- добавляем код
- сохраняем
- в меню выбираем Embed и получаем код для вставки на сайт:
Недостаток очевиден – пользователь не всегда может догадаться, что нужно нажимать на вкладки и не может “поиграть” и кодом. Тем не менее, это гораздо эффективнее симпатичнее, чем вставлять куски кода в текст.
Комментировать