Как реализовать выделение синтаксиса в визуальном редакторе WordPress

Для многих разработчиков и блогеров, публикующих технический контент, очень важно иметь возможность удобно форматировать и выделять код прямо в визуальном редакторе WordPress. В этой статье мы рассмотрим, как добавить подсветку синтаксиса в редактор Gutenberg, а также на фронтенде сайта, используя популярные плагины и собственные решения с примерами кода.

Почему нужна подсветка синтаксиса в WordPress

Подсветка синтаксиса облегчает восприятие кода, делает статьи более профессиональными и удобными для чтения. Без неё код в постах выглядит как обычный текст, что может сбивать с толку и усложнять понимание.

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

Плагины для подсветки синтаксиса в WordPress

1. SyntaxHighlighter Evolved

Один из самых популярных и простых плагинов. Он добавляет подсветку синтаксиса на основе JavaScript-библиотеки SyntaxHighlighter. Поддерживает множество языков программирования и легко интегрируется с Gutenberg.

Установка и использование:

1. Установите плагин через админку WordPress или скачайте с официального репозитория.
2. Активируйте плагин.
3. Добавьте блок Код в редакторе и выберите язык программирования в настройках блока.
4. Плагин автоматически применит подсветку при выводе на сайте.

2. Prism Syntax Highlighter

Этот плагин использует легковесную и современную библиотеку Prism.js. Он позволяет гибко настраивать темы и языки, а также поддерживает расширение функционала.

Плюс в том, что Prism легко кастомизируется, и вы можете подключить свои темы или плагины.

Как добавить подсветку синтаксиса вручную с помощью Prism.js

Если вы хотите минимизировать использование плагинов и сделать решение более легковесным, можно подключить Prism.js самостоятельно.

Подключение скриптов и стилей в functions.php

function journalx_enqueue_prism() {
    wp_enqueue_style('prism-css', 'https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism.css', array(), '1.29.0');
    wp_enqueue_script('prism-js', 'https://cdn.jsdelivr.net/npm/prismjs@1.29.0/prism.min.js', array(), '1.29.0', true);
}
add_action('wp_enqueue_scripts', 'journalx_enqueue_prism');

Этот код подключит стили и скрипт Prism.js на фронтенд вашего сайта.

Использование блоков кода с классами языков

В редакторе Gutenberg можно использовать блок Код, и добавить класс языку, например language-php, language-js или language-css. Prism автоматически применит подсветку при загрузке страницы.

Подсветка синтаксиса в редакторе Gutenberg (backend)

Для того чтобы видеть подсветку прямо в редакторе, понадобится подключить Prism или другую библиотеку и на backend.

function journalx_enqueue_prism_backend() {
    wp_enqueue_style('prism-css', 'https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism.css', array(), '1.29.0');
    wp_enqueue_script('prism-js', 'https://cdn.jsdelivr.net/npm/prismjs@1.29.0/prism.min.js', array('wp-blocks', 'wp-element'), '1.29.0', true);
}
add_action('enqueue_block_editor_assets', 'journalx_enqueue_prism_backend');

Это позволит вам видеть подсветку прямо в Gutenberg, что повышает удобство редактирования технических статей.

Советы по улучшению опыта использования подсветки

• Выбирайте подходящую тему: Prism и SyntaxHighlighter поддерживают множество тем — от светлых до темных. Выбирайте тему, которая подходит под дизайн вашего сайта и комфортна для глаз.
• Минимизируйте количество подключаемых языков: Подключайте только те языки, которые вам действительно нужны, чтобы не замедлять загрузку страниц.
• Используйте шорткоды: Если нужно часто вставлять код с подсветкой, можно создать удобный шорткод для обёртки кода с нужными классами.

Пример шорткода для подсветки синтаксиса

function journalx_syntax_highlight_shortcode($atts, $content = null) {
    $atts = shortcode_atts(array('lang' => 'markup'), $atts);
    $lang = esc_attr($atts['lang']);
    $content = esc_html($content);
    return '<pre class="language-'. $lang .'"><code>' . $content . '</code></pre>';
}
add_shortcode('codehighlight', 'journalx_syntax_highlight_shortcode');

Использование в статье:

[codehighlight lang="php"]<?php echo 'Hello, JournalX!'; ?>[/codehighlight]

Такой шорткод удобно применять для вставки кода с подсветкой, при этом не требуется каждый раз вручную прописывать HTML.

Интеграция с плагином Clearfy Pro для оптимизации

Если вы используете плагин Clearfy Pro, он поможет оптимизировать загрузку скриптов и стилей, в том числе и подсветки синтаксиса, отключая их на страницах, где они не нужны.

Это поможет ускорить загрузку сайта и снизить нагрузку на сервер.

Итоги

Подсветка синтаксиса в WordPress — важный элемент для технических блогов и сайтов с кодом. Используйте готовые плагины, либо подключайте библиотеки самостоятельно, чтобы обеспечить удобство чтения и редактирования. Настройте подсветку в редакторе и на фронтенде — это повысит качество контента и привлечёт аудиторию.

Если хочется упростить управление и оптимизацию — рассмотрите возможность использования Clearfy Pro для контроля загрузки ресурсов.