Как добавить демо код в статью


В статье о программировании бывает полезным полезным добавить демо, которое иллюстрирует работу того или иного кода. Это можно сделать без плагинов, честно говоря, я даже не знаю, существуют ли такие плагины для WordPress.

Из этой статьи вы узнаете, как вставить симпатичное демо кодов Python, Java, JavaScript, HTML и CSS на сайт.

Пример:

Для простоты здесь показан кусочек HTML (который нельзя назвать программированием, этот пример взят для простоты восприятия), здесь может быть код на Python или Java.
Как видите, прямо в этом окошке можно сделать изменения и посмотреть, что будет.

Такую симпатичную штучку позволяет добавить интерактивная оболочка Trinket.

Как добавить демо из Trinket?

Заходим по адресу trinket.io, бесплатно регистрируемся.
Для того, чтобы создать нужное демо, в эккаунте в выпадающем меню выбираем New Trinket и нужный язык программирования.
Trinket

Пишем демо код, который собираемся вставить в статью, сохраняем. Если есть необходимость, тринкету можно дать имя. Выбираем пункт меню Share> Embed и получаем код для вставки на сайт
trinket-embed

Осталось скопировать этот код, и добавить демо в статью.

Плюс в том, что это iframe, и, соответсвенно, код находится и выполняется на чужом сервере. Ну а минус в том, что если нечаянно поменять или удалить код в Trinket, то это изменение произойдет и на сайте.

В Trinket нельзя полноценно продемонстрировать HTML-CSS-JS, а ведь статьи об использовании HTML-CSS-JS широко распространены. С этой задачей справляется JSFiddle.

Пример

Для того, чтобы посмотреть код и результат, нужно нажать на соответствующую вкладку

Как добавить демо из JSFiddle?

Порядок действий точно такой же, как и для Trinket

  1. регистрируемся в JSFiddle
  2. добавляем код
  3. сохраняем
  4. в меню выбираем Embed и получаем код для вставки на сайт:

JSFilldle

Недостаток очевиден – пользователь не всегда может догадаться, что нужно нажимать на вкладки и не может “поиграть” и кодом. Тем не менее, это гораздо эффективнее симпатичнее, чем вставлять куски кода в текст.

И Trinket, и JSFiddle удобно использовать в качестве “песочницы” в процессе обучения – для чего они изначально предназначены

Комментировать