> Главная > Пишем ... > про Программирование

про Программирование

highlight.js: простая и удобная подсветка синтаксиса для web

23.04.2015

Илья Бажинов

Понятное дело, разработчики привыкают каждый к своим цветам синтаксиса родного код-редактора, будь то CoffeeCup, phpDesigner или, к примеру, DreamWeather. Обычно по умолчанию цветовые гаммы среды создателями редактора устанавливаются весьма себе приемлемые, лично я никогда не встречал какого-то жесткача. Но кто-то любит, например, чтобы весь его листинг купался в кислотных оттенках, кто-то - монохром, вследствие чего, как правило, в редакторе существует возможность настроить цвета под собственный вкус. То же можно и сказать под некоторые существующие решения для подсветки листинга кода, который отображается в браузере.

Я посмотрел несколько вариантов плагинов и остановился на highlight.js. На мой взгляд, в нем есть абсолютно все, что может потребоваться для публикации своего кода в Интернете в читабельном виде, и убрано то, что всегда вызывало не то чтобы раздражение, а некий дискомфорт и излишество, я имею ввиду line number, нумератор строки. На сайте разработчиков есть вполне доходчивая описашка (правда по-английски, но в крайнем случае любой онлайн-переводчик с радостью разжует вам все тонкости) и документация по API, никаких сложностей при подключении быть не должно. Присутствует достаточное количество цветовых решений, как спокойных, так и резковатых, но тут, как говорится, на вкус и цвет... Для нашего сайта была выбрана следующая гамма:

Пример HTML

<span class="test">Тест html-верстки</span>

Пример PHP

$a = 1;

echo b($a);

function b($param)
{
return ++$param;
}

Пример MYSQL

SELECT * FROM table WHERE maker = 'standarta.net'

Пример CSS

.head
{
color: #000000;
border: #cccccc 1px solid;
background: green;
}

Пример JAVASCRIPT

<link rel="stylesheet" href="/path/to/styles/default.css" />
<script src="/path/to/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

На странице https://highlightjs.org/usage/ описано, как подключить плагин к вашему проекту + есть ссылочка на список API функций. Одним словом, проект интересный, достаточно компактный и удобный.

Оставьте Ваш комментарий