Подсветка кода в эгее с помощью highlight.js
На демо странице 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.
Второй плюс — хостинг скриптов и стилей на яндексе.
Спасибо Илье Бирману за прекрасный движок блога и Ивану Сагалаеву за не менее прекрасный раскрашиватель исходного кода.
Дмитрий, подскажите, а как вообще вставлять код в Эгее?
Илья в каком-то комментарии писал, что через двойные проценты, но это не работает.
Эгея понимает html, и я использую pre и code теги.
Дмитрий, а в Нисдене нет символов для вставки кода?
Я не нашел ответа на этот вопрос когда его исследовал. Смирился и пишу разметкой