Авторам, регулярно публикующим статьи со вставками кода, желательно позаботиться о комфортном чтении пользователями этого кода. Листинг воспринимается легче при наличии подсветки синтаксиса. Существует много инструментов, помогающих настроить подсветку синтаксиса на блоге.
Мой выбор пал на Highlight.js — супер легкий, простой и при этом универсальный инструмент с возможностью тонкой настройки под себя. Не смотря на поддержку многих языков программирования, чаще всего достаточно подключения стандартной сборки. Именно ее мы и научимся подключать на свой сайт.
Настройка Highlight.js на сайте вручную
Подробно о Highlight.js можно почитать на официальном сайте. Там же доступна полная информация, исходники и последняя версия для скачивания. Нам же загрузка не понадобится и подключать скрипт будем немного другим путем.
к оглавлению ↑Подключение и инициализация скрипта
Подключать скрипт рекомендую из JavaScript библиотеки Яндекса (использование CDN способствует ускорению загрузки сайта). Переходим на страницу, копируем статический адрес скрипта последней версии (сейчас актуальна версия 8.2) и добавляем 2 строчки в код сайта с подключением и инициализацией (перед закрывающим тегом </body>):
<script src='http://yastatic.net/highlightjs/8.2/highlight.min.js'/></script>
<script type='text/javascript'>hljs.initHighlightingOnLoad();</script>Для WordPress лучше добавить этот код через хук wp_footer. Вставляем в functions.php активной темы или в свой плагин FunctionsPHP (предпочтительный вариант):
function functionsphp_add_highlightjs (){
echo <<<EOT
<script src='http://yastatic.net/highlightjs/8.2/highlight.min.js'/></script>
<script type='text/javascript'>hljs.initHighlightingOnLoad();</script>
EOT;
}
add_action('wp_footer', 'functionsphp_add_highlightjs');Настройка css стилей оформления
Теперь займемся оформлением — подключим стили, которых очень много есть на выбор.
Посмотреть все существующие можно на демо странице (кликаем по перечню названий в левой колонке под словом Styles и справа смотрим, как будет выглядеть код на сайте). Часть стилей есть в библиотеке Яндекса (уже минимизированы). Еще больше — на странице github.
Подключаем CSS из CDN Яндекса
Первый и самый простой способ — подключить отдельный css-файл из библиотеки Яндекса. В перечне стилей нажимаем правой кнопкой на нужном названии (мне понравился Solarized Light) и выбираем Копировать адрес ссылки. Подключаем стиль в <head>:
<link href='http://yastatic.net/highlightjs/8.2/styles/solarized_light.min.css' rel='stylesheet'/>Для WordPress более предпочтительный вариант — через хук wp_head, добавляем функцию в functions.php активной темы или в свой плагин FunctionsPHP:
function functionsphp_add_styles_highlightjs (){
echo "<link href='http://yastatic.net/highlightjs/8.2/styles/solarized_light.min.css' rel='stylesheet'/>";}
add_action('wp_footer', 'functionsphp_add_styles_highlightjs');Добавляем стили в свой CSS файл
Другой вариант настройки внешнего вида кода — добавить CSS нужного оформления в свой файл style.css.
Сперва на демо странице выбираем внешне понравившееся оформление и запоминаем название стиля. В библиотеке Яндекса переходим по нужному названию, если такое есть. Если нету, то ищем на странице github и также переходим по ссылке. Копируем CSS-код и вставляем его в самый конец своего файла style.css активной темы.
Подключаем плагин
Если все вышеописанные манипуляции кажутся слишком сложными и непосильными, идем путем проще — устанавливаем и активируем один из следующих плагинов (оба сами подключают скрипт, выбранный в настройках стиль и добавляют шоткод [code]):
- WP-highlight.js. Русифицирован и подключает все файлы со своей директории (т.е. с вашего сайта).
- WP Code Highlight.js. Предлагает в настройках выбор — или локальное хранилище или CDN поставщик.
К сожалению, не со всех CDN подгружаются стили, поэтому будьте внимательны при выборе. Например, стиль github не подключился из рекомендованного Public CDN: jsDelivr (highlightjs.org recommend) и из CDN Яндекса — Public CDN: Yandex (lastest version: 8.2). В последнем не все стили есть да и адрес некорректный.
Использование Hightlight.js
Чтобы для сниппета кода сработала подсветка, нужно заключить его в два тега — <pre> и <code> (код на страницу добавляем через визуальный редактор, сами теги вокруг кода — через вкладку Текст). Например, вот так:
<pre><code>
function my_php_demo_snippet(){
var $test = 'Hello!';
echo $test;
}
</code></pre>Язык программирования скрипт попробует определить сам. Так же его можно задать самостоятельно в виде названия класса:
<pre><code class="php">
function my_php_demo_snippet(){
var $test = 'Hello!';
echo $test;
}
</code></pre>Если устанавливали плагин, то кроме этого можно использовать еще альтернативный вариант с шоткодом:
[code]
function my_php_demo_snippet(){
var $test = 'Hello!';
echo $test;
}
[/code]
Спасибо. Я раньше использовал WP Syntax. Но он достаточно «тяжелый» плагин. Посмотрим, как в плане нагрузки поведет себя этот код.
У меня стоит WordPress Rainbow Hilite — почти никакой нагрузки. Единственное, там темы у него адаптивные (нет нижней полосы прокрутки).
Сергей, спасибо за Ваш вариант. Надо поближе познакомиться с этим плагином, он немного другой скрипт подсветки использует.
Полоса прокрутки, кстати, легко убирается с помощью CSS свойств: убираем
overflow: scroll;и добавляемword-wrap: break-word;, чтобы за границы не выходили длинные строки.Добрый вечер Александра! Извините меня за тупизм пожалуйста, но я не понял для чего это ваще надо. Что это за подсветка такая?
Подсветка синтаксиса размечает в коде разными цветами переменные, функции, условные операторы и т.д. Благодаря этому код читается и воспринимается легче.
Подскажите, как вставлять код, который у вас выделен в начале красным цветом?
Пытаюсь вставить , но он не определяется и не подсвечивается, как вы вставляли данный код в статью?
Сергей, в стандартном режиме настройки Highlight.js срабатывает, если встречается теги:
<pre><code>здесь ваш код</code></pre>делал по вашей инструкции, но если пробовать вставлять например
то ничего не отображается, все остальное работает на ура. Если смотреть код вашей страницы, то добавляется класс xml, у меня при этом не добавляется ничего, если пробовать добавить в ручную, то тоже нет результат
или у вас стоит плагин?
Нет, у меня скрипт подключен. А тему оформления Вы указывали какую-либо или стоит то, что по-умолчанию?
В том коде явно не указан класс, highlight.js устанавливает сам. Вот так у меня прописано:
я ничего не менял, все вставил как описано у вас, значит стиль стандартный.
немного разобрался, ситуация такая, если я просто вставляю скрипт
в визуальный редактор, то все начинает работать и если переключится на текстовый редактор, то там я увижу
, то есть обработка идет автоматически при вставке кода в визуальный редактор.
А как сделать, чтобы это еще работало в комментариях не пойму))
С комментариями все сложнее — нужно добавить теги pre и code в список разрешенных при комментировании. Вот такой функцией:
add_action('init', 'commentpreview_html_tags_code', 10); function commentpreview_html_tags_code() { global $allowedtags; $allowedtags["pre"] = array( "class" => array() ); $allowedtags["code"] = array( ); }Плюс — при отправке комментария заменять треугольные скобки внутри <pre> на соответствующие html-последовательности (Это у меня делает плагин от Dimox jQuery Comment Preview).
Для того, чтобы код типа «script» отображался, необходимо было подключить замену треугольных скобок автоматическую, после чего все заработало, а так же подключил к комментариям, но столкнулся снова с проблемой, если пишет админ в комментариях код типа «script», то все отображается нормально, если гость, то снова ничего не выводит.
код в комментариях вставляю в теги <pre><code></code></pre>, данные теги разрешил для комментирования гостям
Да, в комментариях выше я об этом упомянула. У меня подключен скрипт от Dimox, который перед отправкой комментария заменяет треугольные скобки, а также обрабатывает тег <script> и остальные в правильной последовательности.
Вот скрин кода — http://prntscr.com/6zbfzx, а сам файл легко найти в коде блога — https://avovkdesign.com/wp-content/plugins/comment-preview/comment-preview.js
Возможно, если не особо дружите с JavaScipt и программированием, то будет намного проще технически поставить связку плагина jQuery Comment Preview от Dimox и CodeColorer — детальнее как именно.
Спасибо, за подсказки, я уже все плагины перепробовал)) но мне подходит именно данный метод.
В итоге методом тыка мне удалось доработать код и преобразование в комментариях для гостей заработало))
В поисках проблем, узнаешь много нового, чего не знал до этого))
Сергей, отлично! Так ведь и приобретается опыт — когда решаешь проблемы и постоянно чему-то учишься 🙂