Интерактивные блоки кода в WordPress

Интерактивные блоки кода могут стать отличным дополнением к вашему блогу на WordPress, позволяя читателям не только читать статьи, но и активно взаимодействовать с представленным кодом. В этой статье мы рассмотрим, как легко и эффективно встроить интерактивные фрагменты кода в ваши записи WordPress.

Простой вариант использования

Начнем с базового примера. Допустим, у вас есть статический фрагмент кода на Python, и вы хотите сделать его интерактивным.

Во-первых, добавьте обычный блок кода с вашим фрагментом:

def greet(name):
    print(f"Hello, {name}!")

greet("World")

Сразу под блоком кода добавьте пользовательский HTML-блок со следующим содержимым:

<codapi-snippet sandbox="python" editor="basic"></codapi-snippet>

Здесь важно обратить внимание на два параметра:

  • sandbox определяет язык программирования, в нашем случае это “python”.
  • editor="basic" включает базовый режим редактирования кода.

В нижней части страницы или записи добавьте еще один пользовательский HTML-блок со скриптом и стилями Codapi (этот блок нужен только один, независимо от количества фрагментов кода):

<link rel="stylesheet" href="https://unpkg.com/@antonz/codapi@0.19.10/dist/snippet.css" />
<script src="https://unpkg.com/@antonz/codapi@0.19.10/dist/snippet.js"></script>

И вот ваш код стал интерактивным! Читатели теперь могут запускать и редактировать фрагмент прямо в браузере.

Подсветка синтаксиса

Чтобы улучшить визуальное восприятие кода, можно добавить подсветку синтаксиса. Для WordPress есть множество плагинов, но мы рассмотрим популярный вариант – SyntaxHighlighter.

Добавьте блок кода с подсветкой синтаксиса, как обычно:

def greet(name):
    print(f"Hello, {name}!")

greet("World")

Сразу под ним вставьте пользовательский HTML-блок со следующим содержимым:

<codapi-snippet sandbox="python" editor="basic" selector="@prev .code" init-delay="1000"></codapi-snippet>

Обратите внимание, что здесь мы используем selector="@prev .code" для привязки интерактивного блока к предыдущему блоку кода с подсветкой. Параметр init-delay="1000" добавляет небольшую задержку перед инициализацией редактора.

В нижней части страницы добавьте скрипт и стили Codapi, если вы еще этого не сделали.

В результате вы получите интерактивный фрагмент кода с красивой подсветкой синтаксиса, что сделает ваши статьи еще более привлекательными и полезными для читателей.

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

Более подробно можно прочитать https://github.com/nalgeon/codapi-js/blob/main/docs/wordpress.md