Перейти до вмісту
> 💻 🧠 Код 1001 > 📑 Шпаргалки > 🌐 Шпаргалки по WordPress > Як поєднати редактор Gutenberg із підсвічуванням синтаксису Prism у WordPress

Як поєднати редактор Gutenberg із підсвічуванням синтаксису Prism у WordPress

Стандартний блок «Код» у редакторі Gutenberg — це спартанський інструмент. Він відображає код моноширинним шрифтом, але не дає ні підсвічування синтаксису, ні нумерації рядків, ні зручної кнопки для копіювання. Це робить читання коду на сторінці втомливим, а сайт виглядає менш професійно.

На щастя, цю проблему легко вирішує Prism.js — легка, швидка і розширювана бібліотека для підсвічування синтаксису.

У цьому посібнику ми крок за кроком інтегруємо Prism.js у вашу WordPress-тему так, щоб будь-який блок коду, який ви додаєте в Gutenberg, автоматично отримував красиве підсвічування, номери рядків і кнопку «Копіювати».

In Questo Articolo

Дочірня тема (важливо)

Усі зміни ми будемо вносити в дочірню тему. Це критично важливий крок у будь-якій кастомізації WordPress. Чому? Якщо ви внесете зміни безпосередньо у файли батьківської теми, вся ваша праця буде стерта при її наступному оновленні. Дочірня тема успадковує все від батьківської, але дозволяє безпечно додавати свої стилі та функції.

(У цій статті ми не будемо заглиблюватися в процес створення дочірньої теми. Ми припускаємо, що у вас вже є активна дочірня тема. Якщо ні, ви можете прочитати про це у статті: «Як створити та налаштувати дочірню тему у WordPress».)

Крок 1: Готуємо структуру файлів

У теці вашої активної дочірньої теми нам знадобляться наступні файли. Якісь із них у вас вже є, якісь ми створимо.

  1. prism.js — Сама бібліотека Prism, яку ми завантажимо.
  2. prism.css — Стандартна тема оформлення для Prism.
  3. prism-init.js — Наш невеликий скрипт-помічник, який буде все «оживляти».
  4. functions.php — Головний файл для додавання функціоналу у WordPress.
  5. style.css — Основний файл стилів вашої дочірньої теми, куди ми додамо правки.

Крок 2: Завантажуємо правильну збірку Prism.js

Це ключовий момент. Prism — модульна бібліотека, і нам потрібно завантажити версію, яка включає всі необхідні нам функції.

  1. Перейдіть на офіційну сторінку завантаження: Prism.js Download.
  2. На сторінці виберіть:
    • Рівень стиснення (Compression level): Minified (для швидкого завантаження на сайті).
    • У розділі Languages позначте галочками ті мови, які вам потрібні. Для прикладу, обов’язково виберіть Python.
    • Прокрутіть нижче до розділу Plugins і позначте галочками три плагіни:
      • Line Numbers (для нумерації рядків).
      • Copy to Clipboard Button (для кнопки «Копіювати»).
      • Normalize Whitespace (корисний плагін для коректного відображення відступів).
  3. Натисніть сині кнопки DOWNLOAD JS і DOWNLOAD CSS.
  4. Розмістіть завантажені файли prism.js і prism.css в кореневу теку вашої дочірньої теми.

Крок 3: Створюємо скрипт-ініціалізатор

Бібліотека Prism не починає працювати сама по собі. Їй потрібно сказати, коли і як це зробити. Також, плагін кнопки «Копіювати» вимагає, щоб ми самі створили цю кнопку. Наш скрипт-помічник зробить і те, й інше.

Створіть у теці теми файл prism-init.js і вставте в нього наступний код:

/**
 * Файл: prism-init.js
 * Призначення: Ініціалізація підсвічування Prism.js та додавання кнопок "Копіювати".
 */
document.addEventListener("DOMContentLoaded", function () {
    // Перевіряємо, чи була завантажена основна бібліотека Prism
    if (typeof Prism === 'undefined') {
        console.error("Критична помилка: Бібліотека Prism.js не завантажена.");
        return;
    }

    // Запускаємо підсвічування для всіх блоків коду на сторінці.
    Prism.highlightAll();

    // Додаємо кнопку "Копіювати" до кожного блоку
    const codeBlocks = document.querySelectorAll('pre[class*="language-"]');
    codeBlocks.forEach(preElement => {
        if (preElement.querySelector('.code-copy-btn')) { return; }
        const codeElement = preElement.querySelector('code');
        if (!codeElement) { return; }

        const button = document.createElement('button');
        button.className = 'code-copy-btn';
        button.type = 'button';
        button.innerText = 'Копіювати';
        button.setAttribute('aria-label', 'Копіювати код у буфер обміну');

        button.addEventListener('click', () => {
            navigator.clipboard.writeText(codeElement.innerText).then(() => {
                button.innerText = 'Скопійовано!';
                button.disabled = true;
                setTimeout(() => {
                    button.innerText = 'Копіювати';
                    button.disabled = false;
                }, 2000);
            }).catch(err => {
                console.error('Помилка копіювання: ', err);
                button.innerText = 'Помилка';
            });
        });

        preElement.appendChild(button);
    });
});

Крок 4: Підключаємо все у functions.php

Тепер нам потрібно сказати WordPress, щоб він завантажував наші нові CSS і JS файли. А також додати «магію», яка буде автоматично готувати блоки коду з Gutenberg для обробки Prism.

Відкрийте ваш файл functions.php і додайте в нього наступний код:

<?php
// 1. Підключення стилів батьківської та дочірньої теми
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    // CSS батьківської теми (напр., Neve)
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

    // Основний CSS дочірньої теми
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( 'parent-style' ),
        wp_get_theme()->get('Version')
    );

    // CSS для Prism
    wp_enqueue_style(
        'prism-css',
        get_stylesheet_directory_uri() . '/prism.css',
        array( 'child-style' ),
        '1.29.0' // Версія для прикладу
    );
}

// 2. Підключення Prism.js та наших кастомних скриптів
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_scripts' );
function my_theme_enqueue_scripts() {
    // Prism JS
    wp_enqueue_script(
        'prism-js',
        get_stylesheet_directory_uri() . '/prism.js',
        array(),
        '1.29.0', // Версія для прикладу
        true
    );

    // Кастомний скрипт ініціалізації
    wp_enqueue_script(
        'prism-init-js',
        get_stylesheet_directory_uri() . '/prism-init.js',
        array( 'prism-js' ),
        wp_get_theme()->get('Version'),
        true
    );
}

// 3. Автоматичне додавання класів для блоків коду
add_filter( 'the_content', 'auto_format_code_blocks', 9 );
function auto_format_code_blocks( $content ) {
    // Звичайні блоки <pre><code>
    $content = preg_replace_callback(
        '/\<pre\>(\<code[^>]*\>)/',
        function ( $matches ) {
            return '\<pre class="line-numbers"\>\<code class="language-python line-numbers"\>';
        },
        $content
    );

    // Блоки Gutenberg <pre class="wp-block-code"><code>
    $content = preg_replace_callback(
        '/\<pre class="wp-block-code([^"]*)"\>(\<code[^>]*\>)/',
        function ( $matches ) {
            return '\<pre class="wp-block-code' . $matches[1] . ' line-numbers"\>\<code class="language-python line-numbers"\>';
        },
        $content
    );

    return $content;
}
?>

Крок 5: Фінальні штрихи у style.css

Стандартні стилі Prism і вашої теми можуть конфліктувати, призводячи до появи небажаних скролбарів. Давайте це виправимо.

Додайте в кінець вашого файлу style.css наступний код:

/*
 Prism.js: Виправлення та покращення
*/

/* 1. Прибираємо всі скролбари і дозволяємо перенесення рядків */
pre[class*="language-"] {
    white-space: pre-wrap !important;   /* Дозволяє перенесення рядків */
    word-break: break-word;             /* Розриває довгі слова */
    max-height: none !important;        /* Прибирає обмеження по висоті від батьківської теми */
    overflow: hidden !important;        /* Приховує будь-які скролбари */
}

/* 2. Стилі для кнопки "Копіювати" */
.code-copy-btn {
    position: absolute;
    right: 12px;
    top: 12px;
    background: #e7e7e7;
    border: none;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 13px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.3s ease;
}

pre:hover .code-copy-btn {
    opacity: 1;
}

Ми отримали повністю автоматичний інструмент для підсвічування синтаксису коду. Просто додавайте код через стандартний інтерфейс WordPress.

Позначки:

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *