Когда мы создаем контент WordPress, чаще всего используем редактор Gutenberg. Он появился в версии WordPress 5.0 (в декабре 2018 года) и заменил старый добрый TinyMCE. TinyMCE был текстовым редактором из эпохи Web 1.0: над полем <textarea> находились простые кнопки вроде «жирный», «курсив» и «ссылка».
Весь текст хранился одной сплошной лентой HTML-кода, и переместить блок или вставить что-то посередине было неудобно. Кроме того, TinyMCE не поддерживал адаптивную 12-колоночную разметку, которая стала стандартом де-факто во времена Web 2.0, поэтому сложные макеты приходилось строить вручную с помощью HTML и CSS.
Gutenberg — редактор нового поколения
Gutenberg решил эти проблемы. Теперь каждая часть страницы существует как блок — заголовок, параграф, цитата, изображение, таблица или фрагмент кода живут отдельно. Это делает редактирование проще, а страницы — гибкими и адаптивными.
Контент должен одинаково хорошо выглядеть на любых устройствах — от телефона до широкоформатного монитора. Когда сайт не адаптируется к экрану, текст «плывёт», изображения обрезаются, а таблицы вылезают за границы блока. Решается это с помощью адаптивной разметки, которая автоматически перестраивается под ширину экрана.
В основе такой разметки лежит 12-колоночная сетка. Она стала стандартом благодаря фреймворкам вроде Bootstrap и Foundation, и Gutenberg использует тот же принцип: ширина контейнера делится на 12 равных частей (по 8.33 % каждая), из которых можно собрать практически любую компоновку:
1 колонка → [████████████] 100%
2 колонки → [██████][██████] 6/6
3 колонки → [████][████][████] 4/4/4
4 колонки → [███][███][███][███] 3/3/3/3
На мобильных устройствах колонки выстраиваются вертикально — контент остаётся читаемым при любой ширине экрана.
Внутри Gutenberg эта идея реализована через блок “Колонки” (Columns), который автоматически подстраивает расположение элементов под ширину окна.
На уровне HTML это контейнеры с классами wp-block-columns и wp-block-column, а за выравнивание отвечает Flexbox:
<div class="wp-block-columns">
<div class="wp-block-column"><p>Первая колонка</p></div>
<div class="wp-block-column"><p>Вторая колонка</p></div>
</div>
.wp-block-columns {
display: flex;
flex-wrap: wrap;
gap: 2em;
}
.wp-block-column {
flex-grow: 1;
flex-basis: 0;
min-width: 0;
}
@media (max-width: 600px) {
.wp-block-columns { flex-direction: column; }
}
Одна и та же страница выглядит корректно и на телефоне, и на мониторе — без единой строчки JavaScript.
Блок кода в Gutenberg
Из всех возможностей редактора нас интересует один элемент — блок кода. Он используется, когда нужно показать пример программы, скрипта, конфигурации или команду терминала.
Технически это простой HTML-контейнер:
<pre> ... </pre>
Gutenberg и TinyMCE отображают его одинаково — как текст, набранный моноширинным шрифтом (чаще всего Consolas, Courier New или Monaco). Без подсветки, без нумерации строк, без выделения синтаксиса.
Это решение логично: большинству пользователей подсветка не нужна, а включи её для всех — редактор стал бы тяжелее. Но если вы публикуете примеры кода, инструкции или статьи для разработчиков, отсутствие подсветки делает материал трудно читаемым. Здесь на помощь приходит библиотека Prism.js.
Prism.js — библиотека для подсветки кода
Prism.js — лёгкая и быстрая библиотека, созданная специально для подсветки синтаксиса на веб-страницах. Она не перегружает редактор и делает статьи с кодом читаемыми и профессионально оформленными. Таже она не требует серверных модулей и работает полностью в браузере: скрипт на JavaScript анализирует содержимое тегов <pre><code>...</code></pre>, а таблица стилей prism.css раскрашивает ключевые слова, строки, комментарии и другие элементы кода.
По сути, Prism делает для веб-страниц то же, что IDE делает для программистов — делает код понятным и визуально структурированным.
Поддерживаются десятки языков программирования — от HTML, CSS и JavaScript до Python, PHP и Go — и множество плагинов: нумерация строк, подсветка отдельных строк, отображение языка, копирование в буфер, тёмные и светлые темы.
Пример разметки:
<pre><code class="language-js">
function hello(name) {
return `Hello, ${name}!`;
}
</code></pre>
После подключения prism.js и prism.css код подсвечивается автоматически — без дополнительного вмешательства.
Prism отлично сочетается с Gutenberg, потому что работает на этапе отображения статьи, не требуя изменений самого редактора.
Как подключить Prism.js к WordPress
Подключить Prism.js к WordPress можно в несколько шагов — быстро и без плагинов.
Шаг 1. Скачиваем сборку
Сайт: https://prismjs.com/download.html
Рекомендуемые настройки:
- Compression level: Minified
- Languages: HTML, CSS, JavaScript, PHP, Python, JSON
- Plugins: Line Numbers, Toolbar, Copy to Clipboard Button
Скачайте prism.js и prism.css, затем поместите их в папку дочерней темы:
/wp-content/themes/my-child-theme/
Шаг 2. Подключаем через functions.php
<?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);
}
Шаг 3. Автоматическая нумерация строк
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);
}
Шаг 4. Экранирование 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}</code>";
},
$content
);
}
Шаг 5. Добавляем стили
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;
}
Дополнительные возможности
🔢 Нумерация строк
Добавляет номера строк, как в IDE.
🧠 Подсветка отдельных строк
Используйте data-line:
<pre class="line-numbers" data-line="2,4-5"><code class="language-python">...</code></pre>
📋 Кнопка «Скопировать»
Плагин Copy to Clipboard добавляет кнопку для быстрого копирования кода.
💡 Отображение языка
Плагин Show Language показывает название языка над блоком.
🌗 Тёмная и светлая темы
Prism поддерживает десятки тем, можно включить автоматическое переключение:
@media (prefers-color-scheme: dark) {
body { background: #1e1e1e; color: #d4d4d4; }
}
🎨 Кастомизация
Любые цвета можно изменить в style.css:
.token.keyword { color: #d73a49; font-weight: 600; }
.token.string { color: #032f62; }
.token.comment { color: #6a737d; font-style: italic; }
Итог
Теперь Gutenberg умеет красиво отображать код.
- Скачать Prism.js
- Поместить файлы в тему
- Подключить через
functions.php - Добавить фильтры
- Настроить стили
- (Опционально) включить плагины — нумерация, копирование, язык
До и после Prism.js
До подключения:
<pre><code>
function greet(name) {
return `Hello, ${name}`;
}
</code></pre>
После подключения:
function greet(name) {
return `Hello, ${name}`;
}
Код подсвечен, пронумерован, с кнопкой «Copy» и без проблем с HTML-символами.