Подсветка синтаксиса кода в Битрикс с помощью Highlight.js

Для подсветки синтаксиса кода в статьях и примерах на сайте удобно использовать библиотеку Highlight.js.

Главное преимущество Highlight.js в том, что библиотека умеет автоматически определять язык программирования. Это избавляет от необходимости вручную прописывать язык для каждого блока кода.

Скачивание Highlight.js

Скачать библиотеку можно с официального сайта:

https://highlightjs.org/download/

Подключение Highlight.js в Битрикс

После скачивания библиотеки подключаем JS-файл и CSS-стили в файле header.php.

Для подключения воспользуемся Asset API Битрикса:

<?
// highlightjs
Asset::getInstance()->addCss(SITE_TEMPLATE_PATH . '/css/highlightjs.css');
Asset::getInstance()->addJs(SITE_TEMPLATE_PATH . '/js/highlight.pack.js');
?>

В данном примере библиотека и стили находятся в папке шаблона сайта, поэтому используется переменная SITE_TEMPLATE_PATH.

Вы можете разместить файлы в любой другой директории и изменить пути подключения.

Инициализация библиотеки

Теперь необходимо инициализировать Highlight.js.

В файле footer.php добавляем следующий код:

<script>
    hljs.initHighlightingOnLoad();
</script>

Проблема с тегами <pre> в Битрикс

По умолчанию Битрикс выводит примеры кода внутри тега <pre>, однако Highlight.js ожидает конструкцию:

<pre><code>
...
</code></pre>

Поэтому нужно автоматически заменить теги <pre> на <pre><code> средствами PHP.

Замена тегов в списке постов блога

Шаблон списка постов находится по пути:

/Название_темы/components/bitrix/blog/Название_шаблона/bitrix/blog.blog/.default/template.php

Текст поста хранится в переменной:

$CurPost["TEXT_FORMATED"]

Находим вывод этой переменной и делаем замену:

<?
$CurPost_replace = str_replace('<pre>', '<pre><code>', $CurPost["TEXT_FORMATED"]);
$CurPost_replace_closed = str_replace("</pre>", "</code></pre>", $CurPost_replace);

echo $CurPost_replace_closed;
?>

Замена тегов на странице детального просмотра

Аналогичную замену нужно выполнить и для страницы детального просмотра поста:

/Название_темы/components/bitrix/blog/Название_шаблона/bitrix/blog.post/.default/template.php

Текст поста находится в переменной:

$arResult["Post"]["textFormated"]

Делаем такую же замену:

<?
$CurPost_replace = str_replace('<pre>', '<pre><code>', $arResult["Post"]["textFormated"]);
$CurPost_replace_closed = str_replace("</pre>", "</code></pre>", $CurPost_replace);

echo $CurPost_replace_closed;
?>

Итог

После подключения Highlight.js и замены тегов <pre> все примеры кода в блоге Битрикс будут автоматически подсвечиваться.

Такой подход делает статьи намного удобнее для чтения, особенно если блог посвящен программированию, Битриксу, PHP или фронтенд-разработке.