Что такое Prism.js и как подключить его в WordPress

Prism.js — это лёгкая, расширяемая библиотека JavaScript для подсветки синтаксиса кода. Используется в блогах, документации и dev-проектах для улучшения читаемости примеров кода. Поддерживает десятки языков и тему оформления.

Зачем использовать Prism.js

• Подсветка кода в статьях и документации
• Минимальный вес и высокая производительность
• Поддержка кастомных тем и плагинов (строки, копирование и т.д.)
• Работает без jQuery и не требует серверной обработки

Как работает Prism.js

Принцип работы основан на добавлении классов к тегам <pre><code> и использовании CSS для подсветки. JavaScript скрипт разбирает DOM и применяет нужную раскраску.

sudo apt install nginx

Как подключить Prism.js в WordPress

1. Установка вручную через functions.php

Добавить скрипты и стили в файл functions.php активной темы:

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

Для поддержки нужных языков можно подключать отдельные компоненты:

wp_enqueue_script('prism-bash', 'https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-bash.min.js', array('prism-js'), null, true);

2. Добавление через плагин Code Snippets

Альтернатива правке темы — плагин Code Snippets. Создать сниппет с тем же кодом из примера выше и активировать его на фронте.

3. Подключение темы подсветки

Можно заменить тему оформления на любую из официальных:

• prism.css — светлая
• prism-tomorrow.css — тёмная
• prism-okaidia.css — контрастная

Список тем: cdnjs.com/libraries/prism

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

В редакторе WordPress используйте HTML-блоки с классами языка:

<pre><code class="language-yaml"> services: nginx: image: nginx:latest </code></pre>

Дополнительные улучшения

• Копирование кода: prism-copy-to-clipboard.min.js
• Нумерация строк: prism-line-numbers.min.js
• Автозагрузка языков: prism-autoloader.min.js

Плагины можно найти в директории: prismjs.com/download.html

Итог

Prism.js — удобное решение для подсветки кода в WordPress, не перегружающее сайт. Достаточно подключить CSS и JS, задать правильные классы и использовать чистую HTML-разметку. Для сложных конфигураций можно собрать кастомный билд на официальном сайте.