VovkDesign

Блог Александры и Владимира Вовк

RSS лента
wp-puzzle

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

Авторам, регулярно публикующим статьи со вставками кода, желательно позаботиться о комфортном чтении пользователями этого кода. Листинг воспринимается легче при наличии подсветки синтаксиса. Существует много инструментов, помогающих настроить подсветку синтаксиса на блоге.

Мой выбор пал на Highlight.js — супер легкий, простой и при этом универсальный инструмент с возможностью тонкой настройки под себя. Не смотря на поддержку многих языков программирования, чаще всего достаточно подключения стандартной сборки. Именно ее мы и научимся подключать на свой сайт.

Hightlight.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 активной темы.

Стили в библиотеке Яндекса будут минимизированы, а версии с github — нет, можно минимизировать самостоятельно через замечательный инструмент от Миши Рудастых.
к оглавлению ↑

Подключаем плагин

Если все вышеописанные манипуляции кажутся слишком сложными и непосильными, идем путем проще — устанавливаем и активируем один из следующих плагинов (оба сами подключают скрипт, выбранный в настройках стиль и добавляют шоткод [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]

Комментарии всего: 18

  • Спасибо. Я раньше использовал WP Syntax. Но он достаточно «тяжелый» плагин. Посмотрим, как в плане нагрузки поведет себя этот код.

  • У меня стоит WordPress Rainbow Hilite — почти никакой нагрузки. Единственное, там темы у него адаптивные (нет нижней полосы прокрутки).

    • Сергей, спасибо за Ваш вариант. Надо поближе познакомиться с этим плагином, он немного другой скрипт подсветки использует.
      Полоса прокрутки, кстати, легко убирается с помощью CSS свойств: убираем overflow: scroll; и добавляем word-wrap: break-word;, чтобы за границы не выходили длинные строки.

  • Добрый вечер Александра! Извините меня за тупизм пожалуйста, но я не понял для чего это ваще надо. Что это за подсветка такая?

    • Подсветка синтаксиса размечает в коде разными цветами переменные, функции, условные операторы и т.д. Благодаря этому код читается и воспринимается легче.

  • Подскажите, как вставлять код, который у вас выделен в начале красным цветом?

    Пытаюсь вставить , но он не определяется и не подсвечивается, как вы вставляли данный код в статью?

    • Сергей, в стандартном режиме настройки Highlight.js срабатывает, если встречается теги:
      <pre><code>здесь ваш код</code></pre>

      • делал по вашей инструкции, но если пробовать вставлять например

        <pre class="html"><link href='http://yastatic.net/highlightjs/8.2/styles/solarized_light.min.css' rel='stylesheet'/></pre>

        то ничего не отображается, все остальное работает на ура. Если смотреть код вашей страницы, то добавляется класс xml, у меня при этом не добавляется ничего, если пробовать добавить в ручную, то тоже нет результат

        • или у вас стоит плагин?

          • Нет, у меня скрипт подключен. А тему оформления Вы указывали какую-либо или стоит то, что по-умолчанию?

        • В том коде явно не указан класс, highlight.js устанавливает сам. Вот так у меня прописано:

          <pre>
          <code>
          <script src='http://yastatic.net/highlightjs/8.2/highlight.min.js'/></script>
          <script type='text/javascript'>hljs.initHighlightingOnLoad();</script>
          </code>
          </pre>
          • я ничего не менял, все вставил как описано у вас, значит стиль стандартный.

            немного разобрался, ситуация такая, если я просто вставляю скрипт

            <script src='http://yastatic.net/highlightjs/8.2/highlight.min.js'/></script>
            <script type='text/javascript'>hljs.initHighlightingOnLoad();</script>

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

            <pre class="hljs xml"><code><span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">'http://yastatic.net/highlightjs/8.2/highlight.min.js'</span>/></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>
            <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">'text/javascript'</span>></span><span class="javascript">hljs.initHighlightingOnLoad();</span><span class="hljs-tag"></<span class="hljs-title">script</span>></span></code>

            , то есть обработка идет автоматически при вставке кода в визуальный редактор.

            А как сделать, чтобы это еще работало в комментариях не пойму))

          • С комментариями все сложнее — нужно добавить теги 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, а сам файл легко найти в коде блога — http://avovkdesign.com/wp-content/plugins/comment-preview/comment-preview.js

      • Возможно, если не особо дружите с JavaScipt и программированием, то будет намного проще технически поставить связку плагина jQuery Comment Preview от Dimox и CodeColorerдетальнее как именно.

        • Спасибо, за подсказки, я уже все плагины перепробовал)) но мне подходит именно данный метод.

          В итоге методом тыка мне удалось доработать код и преобразование в комментариях для гостей заработало))

          В поисках проблем, узнаешь много нового, чего не знал до этого))

          • Сергей, отлично! Так ведь и приобретается опыт — когда решаешь проблемы и постоянно чему-то учишься 🙂

Комментировать

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*

wp-puzzle.com logo