Как создать блок для вставки кода с подсветкой синтаксиса в WordPress

В современных сайтах на WordPress часто возникает необходимость вставлять фрагменты кода с подсветкой синтаксиса. Особенно это актуально для технических блогов и ресурсов, таких как wpstock.ru. В этой статье разберём, как создать собственный блок Gutenberg для вставки кода с подсветкой, используя JavaScript, а также рассмотрим полезные плагины и практические советы по интеграции.

Почему нужен собственный блок для кода? Преимущества и возможности

Стандартный блок "Код" в редакторе Gutenberg довольно ограничен: он не поддерживает подсветку синтаксиса и не всегда удобно настраивается под разные языки программирования. Создание собственного блока позволяет:

• Добавлять подсветку синтаксиса с помощью библиотек Prism.js, Highlight.js или других;
• Выбирать язык программирования с помощью выпадающего списка;
• Настраивать стили отображения кода;
• Обеспечивать совместимость с темой сайта и плагинами;
• Улучшать UX автора и читателя.

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

Выбор библиотеки для подсветки синтаксиса

Для подсветки кода можно использовать разные JavaScript-библиотеки. Наиболее популярные:

• Prism.js — лёгкая, модульная, поддерживает множество языков, легко кастомизируется.
• Highlight.js — автоматически определяет язык, большой набор стилей, широко используется.
• CodeMirror — мощный редактор с подсветкой, подходит для сложных редакторов.

Для простого блока с подсветкой чаще всего выбирают Prism.js из-за простоты интеграции и небольшого веса.

Создание собственного блока Gutenberg с подсветкой синтаксиса

Рассмотрим пример создания блока с использованием Prism.js. Для этого необходимо зарегистрировать блок в JavaScript и подключить стили Prism.js.

Подключение Prism.js и стилей

Скачайте Prism.js с официального сайта или подключите через CDN в файле functions.php вашей темы или плагина:

function wpstock_enqueue_prism() {
  wp_enqueue_style('prism-css', 'https://cdn.jsdelivr.net/npm/prismjs/themes/prism.css', array(), '1.0');
  wp_enqueue_script('prism-js', 'https://cdn.jsdelivr.net/npm/prismjs/prism.js', array(), '1.0', true);
}
add_action('enqueue_block_assets', 'wpstock_enqueue_prism');

Регистрация блока в JavaScript

Создайте файл block.js с кодом блока:

const { registerBlockType } = wp.blocks;
const { TextareaControl, SelectControl } = wp.components;
const { useState, useEffect } = wp.element;

registerBlockType('wpstock/code-highlight', {
    title: 'Код с подсветкой',
    icon: 'editor-code',
    category: 'widgets',
    attributes: {
        codeContent: { type: 'string', default: '' },
        language: { type: 'string', default: 'javascript' }
    },
    edit: (props) => {
        const { attributes: { codeContent, language }, setAttributes } = props;

        useEffect(() => {
            // Обновляем подсветку после каждого изменения
            Prism.highlightAll();
        }, [codeContent, language]);

        return (
            <div>
                <SelectControl
                    label="Язык программирования"
                    value={language}
                    options={[
                        { label: 'JavaScript', value: 'javascript' },
                        { label: 'PHP', value: 'php' },
                        { label: 'HTML', value: 'markup' },
                        { label: 'CSS', value: 'css' },
                        { label: 'Python', value: 'python' },
                    ]}
                    onChange={(newLang) => setAttributes({ language: newLang })}
                />
                <TextareaControl
                    label="Код"
                    value={codeContent}
                    onChange={(newCode) => setAttributes({ codeContent: newCode })}
                    rows={10}
                />
                <pre><code className={`language-${language}`}>{codeContent}