Перейти до вмісту
> 💻 🧠 Код 1001 > 🧪📓 Без категорії > Підсвічування коду в WordPress за допомогою Gutenberg і Prism.js

Підсвічування коду в WordPress за допомогою Gutenberg і Prism.js

  • від

Коли ви створюєте контент у WordPress, зазвичай використовуєте редактор Gutenberg.
Він з’явився у WordPress 5.0 (у грудні 2018 року) й замінив старий текстовий редактор TinyMCE.

TinyMCE був простим редактором епохи Web 1.0 — поле <textarea> з кнопками «жирний», «курсив» і «посилання».
Весь текст зберігався суцільним HTML-потоком, що ускладнювало переміщення блоків або вставку елементів усередину.
Крім того, TinyMCE не підтримував адаптивну 12-колонкову сітку, яка стала стандартом де-факто в епоху Web 2.0.
Через це складні макети доводилося створювати вручну за допомогою HTML і CSS.

In Questo Articolo
  1. Gutenberg — редактор нового покоління
  2. Як Gutenberg реалізує сітку
  3. Проблема стандартного блоку коду
  4. Що таке Prism.js
  5. Робота з дочірньою темою
  6. Як користуватися сайтом Prism.js
  7. Підключення Prism.js до WordPress
  8. Автоматична нумерація рядків
  9. Екранування HTML-символів
  10. Стилі для блоків коду
  11. Додаткові можливості Prism.js
  12. До і після підключення Prism.js

Gutenberg — редактор нового покоління

Редактор Gutenberg вирішив ці проблеми.
Тепер кожна частина сторінки існує як блок — заголовок, абзац, цитата, зображення, таблиця або фрагмент коду.
Це спрощує редагування, а сторінки стають більш гнучкими та адаптивними.

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

Основою такої розмітки є 12-колонкова сітка, популяризована фреймворками Bootstrap і Foundation.
Ширина контейнера ділиться на 12 рівних частин (по 8.33 % кожна), і з них можна створити практично будь-який макет.

Приклад:

1 колонка  → [████████████] 100 %
2 колонки → [██████][██████] 6/6
3 колонки → [████][████][████] 4/4/4
4 колонки → [███][███][███][███] 3/3/3/3

На мобільних пристроях колонки автоматично розташовуються вертикально,
щоб контент залишався зручним і читабельним.

Як Gutenberg реалізує сітку

У Gutenberg сітка на 12 колонок реалізована через блок «Колонки»,
який автоматично підлаштовує розташування елементів під ширину екрана.
На рівні HTML це контейнери з класами wp-block-columns і wp-block-column,
а в CSS використовується Flexbox, що відповідає за вирівнювання та поведінку колонок.

Приклад:

<div class="wp-block-columns">
  <div class="wp-block-column">
    <p>Перша колонка</p>
  </div>
  <div class="wp-block-column">
    <p>Друга колонка</p>
  </div>
</div>

CSS:

.wp-block-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 2em;
}
.wp-block-column {
  flex-grow: 1;
  flex-basis: 0;
}
@media (max-width: 600px) {
  .wp-block-columns {
    flex-direction: column;
  }
}

Ця структура робить Gutenberg гнучким і забезпечує стабільне відображення сторінок на будь-яких пристроях.

Проблема стандартного блоку коду

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

<pre> ... </pre>

І Gutenberg, і TinyMCE показують його однаково — як текст моноширинним шрифтом
(зазвичай Consolas, Courier New або Monaco)
без підсвічування синтаксису та без нумерації рядків.

Для звичайного тексту цього достатньо, але в технічних статтях або посібниках
такий код складно читати.
Найпростіше рішення — використати Prism.js.

Що таке Prism.js

Prism.js — це легка бібліотека JavaScript для підсвічування синтаксису безпосередньо у браузері.
Вона не потребує серверної частини: скрипт аналізує вміст тегів <pre><code>...,
а файл стилів prism.css додає кольори для ключових слів, рядків, чисел і коментарів.

Prism підтримує десятки мов програмування — від HTML і JavaScript до Python і Go —
і має безліч плагінів: нумерація рядків, кнопка копіювання, позначення мови, світла й темна теми тощо.

Приклад:

<pre><code class="language-js">
function hello(name) {
  return `Hello, ${name}!`;
}

Після підключення Prism.js цей код буде автоматично підсвічений у браузері.

Робота з дочірньою темою

Перед тим як додавати Prism.js, не змінюйте безпосередньо файли батьківської теми.
Усі налаштування WordPress потрібно робити через дочірню тему.

Тема в WordPress керує зовнішнім виглядом сайту — шаблонами, стилями, меню, заголовками й підвалом.
Якщо змінювати активну тему напряму, наступне оновлення зітре всі ваші зміни.

Дочірня тема вирішує цю проблему: вона успадковує все від батьківської,
але зберігає ваші налаштування окремо, захищаючи їх від оновлень.

Створіть папку:

/wp-content/themes/my-child-theme/

Додайте файл style.css:

/*
 Theme Name:   My Theme Child
 Template:     mytheme
 Version:      1.0
*/

Поле Template повинно відповідати назві папки батьківської теми.
Потім створіть functions.php:

<?php
add_action('wp_enqueue_scripts', 'child_enqueue_styles');
function child_enqueue_styles() {
    wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
    wp_enqueue_style('child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array('parent-style')
    );
}

Активуйте тему в розділі Зовнішній вигляд → Теми
і виконуйте всі подальші зміни лише в дочірній темі.

Як користуватися сайтом Prism.js

Коли дочірня тема готова, перейдіть на офіційний сайт Prism.js:
👉 https://prismjs.com

Відкрийте вкладку Download — саме тут можна зібрати свою версію бібліотеки.

Рекомендовані налаштування

  1. Compression level: Minified
  2. Languages: HTML, CSS, JavaScript, PHP, Python, JSON
  3. Plugins:
    • Line Numbers
    • Toolbar
    • Copy to Clipboard Button
    • (необов’язково) Show Language
    • (необов’язково) Highlight Lines

Після цього завантажте:

  • DOWNLOAD JS → prism.js
  • DOWNLOAD CSS → prism.css

Розмістіть обидва файли у папці дочірньої теми:

/wp-content/themes/my-child-theme/

Підключення Prism.js до WordPress

Відкрийте functions.php і додайте:

add_action('wp_enqueue_scripts', 'theme_enqueue_prism_assets');
function theme_enqueue_prism_assets() {
    $version = '1.29.0';
    wp_enqueue_style('prism-css',
        get_stylesheet_directory_uri() . '/prism.css', [], $version);
    wp_enqueue_script('prism-js',
        get_stylesheet_directory_uri() . '/prism.js', [], $version, true);
}

Тепер Prism.js автоматично підсвічуватиме код у тегах
<pre><code>....

Автоматична нумерація рядків

Додайте фільтр WordPress, який автоматично вставлятиме нумерацію рядків:

add_filter('render_block_core/code', 'theme_add_prism_line_numbers', 10, 2);
function theme_add_prism_line_numbers($content, $block) {
    return str_replace(
        '<pre class="wp-block-code">',
        '<pre class="wp-block-code line-numbers">',
        $content
    );
}

Екранування HTML-символів

Якщо ваш код містить символи < або >, браузер може сприймати їх як HTML-теги.
Щоб цього уникнути, додайте фільтр, який автоматично екранує символи при збереженні запису:

add_filter('content_save_pre', 'theme_escape_code_on_save');
function theme_escape_code_on_save($content) {
    return preg_replace_callback(
        '/<code([^>]*)>(.*?)<\/code>/is',
        function ($m) {
            $attrs = $m[1];
            $code  = htmlspecialchars($m[2], ENT_NOQUOTES, 'UTF-8');
            return "<code{$attrs}>{$code}";
        },
        $content
    );
}

Стилі для блоків коду

Додайте ці стилі у файл style.css вашої дочірньої теми:

pre[class*="language-"] {
  border-radius: 6px;
  border: 1px solid #ddd;
  padding: 1em;
  background: #f6f8fa;
  font-family: 'Fira Code', Consolas, monospace;
  font-size: 14px;
  line-height: 1.6;
  overflow: auto;
}
pre[class*="language-"].line-numbers {
  padding-left: 3.8em;
}

Додаткові можливості Prism.js

  • 🔢 Нумерація рядків — додає номери, як у середовищах розробки.
  • 🧠 Підсвічування рядків — використовуйте data-line="2,4-5" для виділення певних рядків.
  • 📋 Кнопка «Скопіювати» — копіює код одним кліком.
  • 💡 Відображення мови — показує назву мови над блоком коду.
  • 🌗 Темна і світла теми — автоматичне перемикання:
@media (prefers-color-scheme: dark) {
  body { background: #1e1e1e; color: #d4d4d4; }
}
  • 🎨 Налаштування кольорів — змінюйте кольори токенів у вашому style.css:
.token.keyword { color: #d73a49; font-weight: 600; }
.token.string  { color: #032f62; }
.token.comment { color: #6a737d; font-style: italic; }

До і після підключення Prism.js

До

<pre><code>
function greet(name) {
  return `Hello, ${name}`;
}

Результат:

function greet(name) {
  return `Hello, ${name}`;
}

Моноширинний текст, без кольорів і нумерації.

Після

<pre class="line-numbers"><code class="language-js">
function greet(name) {
  return `Hello, ${name}`;
}

Результат:

1 function greet(name) {
2   return `Hello, ${name}`;
3 }

Кожен рядок пронумерований, код підсвічений,
а у верхньому куті з’являється кнопка Copy для швидкого копіювання.

Prism.js робить фрагменти коду зрозумілими та зручними для читання.
Він працює повністю у браузері, без додаткових плагінів,
і не впливає на швидкодію сайту.
Після налаштування ваш код виглядатиме охайно, структуровано й професійно.

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

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