highlight.js

highlight.js Syntax highlighting for the Web

Официальный сайт: highlightjs.org
Демо-страница: highlightjs.org
Исходники на Github: github.com
Документация на Readthedocs: readthedocs.io


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

highlight.js легко устанавливается и интергируется практически в любую CMS-ку, имеет гибкие настройки и позволяет не только использовать целый ряд предустановленных цветовых схем, идущих в дистрибутиве с пакетом, но также позволяет создавать собственные цветовые схемы, которые могут быть настроены под вкус и цвет владельца того сайта, на котором требуется подсветка синтаксиса кода. На текущий момент highlight.js поддерживает подсветку синтаксиса 185-ти языков и имеет 89 стиля для их вывода на страницу.

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

Highlight.js — это инструмент для подсветки синтаксиса, написанный на JavaScript. Он работает и в браузере, и на сервере. Он работает с практически любой HTML разметкой, не зависит от каких-либо фреймворков и умеет автоматически определять язык.


Материалы о том, как работать с highlight.js:

Звезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активна

Нумерация строк highlight.js

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

Звезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активна

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

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

Звезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активна

Установка на сайт подсветки кода с помощью подключения библиотеки highlight.js

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

Звезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активна

Изменение шаблона подсветки кода на другой стандартный шаблон highlight.js

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

Звезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активна

Выбор шаблона highlight.js на сайте highlightjs.org на демо-странице

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

Звезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активна

Быстрая установка подсветки кода с помощью подключения библиотеки highlight.js

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