Как настроить цветную подсветку кода в статьях WordPress

Введение

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

Используемые технологии

Prism.js — лёгкая библиотека подсветки синтаксиса
Prism Autoloader — автоматическое определение языка по классу
Тема Prism Tomorrow — тёмная цветовая схема
Кастомные CSS-стили — оформление блоков и инлайн-кода

prism-js">Шаг 1: Подключение Prism.js

Скрипты и стили подключаются в файле inc/core/class-dekanpro-enqueue-scripts.php:

// Enqueue Prism.js for syntax highlighting.
wp_enqueue_style(
    'prism-theme',
    'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css',
    array(),
    '1.29.0'
);
wp_enqueue_script(
    'prism-core',
    'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js',
    array(),
    '1.29.0',
    true
);
wp_enqueue_script(
    'prism-autoloader',
    'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js',
    array('prism-core'),
    '1.29.0',
    true
);

Что здесь важно:

prism-tomorrow.min.css — цветовая схема «завтра», тёмный фон с контрастными цветами
prism.min.js — основная библиотека, разбирает разметку и подсвечивает элементы
prism-autoloader — подгружает поддержку языка по классу language-xxx, не нужно подключать каждый язык отдельно

Шаг 2: Разметка кода в редакторе

Для подсветки нужно обернуть код в <pre><code> и указать класс языка:

<pre><code class="language-javascript">
function hello() {
    console.log('Привет!');
}
</code></pre>

Доступные классы (Prism Autoloader подгружает нужный язык автоматически):

language-javascript или language-js
language-php
language-css
language-html
language-python
language-sql
и другие — полный список на prismjs.com

Шаг 3: Кастомные стили блоков кода

В файле custom-modern.css добавлено оформление блоков кода в стиле «окна терминала»:

/* Блоки кода - красивый стиль */
.entry-content pre {
    background: linear-gradient(135deg, #1a1b26 0%, #24283b 100%) !important;
    border-radius: 1rem !important;
    padding: 3rem 1.5rem 1.5rem !important;
    margin: 2rem 0 !important;
    overflow-x: auto;
    position: relative;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.entry-content pre::before {
    content: '';
    position: absolute;
    top: 1rem;
    left: 1.25rem;
    width: 12px;
    height: 12px;
    background: #ff5f56;
    border-radius: 50%;
    box-shadow: 20px 0 0 #ffbd2e, 40px 0 0 #27ca40;
}

.entry-content pre code {
    background: transparent !important;
    color: #c9d1d9 !important;
    font-family: 'SF Mono', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', monospace !important;
    font-size: 2rem !important;
    line-height: 1.6 !important;
    display: block;
    white-space: pre !important;
    overflow-x: auto;
}

Что дают эти стили:

Тёмный градиентный фон — (#1a1b26 → #24283b)
Точки сверху — псевдоэлемент ::before рисует красную, жёлтую и зелёную точки как в окне macOS
Увеличенный шрифт — 2rem для удобного чтения
Моноширинный шрифт — SF Mono, Monaco, Consolas

Шаг 4: Стили инлайн-кода

Для коротких фрагментов кода в тексте (например, wp_enqueue_script) используется инлайн-стиль:

.entry-content code:not(pre code) {
    background: rgba(99, 102, 241, 0.12) !important;
    color: #7c3aed !important;
    padding: 0.2rem 0.5rem !important;
    border-radius: 0.375rem !important;
    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace !important;
    font-size: 0.9em !important;
    font-weight: 500;
    border: 1px solid rgba(99, 102, 241, 0.2);
}

Селектор code:not(pre code) применяет стили только к <code>, которые не находятся внутри <pre>. В результате блоки кода остаются тёмными, а короткие вставки в тексте — с фиолетовым фоном.

Как это работает

prism-skaniruet-stranitsu">1. Prism сканирует страницу

При загрузке страницы Prism.js находит все элементы <pre><code class="language-xxx">.

2. Autoloader подгружает язык

Autoloader по классу language-javascript загружает грамматику JavaScript и разбивает код на токены: ключевые слова, строки, комментарии, функции и т.д.

3. Подсветка

Каждый токен оборачивается в <span class="token xxx">. CSS-тема Prism Tomorrow задаёт цвет для каждого типа токена.

Пример результата

Тот же фрагмент в блоке:

// Комментарий
function greet(name) {
    return 'Привет, ' + name + '!';
}
console.log(greet('Мир'));

Ключевые слова (function, return), строки в кавычках и комментарии подсвечиваются разными цветами автоматически.

Практические советы

Экранирование в HTML

В блоке кода символы < и > нужно писать как < и >, иначе браузер воспримет их как теги.

gutenberg">В редакторе Gutenberg

Используйте блок «Код» и в настройках справа выберите язык. WordPress добавит нужный класс автоматически.

В классическом редакторе

Режим «Текст» (HTML) — вручную добавляйте class="language-php" (или другой язык) к тегу <code>.

Заключение

Цветная подсветка кода в статьях реализована через:

подключение Prism.js и Autoloader в теме
разметку <pre><code class="language-xxx">
кастомные стили в custom-modern.css для тёмного блока с «кнопками» и инлайн-кода

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