Підключення highlight.js для підсвітки синтаксису коду

Оскільки мій блог має тематику програмування, мені знадобилося, щоб програмний код у статтях красиво підсвічувався. Тобто замість простого тексту, який нічим не відрізняється від основного, було підсвічування синтаксису як у текстовому редакторі.

Хотів спочатку написати сам, але зрозумів, що ця витівка, по-перше, займе багато часу, по-друге, це буде не продуктивно. Багато чого треба брати до уваги, робити окремі стилі для кожної мови. У майбутньому звичайно спробую вирішити цю задачу самостійно. Обов'язково опублікую код на блозі. Зараз же вирішив приєднати до блогу вже готовий сторонній скрипт highlight.js. Тут все з коробки: підтримка майже 170 мов програмування, 77 різних стилів оформлення, адаптивність під маленькі екрани. Останній пункт мені окремо сподобався. Якщо код не влізає то просто, прокручуємо праворуч. Все акуратно і гарно.

Налаштування скрипту займе у вас не більше 5 хвилин.

Якщо вам не хочеться нічого завантажувати, то просто між тегами <head> вписуємо:

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js"></script>

або

<link rel="stylesheet" href="//cdn.jsdelivr.net/highlight.js/9.9.0/styles/default.min.css">
<script src="//cdn.jsdelivr.net/highlight.js/9.9.0/highlight.min.js"></script>

Так ми підключаємо зі сторонніх серверів цей скрипт та оформлення для 22 стандартних мов програмування. Можете прокручувати далі, де ми вже це все будемо приліплювати до сайту. Якщо ж ви хочете, щоб все акуратно лежало у вас у папочці з проектом, то заходимо на офіційний сайт highlightjs.org. Натискаємо "Get version...", щоб отримати найсвіжішу версію. Вибираємо чекбоксами ті мови програмування які ви хочете підсвічувати, та натискаємо "Download".

Розпаковуємо архів. Нам треба, по-перше, highlight.pack.js, який завантажуючи до теки з сайтом підключаємо за допомогою цього рядку коду(не забудьте поміняти на свій шлях до файлу):

<script src="highlight.pack.js"></script>

Також підключаємо каскадні таблиці стилів для самого оформлення коду, який беремо в архіві(тека styles). Там їх доволі багато. Кожний описує свою тему для оформлення синтаксису коду. Можна вибрати стандартну тему:

<link rel="stylesheet" type="text/css" href="highlight/default.css">

Замість default.css можна прописати будь-який інший файл з тієї папки. Наприклад monokai-sublime.css оформлення блоків с підсвіткою робить як у популярному текстовому редакторі Sublime Text. Подивитися як всі ці теми виглядають можна на цій сторінці: highlightjs.org/static/demo/.

І наостанок прописуємо саму функцію, яка займається підсвіткою коду. Вона буде викликатися після завантаження сторінки.

<script>hljs.initHighlightingOnLoad();</script>

Все. З налаштуваннями покінчили. Тепер на сайті, сам блок з кодом який ми хочемо підсвітити, ми маємо оформити так:

<pre><code class="php">echo 'Hello World!';</code></pre>

Спочатку тег <pre>(показує вміст з усіма пробілами), потім <code>(без спеціальних стилів браузер показує його вміст просто моноширинним шрифтом) з атрибутом class якому значенням задаємо назву мови програмування, яку треба підсвітити. Назви класів які відповідають мовам програмування можна знайти на цій сторінці. Але це не обов'язково, через те, що скрипт може автоматично розпізнавати синтаксис.

Якщо ви хочете використовувати дану конструкцію без підсвітки, то призначте клас nohighlight.

Сподіваюся, що моя стаття допомогла вам реалізувати підсвітку програмного коду на вашому сайті. Якщо так, то я дуже радий. Пишіть у коментарях, якщо знаєте ще цікаві рішення або популярні скрипти.