Поделиться пеном и встроить его на свой сайт

Пен обычно пишут не для себя: его показывают коллеге, прикладывают к статье, вставляют в урок. Раньше для этого был один способ — скопировать адрес из строки браузера. Теперь в шапке редактора есть кнопка «Поделиться» (Share), и способов два.

Кнопка работает у сохранённого пена. Пока пен новый и адреса у него нет, она неактивна — сначала его нужно сохранить.

Ссылка

Первая вкладка — адрес пена и кнопка «Скопировать». По ссылке пен откроется у любого человека, аккаунт для этого не нужен: он увидит код, превью и консоль. Эта вкладка есть у всех, в том числе на чужом пене.

Встраивание

Вторая вкладка — «Встроить» — есть у автора пена. В ней мы собираем блок, который будет показан на другом сайте:

• Панели. Пять переключателей: HTML, CSS, JS, Result и Console. Для статьи про CSS-анимацию хватит CSS и Result, для разбора алгоритма — JS и Console.
• Высота блока — от 200 до 1200 пикселей.
• Предпросмотр. Ниже сразу виден блок в том виде, в каком он появится на странице.

Остаётся нажать «Скопировать код» и вставить его в свою страницу. Код выглядит так:

<iframe src="https://…/embed/42?show=css,result" title="Мой пен — Penlab"
  width="100%" height="420" loading="lazy" style="border:0"></iframe>

Что увидит читатель

Встроенный пен — не картинка и не запись экрана. Это тот же редактор в миниатюре: код можно править, результат обновляется, в консоль можно ввести выражение. Читатель статьи меняет число в примере и сразу видит, что получилось.

При этом ничего не сохраняется: после перезагрузки страницы в блоке снова код автора. Кнопок сохранения, форка и входа там нет. Если захочется забрать пример себе, в полосе сверху есть ссылка «Открыть в Penlab» — она открывает пен в полном редакторе, и уже там его можно форкнуть.

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

Нюансы

• По ссылке и во встроенном блоке открывается последняя сохранённая версия. Если в редакторе есть несохранённые правки, диалог об этом напомнит.
• Выбор панелей нигде не хранится — он записан в адресе внутри кода. Один и тот же пен можно встроить в двух местах с разными панелями.
• Просмотры из встроенного блока в счётчик пена не идут: считаются только открытия самого пена.
• Если автор удалит пен, на чужой странице вместо него появится «Пен не найден».

Попробовать можно на любом своём пене из профиля или сначала собрать новый.