Битрикс подсветка синтаксиса кода в блоге

18.12.201920:5818.12.2019 20:58:31

Для подсветки синтаксиса как на этом сайте, мы воспользуемся библиотекой highlightjs
Преимущество этой библиотеки в том - что не нужно указывать конкретный язык программирования в примерах кода, библиотека автоматически определяет язык программирования.

Скачиваем библиотеку https://highlightjs.org/download/

В файле header.php подключаем саму JS библиотека и CSS стили(различные стили оформления кстати можно посмотреть тут https://highlightjs.org/static/demo/ ):

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

Я положил библиотеку и стили в папку с темой битрикса, поэтому воспользовался переменной SITE_TEMPLATE_PATH, вы можете положить библиотеку в любое другое место.

В файле footer.php инициализируем JS скрипт библиотеки.

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

Т.к. битрикс выводит примеры кода в тэге <pre>, а highlightjs ожидает конструкцию <pre><code> мы сделаем замену - <pre> на <pre><code> в шаблоне компанента битрикса средствами php.

Для блога в списке всех постов и на страничке детального просмотра поста.
Список всех постов находится по пути /Название вашей темы/components/bitrix/blog/Название вашего шаблона блога/bitrix/blog.blog/.default/template.php (шаблон должет быть скопирован из стандартных компонентов)

Текст сообщения блога находится в переменной $CurPost["TEXT_FORMATED"], находим ее в коде и делаем замену <pre> на <pre><code>:

<? $CurPost_replace = str_replace('<pre>', '<pre><code>', $CurPost["TEXT_FORMATED"]);?>
<? $CurPost_replace_closed = str_replace("</pre>", "</code></pre>", $CurPost_replace);?>
<?= $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);?>
<?= $CurPost_replace_closed;?>

18.12.201920:5818.12.2019 20:58:31

Просмотров:3129 Комментариев:0 0

Теги: битрикс, программирование

Помогла статья?
Поддержи автора, любой суммой.

Добавить комментарий

Битрикс подсветка синтаксиса кода в блоге

Популярные записи