Синтаксическая подсветка кода на стороне сервера

Добрый день, дорогие друзья! Наконец-то я собрался с мыслями и готов рассказать о синтаксической подсветке кода, которую организовал на блоге и теперь поделюсь этой информацией с вами.

Ранее я рассказывал о причинах безуспешного поиска готового решения. Плагины для WordPress наряду с использованием библиотеки Highlight.js или Prism в текущем виде имеют свои недостатки. В этой статье я расскажу про установку Highlight.php на сервер и его применению для подсветки кода на WordPress.

Преимущества серверной подсветки синтаксиса:

Серверная подсветка синтаксиса отлично работает даже в тех браузерах или на отдельных страницах, где отключено использование JavaScript, например, на Турбо-страницах Яндекса или страницах, совместимых с технологией ускоренных мобильных страниц AMP, которую продвигает Google.
Даже если ваш сайт несовместим с AMP и не использует Турбо-страницы, вы всё равно можете рассчитывать на более высокую скорость отображения контента, поскольку уменьшится количество загружаемых файлов JavaScripts и CSS.

Highlight.php — это серверная подсветка синтаксиса, написанная на языке PHP, которая в настоящее время поддерживает около 200 языков. Проект размещён на GitHub и является портированной версией Highlight.js полностью поддерживая список языков и стилей исходного проекта на JavaScript.

Установка библиотеки Highlight.php с помощью Composer

Перед началом работы убедитесь, что у вас установлен Composer, который представляет собой систему управления пакетами PHP и будет необходим для установки Highlight.php.

Если Composer не установлен, то сделайте это в соответствии с руководством и затем следуйте дальнейшим указаниям.

Highlight.php устанавливается с помощью Composer в каталог с темой WordPress, которая в настоящее время установлена и активирована. В моём случае установлена тема Lime, которая имеет следующий путь до каталога: webliberty.ru/wp-content/themes/lime/.

После того как вы убедились, что Composer установлен, вам необходимо подключиться к серверу по SSH-протоколу, например, используя PuTTY в качестве клиента.

Чтобы установить Highlight.php выполните следующую команду:

cd www/webliberty.ru/wp-content/themes/lime/
composer require scrivo/highlight.php

Команда из первой строки позволяет перейти в каталог с темой WordPress, а команда из второй строки непосредственно устанавливает в этот каталог библиотеку Highlight.php, необходимую нам для подсветки синтаксиса. В результате будет создан каталог vendor и в нём все нужные для работы файлы. На этом установка завершена!

Использование Highlight.php для подсветки кода на WordPress

Далее я разъясню процедуру практического использования Highlight.php на WordPress для синтаксической подсветки кода. На момент написания статьи весь код, который вы видите на этой странице и в целом на блоге, как раз обработан и выведен на экран таким образом.

Добавьте в файл function.php своей темы следующий код:

require_once __DIR__ . '/vendor/autoload.php';
use Highlight\Highlighter;
function applySyntaxHighlighting($text) {
	$pattern = '~<pre[^>]*><code[^>]*>\K.*(?=</code></pre>)~Uis';
	return preg_replace_callback($pattern, function ($match) {
		$highlighter = new Highlighter();
		$highlighter->setAutodetectLanguages([
			'html',
			'php',
			'sql',
			'css',
			'js',
			'apache'
		]);
		$input = htmlspecialchars_decode($match[0]);
		return $highlighter->highlightAuto($input)->value;
	}, $text);
}
add_filter('comment_text', 'applySyntaxHighlighting', 10);
add_filter('the_content', 'applySyntaxHighlighting', 10);

Функция applySyntaxHighlighting — это самоопределяемая функция, которая ищет код, встроенный в контент статьи на WordPress, и обрабатывает его, определённым образом подсвечивая синтаксис.

В классическом редакторе или в том случае, если ранее вы использовали плагин для подсветки кода, регулярное выражение в $pattern будет отличаться от приведённого в статье примера и функция не сработает.

Следующие два пункта очень важны и напрямую влияют на работоспособность, пожалуйста, обратите на них внимание:

$pattern — регулярное выражение для поиска в статье кода, который необходимо выделить. Я полностью перешёл на блочный редактор Gutenberg, в котором блок «Код» заключается в теги: <pre class="wp-block-code"><code>КОД</code></pre>. Возможно, вам будет необходимо адаптировать регулярное выражение под себя.
setAutodetectLanguages — укажите язык программирования, который вы хотите выделить в переданном аргументе. Поддерживается множество языков, полный список можно найти на этой странице. Просто перечисляйте через запятую названия тех языков, которые планируете использовать в своих статьях, как в моём примере.

Таким образом мы реализовали подсветку синтаксиса без использования Javascript и настал черёд перейти к завершающему этапу. Придадим коду красивый внешний вид!

Оформление кода с помощью стилей

Библиотека имеет широкий выбор стилей, доступных на странице проекта. К сожалению, на GitHub невозможно посмотреть и визуально оценить доступные стили, но, как я уже говорил ранее, серверная подсветка Highlight.php является портом Highlight.js и полностью наследует его функции и параметры.

Перейдите на демо-страницу Highlight.js для того, чтобы выбрать подходящий стиль и затем применить на своём сайте. Мне больше всего понравился стиль «Vs», поэтому открыл файл vs.css, скопировал его содержимое и добавил в существующий файл style.css собственной темы WordPress. Готово!