Подсветка кода в WordPress с помощью highlight.js

Введение

Для ведения технических блогов и документации на WordPress стандартный блок Gutenberg «Код» не имеет встроенной подсветки синтаксиса. Установка массивных плагинов ради одной этой функции перегружает фронтенд стилями и скриптами.

• Проблема: плагины подсветки кода часто добавляют мегабайты неиспользуемых языков, тянут устаревшие зависимости и замедляют загрузку страниц.
• Решение: подключить легковесную сборку highlight.js напрямую в тему без плагинов, выбрав только необходимые языки и тему оформления.
• Результат: автоматическая подсветка стандартных блоков <pre><code> в Gutenberg с минимальным размером бандла и загрузкой только на страницах со статьями.

1. Подготовка файлов библиотеки

Библиотека highlight.js позволяет собрать кастомный минималистичный архив без лишних синтаксических определений.

1.1. Выбор языков и темы

1. Перейдите на страницу загрузки highlight.js и отметьте только нужные языки (для веб-разработки обычно достаточно: PHP, JavaScript, CSS, HTML/XML, JSON, Bash).
2. Выберите тему оформления на странице демо highlight.js.
3. Из скачанного архива извлеките два файла:
   • highlight.min.js — ядро библиотеки;
   • CSS-файл выбранной темы из каталога styles/ (или styles/base16/).

1.2. Размещение в каталоге темы

Поместите подготовленные файлы в директорию вашей темы оформления:

• assets/js/highlight.min.js
• assets/css/highlight.min.css

2. Подключение и автоинициализация в теме

Добавьте регистрацию ассетов в файл functions.php вашей темы. Скрипты подключаются с атрибутом defer в футере и только для внутренних страниц, исключая главную:

function custom_enqueue_code_highlighting() {
    // Подключаем только на страницах записей и статей
    if ( is_singular() ) {
        wp_enqueue_style(
            'highlight-style',
            get_theme_file_uri( 'assets/css/highlight.min.css' ),
            [],
            '11.9.0'
        );

        wp_enqueue_script(
            'highlight-js',
            get_theme_file_uri( 'assets/js/highlight.min.js' ),
            [],
            '11.9.0',
            [ 'in_footer' => true, 'strategy' => 'defer' ]
        );

        // Инициализация подсветки после загрузки DOM
        wp_add_inline_script(
            'highlight-js',
            'hljs.highlightAll();'
        );
    }
}
add_action( 'wp_enqueue_scripts', 'custom_enqueue_code_highlighting' );

После добавления кода стандартный блок Gutenberg Код начнет автоматически подсвечиваться в соответствии с выбранной темой.

Вывод

Интеграция highlight.js напрямую через функционал темы дает максимальный контроль:

1. Минимальный вес: кастомная сборка с 5–6 языками весит около 30–40 КБ против сотен килобайт универсальных плагинов.
2. Нулевая рутина: разметка стандартного блока Gutenberg подхватывается автоматически, не требуя ввода шорткодов.
3. Чистый DOM: библиотека инициализируется асинхронно через атрибут defer и не блокирует отрисовку основного контента (LCP).
4. Универсальность: отличное решение для блога, базы знаний и технических статей на WordPress.