Синтаксическая подсветка кода на стороне сервера
Добрый день, дорогие друзья! Наконец-то я собрался с мыслями и готов рассказать о синтаксической подсветке кода, которую организовал на блоге и теперь поделюсь этой информацией с вами.
Ранее я рассказывал о причинах безуспешного поиска готового решения. Плагины для 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.
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
— регулярное выражение для поиска в статье кода, который необходимо выделить. Я полностью перешёл на блочный редактор Gutenberg, в котором блок «Код» заключается в теги:<pre class="wp-block-code"><code>КОД</code></pre>
. Возможно, вам будет необходимо адаптировать регулярное выражение под себя.setAutodetectLanguages
— укажите язык программирования, который вы хотите выделить в переданном аргументе. Поддерживается множество языков, полный список можно найти на этой странице. Просто перечисляйте через запятую названия тех языков, которые планируете использовать в своих статьях, как в моём примере.
Таким образом мы реализовали подсветку синтаксиса без использования Javascript и настал черёд перейти к завершающему этапу. Придадим коду красивый внешний вид!
Оформление кода с помощью стилей
Библиотека имеет широкий выбор стилей, доступных на странице проекта. К сожалению, на GitHub невозможно посмотреть и визуально оценить доступные стили, но, как я уже говорил ранее, серверная подсветка Highlight.php является портом Highlight.js и полностью наследует его функции и параметры.
Перейдите на демо-страницу Highlight.js для того, чтобы выбрать подходящий стиль и затем применить на своём сайте. Мне больше всего понравился стиль «Vs», поэтому открыл файл vs.css, скопировал его содержимое и добавил в существующий файл style.css собственной темы WordPress. Готово!