Подсветка кода в эгее с помощью highlight.js

17 февраля 2016, 7:54

На демо странице highlight.js подбираем понравивщуюся тему оформления. Допустим, приглянулась гитхабовская тема.

В браузере открываем http://yandex.st/highlightjs/7.3/styles/github.min.css. Убеждаемся, что файл с темой есть, и мы не ошиблись в названии темы.

В папке с эгеей по пути user/extras/ создаем файл footer-post.tmpl.php. Подробнее — в документации.

Добавляем в файл код

<link rel="stylesheet" href="//yandex.st/highlightjs/7.3/styles/github.min.css">
<script src="//yandex.st/highlightjs/7.3/styles/github.min.css"></script>
<script>
hljs.tabReplace = ' ';
hljs.initHighlightingOnLoad();
</script>

hljs.tabReplace нужен для того, чтобы табуляции в коде заменялись на пробелы. Так как я часто копирую из редактора, данная опция приятна.

Форматер стратей — Нисден. Он понимает html код, так что тело вставляемого кода выглядит примерно так:

так что тело вставляемого кода выглядит примерно так:
<pre><code>
так что тело вставляемого кода выглядит примерно так:
...
</code></pre>
Теперь код в постах будет подсвечиваться.

Одно из больших преимуществ highlight.js, это то, что не обязательно указывать язык, который необходимо подсветить. highlight.js сам определяет на каком языке написан исходный код. Хотя можно явно указывать на каком языке написан исходный код, добавляя class к тегу pre.

Второй плюс — хостинг скриптов и стилей на яндексе.

Спасибо Илье Бирману за прекрасный движок блога и Ивану Сагалаеву за не менее прекрасный раскрашиватель исходного кода.

Популярное