Подсветка синтаксиса в Hugo с помощью highlight.js

Sun, Dec 27, 2015

Для блога, посвященного программированию, подсветка синтаксиса кода - вещь строго обязательная. А учитывая, что готовых решений для этого предостаточно, не подключить что-то этакое себе на сайт всё равно, что плюнуть в карму. Пойдем по самому простому пути - подключим на клиентской стороне популярную библиотеку highlight.js.

Как это принято в open source, инструкция по поключению highlight.js с сайта Hugo уже устарела. На каждой странице hugo-сайта нам надо добавить в заголовки новую версию библиотеки, а совсем не то, что рекомендует авто Hugo.

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.0.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.0.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

Я использую тему hyde. Для неё нужно отредактировать файл layouts/partials/head.html. Если файла не существует, то его надо предварительно, до кастомизации, скопировать из темы themes/hyde/layouts/partials/head.html. Для других тем название файла заголовков может отличаться. Изучаем исходники.

Вроде бы всё. Можем наслаждаться результатом. То, что помещено в блоки между тремя тильдами, будет стрательно раскрашено во все цвета радуги.

Глаз радует, но, как всегда, остаётся пара вопросов.

Во-первых, для темы hyde блоки кода отображаются с “двойным бордюром”, что разрушает гармонию. Во-вторых, а что делать с блоками кода, для которых не нужно ничего подсвечивать? Судьба которых быть скучными и унылыми.

Для решения первой проблемы нужно переопределить стиль тега <pre>, т.к. его цвет по-умолчанию отличается от цвета, используемого highlight.js. Создаём файл стилей static/css/custom.css, прописываем его в head.html после подключения highlight.js, добавляем стиль.

pre {
	background-color: #f0f0f0;	
}

От лишнего “бордюра” избавились. Теперь он окрашен в тот же цвет, что и блок code внутри.

Для отключения подсветки добавляем к тильдам ключевое слово nohighlight.

~~~nohighlight
// блок, синтаксис которого не будем подсвечивать
~~~

Аналогично с отключением синтаксиса можно указать конкретный язык для подсветки, т.к. highlight.js далеко не всегда корректно определяет используемый язык. Например:

~~~php
// здесь блок php-кода
~~~