2HUBS
  • WordPress

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

    highlight.js — это JavaScript-библиотека для подсветки кода.
    Она автоматически работает со всеми блоками вида <pre><code>...</code></pre> и отлично дружит с Gutenberg в WordPress.

    Если ты используешь стандартный блок Код , highlight.js сам определяет язык и применяет нужную подсветку. Никаких плагинов и ручной разметки — всё работает из коробки.

    Установка highlight.js

    Шаг 1. Скачиваем библиотеку

    Переходим на страницу загрузки highlight.js.

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

    Обычно для WordPress-проектов хватает:

    • PHP
    • JavaScript
    • CSS
    • HTML / XML
    • JSON
    • Bash

    Шаг 2. Выбираем тему оформления

    Переходим на страницу Demo.

    Выбираем подходящую тему и запоминаем её название — оно понадобится дальше.

    Шаг 3. Достаём нужные файлы

    Из архива нам понадобятся всего два файла:

    • highlight.min.js
    • CSS-файл темы (лежит в папке styles)

    Имейте в виду, что темы Base16 лежат в отдельной папке styles/base16.

    Кладём их, например, сюда:

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

    Шаг 4. Подключение в WordPress

    Подключаем highlight.js через functions.php.

     1function slug_enqueue_scripts() {
 2    // highlight.js
 3    if ( ! is_home() ) {
 4        wp_enqueue_style(
 5            'highlight',
 6            get_template_directory_uri() . '/assets/css/highlight.min.css',
 7            [],
 8            '1.0'
 9        );
10
11        wp_enqueue_script(
12            'highlight',
13            get_template_directory_uri() . '/assets/js/highlight.min.js',
14            [],
15            '1.0',
16            true
17        );
18
19        wp_register_script(
20            'highlight-init',
21            false,
22            [ 'highlight' ],
23            '1.0',
24            true
25        );
26
27        wp_enqueue_script( 'highlight-init' );
28        wp_add_inline_script( 'highlight-init', 'hljs.highlightAll();' );
29    }
30}
31
32add_action( 'wp_enqueue_scripts', 'slug_enqueue_scripts' );

    В этом примере:

    • скрипты подключаются везде, кроме главной страницы;
    • hljs.highlightAll() запускает подсветку сразу после загрузки страницы;
    • код можно легко адаптировать под нужные условия.

    Итог

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