Подсветка кода через Rainbow

На сайтах технической тематики порой приходится выкладывать фрагменты кода на разных языках и делать это лучше с подсветкой кода, когда переменные, значения и функции выделяются разными цветами. Так код выглядит профессиональнее и читателям проще в нём ориентироваться. Скриптов для подсветки кода существует множество, но в последнее время мне нравится Rainbow.

Сам сайт скрипта, откуда его можно скачать.

https://craig.is/making/rainbows

У Rainbow есть ряд преимуществ:

• поддержка популярных языков — HTML, CSS, JavaScript, PHP, C, Python и др.;
• компактный размер — скрипт занимает всего несколько килобайт;
• в комплекте идёт около 20 стилевых тем, которые меняются лишь сменой имени файла.

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

Для начала скачиваем программу, выбрав нужные языки. Желательно указать версию Development (рис. 1), в архиве тогда будет идти папка с темами и сжатая версия скрипта.

Рис. 1. Выбор языков

Подключение скрипта происходит двумя методами, в зависимости от выбранной версии — Production или Development. Для Production версии все скрипты упакованы в один файл, его и достаточно только подключить. Заодно включаем желаемый стиль оформления.

<script src="js/rainbow.min.js"></script>
<link href="css/obsidian.css" rel="stylesheet">

Для Development версии подключение основного скрипта и скриптов с языками происходит раздельно.

<script src="js/rainbow.min.js"></script>
<script src="js/language/generic.js"></script>
<script src="js/language/python.js"></script>

Какую версию выбрать зависит исключительно от предпочтений разработчика. В код для добавления подсветки нужно вставить data-language="html", где вместо html пишем желаемый язык. Обычно применяется сочетание элементов <pre> и <code>.

<pre><code data-language="html">&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
 &lt;head&gt;
  &lt;meta charset=&quot;utf-8&quot;&gt;
  &lt;title&gt;HTML&lt;/title&gt;
 &lt;/head&gt;
 &lt;body&gt;
  &lt;p&gt;Бифуркация русла&lt;/p&gt;
 &lt;/body&gt;
&lt;/html&gt;</code></pre>

Изменение цвета элементов происходит автоматически, путём выделения отдельных фрагментов кода через <span> с классом. Поэтому задать цвет или другие параметры самостоятельно довольно легко, за основу можно взять готовую стилевую тему и на её основе сделать свою.