highlight.js — JavaScript для раскрашивания кода на сайте

Всё хорошо в том, как работает библиотека подсветки кода языков программирования highlight.js на страницах сайта, но... Но автор решил не включать в неё нумерацию строк обосновывая это решение тем, что без неё всё будет работать быстрее. Как же быть, если нужно включить нумерацию строк на страницах сайта там, где есть подсветка кода? Решение есть! Оно простое и о том, как в highlight.js сделать так, чтобы и код посветить и номера строк показать, будет рассказано ниже.

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

В предыдущих статьях было рассмотрено то, как установить подсветку кода с помощью подключения библиотеки highlight.js со стороннего сайта и то, как собрать и скачать файлы для установки highlight.js на сайт. Но так как нет ничего вечного, плюс никто не знает, сколько будет поддерживаться проект highlight.js его разработчиком и сколько времени ещё будут доступны файлы этой библиотеки на стороннем сервере, то в этой статье разберём, как установить (железобетонно) это полезное расширение к себе на сервер и подключить подсветку кода к себе на сайт, используя локальные файлы, которые никто не утащит и не потрёт.

Как уже не раз отмечалось, highlight.js имеет 89 шаблонов для подсветки кода в различных цветовых схемах из которых можно выбрать тот, который подходит к дизайну сайта или привычен владельцу сайта потому, что он применяет подобный шаблон в своём текстовом редакторе для написания программ. В этой статье рассмотрим то, как можно просто поменять цветовую схему подсветки кода, выбрав готовую и подставив её в код вставки highlight.js на сайт.

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

Для того, чтобы сайт, на котором размещены листинги программ на различных языках программирования не только выглядел красиво, но и им было удобно пользоваться, часто прибегают к подсветке синтаксиса приводимого кода программ. Для этих целей очень подходит библиотека написанная на JavaScript и имеющая большой набор стилей css для создания удобного с точки зрения владельца сайта дизайна. Эта библиотека — highlight.js.

Для того, чтобы установить highlight.js на сайт и начать его использовать, можно воспользоваться собранным готовым дистрибутивом, хранящимся на удалённом сервере, который содержит подсветку 24 популярных языков программирования. Но для более гибкой настройки и уменьшения размеров файлов, которые будут загружаться на устройство пользователя при загрузке страниц сайта, можно воспользоваться конструктором, позволяющем выбрать только те языки, которые действительно будут востребованы для подсветки их синтаксиса. О том, как скачать такой оптимизированный установочный пакет highlight.js и пойдёт речь ниже.