Как подружить редактор Gutenberg с подсветкой кода Prism.js в WordPress

Если вы создаёте контент в WordPress, чаще всего вы используете редактор Gutenberg.

In Questo Articolo

Gutenberg — редактор нового поколения
Как Gutenberg реализует сетку
Проблема стандартного блока кода
Что такое Prism.js
Работа с дочерней темой
Как пользоваться сайтом Prism.js
- Настройка сборки
Подключение Prism.js в WordPress
Автоматическая нумерация строк
Экранирование HTML-символов
Стили оформления
Дополнительные возможности Prism.js
До и после подключения Prism.js
- До подключения
- После подключения

Gutenberg — редактор нового поколения

В эпоху Web 1.0 в фронтенде разработчики использовали редактор TinyMCE. Это был стандартный текстовый редактор WYSIWYG над полем <textarea> располагались кнопки вроде «жирный», «курсив» и «ссылка». Весь текст хранился одной лентой HTML-кода, а переместить блок или вставить что-то посередине было крайне неудобно. Кроме того, TinyMCE не поддерживал адаптивную 12-колоночную разметку, которая стала стандартом де-факто в Web 2.0. Сложные макеты приходилось собирать вручную с помощью HTML и CSS.

Редактор Gutenberg решил эти проблемы. Он появился в версии WordPress 5.0 (в декабре 2018 года) и заменил старый текстовый редактор TinyMCE. Теперь каждая часть страницы существует как блок — заголовок, параграф, цитата, изображение, таблица или фрагмент кода живут отдельно.
Это делает редактирование проще, а страницы — гибкими и адаптивными.

Контент должен одинаково хорошо отображаться на любых устройствах — от телефона до широкоформатного монитора. Когда сайт не адаптируется к экрану, текст «плывёт», изображения обрезаются, таблицы выходят за границы блока. Решается это с помощью адаптивной разметки, которая перестраивается автоматически.

В основе такой разметки лежит 12-колоночная сетка, ставшая стандартом благодаря фреймворкам Bootstrap и Foundation. Ширина контейнера делится на 12 равных частей (по 8.33 % каждая), и из них можно собрать практически любую структуру.

Пример:

1 колонка → [████████████] 100%
2 колонки → [██████][██████] 6/6
3 колонки → [████][████][████] 4/4/4
4 колонки → [███][███][███][███] 3/3/3/3

На мобильных устройствах колонки выстраиваются вертикально — контент остаётся читаемым при любой ширине экрана.

Как Gutenberg реализует сетку

Внутри Gutenberg идея 12-колоночной сетки реализована через блок «Колонки» (Columns),
который автоматически подстраивает расположение элементов под ширину экрана.
На уровне HTML это контейнеры с классами wp-block-columns и wp-block-column,
а в CSS используется Flexbox, который управляет выравниванием и поведением колонок.

Пример разметки:

<div class="wp-block-columns">
  <div class="wp-block-column">
    <p>Первая колонка</p>
  </div>
  <div class="wp-block-column">
    <p>Вторая колонка</p>
  </div>
</div>

CSS:

.wp-block-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 2em;
}
.wp-block-column {
  flex-grow: 1;
  flex-basis: 0;
}
@media (max-width: 600px) {
  .wp-block-columns {
    flex-direction: column;
  }
}

Проблема стандартного блока кода

Из всех блоков Gutenberg нас интересует блок кода.
Он используется для примеров программ, конфигураций и скриптов.
Технически это просто контейнер:

<pre> ... </pre>

Gutenberg и TinyMCE отображают его одинаково — как текст, набранный моноширинным шрифтом
(обычно Consolas, Courier New или Monaco), без подсветки и нумерации строк.
Для статей с примерами кода этого недостаточно — текст выглядит однообразно и труден для восприятия.
Чтобы сделать код более читаемым, можно использовать библиотеку Prism.js.

Что такое Prism.js

Prism.js — лёгкая библиотека для подсветки синтаксиса прямо в браузере.
Она не требует серверных модулей: JavaScript анализирует содержимое тегов <pre><code>...,
а CSS оформляет подсветку ключевых слов, строк, чисел и комментариев.

Поддерживаются десятки языков — от HTML и JavaScript до Python и Go,
а также множество плагинов: нумерация строк, кнопка копирования, отображение языка, выбор темы и др.

Пример:

<pre><code class="language-js">
function hello(name) {
  return `Hello, ${name}!`;
}

После подключения Prism.js этот код будет подсвечен автоматически.

Работа с дочерней темой

Перед добавлением Prism.js важно не редактировать родительскую тему напрямую.
Все изменения нужно вносить через дочернюю тему — это защитит ваш код при обновлениях.

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

Дочерняя тема решает эту проблему. Она наследует всё от родительской,
но хранит ваши изменения отдельно.

Создайте папку:

/wp-content/themes/mytheme-child/

Добавьте файл style.css:

/*
 Theme Name:   MyTheme Child
 Template:     mytheme
 Version:      1.0
*/

Поле Template должно совпадать с именем папки родительской темы.
Затем создайте functions.php:

<?php
add_action('wp_enqueue_scripts', 'child_enqueue_styles');
function child_enqueue_styles() {
    wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
    wp_enqueue_style('child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array('parent-style')
    );
}

Активируйте дочернюю тему через «Внешний вид → Темы»
и все дальнейшие изменения делайте только в ней.

Как пользоваться сайтом Prism.js

Когда дочерняя тема готова, перейдите на сайт библиотеки:
👉 https://prismjs.com

Выберите вкладку Download — это конструктор, где можно собрать собственную сборку библиотеки.

Настройка сборки

Compression level: выберите Minified
Languages: отметьте нужные языки — HTML, CSS, JavaScript, PHP, Python, JSON
Plugins: рекомендуется включить:
- Line Numbers
- Toolbar
- Copy to Clipboard Button
- (опционально) Show Language
- (опционально) Highlight Lines

После выбора нажмите:

DOWNLOAD JS — чтобы скачать prism.js
DOWNLOAD CSS — чтобы скачать prism.css

Поместите их в папку дочерней темы:

/wp-content/themes/my-child-theme/

Подключение Prism.js в WordPress

Добавьте в файл functions.php вашей темы:

add_action('wp_enqueue_scripts', 'theme_enqueue_prism_assets');
function theme_enqueue_prism_assets() {
    $version = '1.29.0';
    wp_enqueue_style('prism-css',
        get_stylesheet_directory_uri() . '/prism.css', [], $version);
    wp_enqueue_script('prism-js',
        get_stylesheet_directory_uri() . '/prism.js', [], $version, true);
}

После этого Prism начнёт подсвечивать код автоматически.

Автоматическая нумерация строк

Чтобы не добавлять класс вручную, можно использовать фильтр WordPress:

add_filter('render_block_core/code', 'theme_add_prism_line_numbers', 10, 2);
function theme_add_prism_line_numbers($content, $block) {
    return str_replace(
        '<pre class="wp-block-code">',
        '<pre class="wp-block-code line-numbers">',
        $content
    );
}

Экранирование HTML-символов

Если в коде есть символы < и >, браузер может воспринять их как HTML-теги.
Чтобы этого избежать, добавьте фильтр для автоматического экранирования:

add_filter('content_save_pre', 'theme_escape_code_on_save');
function theme_escape_code_on_save($content) {
    return preg_replace_callback(
        '/<code([^>]*)>(.*?)<\/code>/is',
        function ($m) {
            $attrs = $m[1];
            $code  = htmlspecialchars($m[2], ENT_NOQUOTES, 'UTF-8');
            return "<code{$attrs}>{$code}";
        },
        $content
    );
}

Стили оформления

Добавьте в style.css дочерней темы:

pre[class*="language-"] {
  border-radius: 6px;
  border: 1px solid #ddd;
  padding: 1em;
  background: #f6f8fa;
  font-family: 'Fira Code', Consolas, monospace;
  font-size: 14px;
  line-height: 1.6;
  overflow: auto;
}
pre[class*="language-"].line-numbers {
  padding-left: 3.8em;
}

Дополнительные возможности Prism.js

🔢 Нумерация строк — добавляет номера, как в IDE.
🧠 Подсветка отдельных строк — выделяйте строки с помощью data-line="2,4-5".
📋 Кнопка «Скопировать» — копирование кода одним кликом.
💡 Отображение языка — показывает над блоком название языка.
🌗 Тёмная и светлая темы — можно включить автоматическое переключение:

@media (prefers-color-scheme: dark) {
  body { background: #1e1e1e; color: #d4d4d4; }
}

🎨 Кастомизация цветов — при желании можно изменить палитру:

.token.keyword { color: #d73a49; font-weight: 600; }
.token.string  { color: #032f62; }
.token.comment { color: #6a737d; font-style: italic; }

До и после подключения Prism.js

До подключения

<pre><code>
function greet(name) {
  return `Hello, ${name}`;
}

Результат:

function greet(name) {
  return `Hello, ${name}`;
}

Код отображается моноширинным шрифтом, без подсветки и нумерации строк.

После подключения

<pre class="line-numbers"><code class="language-js">
function greet(name) {
  return `Hello, ${name}`;
}