Как включить подсветку кода highlight.js на сайте

Есть масса расширений (плагинов и модулей), которые включают подсветку кода на разных языках программирования на сайтах. Код подсветки, который можно просто внедрить с помощью highlight.js практически на любую страницу, будь то одностраничный лендинг написанный на HTML или навороченная CMS-ка, буквально за 10 минут, и он будет работать по всех современных браузерах и на всех устройствах (при условии, что у пользователя не отключена работа скриптов на JavaScript, но таких параноиков всё меньше и меньше). В этой статье рассмотрим пошаговую инструкцию того, как включить подсветку кода highlight.js на сайте.

Что нужно прописать в заголовке страницы для подключения подсветки кода highlight.js на сайте

Итак, для того, чтобы библиотека highlight.js заработала и стала подсвечивать код на разных языках программирования нужно

• или прописать подключение JavaScript-файла и css-стилей шаблона с удалённого сервера. То как то сделать подробно описано в → этой статье.
  • Плюсы этого решения в том, что ничего не нужно заливать на сервер.
  • Минусы — ограниченный стандартный выбор языков программирования, код которых будет подсвечиваться на сайте, список подключенных языков может быть длиннее (а занчит, код больше). чем требуется и то, что всегда есть риск того, что сервер, на котором хранятся эти файлы, упадёт, закроется или просто владелец удалит эти файлы... и всё отвалится.
• или собрать собственную библиотеку, выбрать шаблон подсветки кода и установить у себя на сайте, залив два (или три) файла к себе на сервер. Как это сделать, подробно описано в → этой статье.
  • Плюсы этого решения — это отсутствие минусов предыдущего способа + полное управление и контроль над файлами библиотеки и стилей, которые можно уже допиливать, если захочется.
  • Минусов я особо не вижу, при условии, что ваш сервер быстро отдаёт статику и правильно прописывает кэширование (время жизни) в браузере пользователя, но это уже тема настроек Apache и Nginx, которые рассмотрены в целом цикле статей на эту тему.

Как использовать библиотеку highlight.js для подсветки кода на сайте

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

<pre><code class="обозначение_языка">
    тут собственно код
    на языке программирования,
    который нужно подсвечивать
</code></pre>

То есть, когда требуется подсветка кода, его (код) нужно обрамлять в контейнер <pre><code>...</code></pre>, и для того, чтобы управлять тем, синтаксис какого языка подсвечивается, нужно правильно использовать класс тега <code class="обозначение_языка">. Для этого нужно сопоставить название языка программирования с его обозначением в таблице ниже. При вставке класса, нужно использовать обозначение языка программирования (или одно из обозначений) из правого столбца. Названия языков находятся в левом столбце.

Языки, подсветка кода которых поддерживается библиотекой highlight.js