Подсветка синтаксиса в WordPress

Достаточно длительное время я присматривался к различным решениям для подсветки синтаксиса в WordPress. Основными требованиями было легкость, простота установки и использования. Громоздкие плагины для WordPress были сразу мной откинуты. Среди всех решений, мне больше всего приглянулись Highlight.js, Prism.

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

Настройка Prism в WordPress

Начну с того, что Prism имеет неудобный формат выделения области кода. В прочем, Highlight.js имеет аналогичный недостаток. Для использования Prism необходимо выделить код следующим образом:

<pre class="lang-javascript"><code class="lang-javascript">
/* Использование Prism для подсветки синтаксиса JavaScript */
<code></pre>

Мне совершенно не нравится такой формат выделения кода, поэтому я решил его заменить на более лаконичный:

<pre class="lang-javascript">
/* Использование Prism для подсветки синтаксиса JavaScript */
</pre>

Для начала необходимо выбрать набор языков программирования для подсветки кода и скачать Prism по этой ссылке. После того как скачали Prism, в файле prism.js необходимо найти следующую строку:

for(var a,r=document.querySelectorAll('code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code'),l=0;a=r[l++];

Вручную измените code на pre или полностью замените строку на код из примера ниже:

for(var a,r=document.querySelectorAll('pre[class*="language-"], [class*="language-"] pre, pre[class*="lang-"], [class*="lang-"] pre'),l=0;a=r[l++];

После чего копируем файл prism.js в каталог с темой WordPress. Далее необходимо скопировать стили для подсветки синтаксиса в содержимое файла style.css вашей темы. В процессе может понадобится настроить стили под дизайн вашего сайта.

Подключаем загрузку скрипта в functions.php:

function add_prism() {
    wp_register_script('prismjs', get_stylesheet_directory_uri() . '/prism.js', false, '1.0', true);
    wp_enqueue_script('prismjs');
}
add_action('wp_enqueue_scripts', 'add_prism');

Для подсветки кода в WordPress выделяем область помощью тега pre, а для имени стиля указываем язык программирования:

<pre class="lang-php">
/* Использование Prism для подсветки синтаксиса PHP */
</pre>