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

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

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 функций. Одним словом, проект интересный, достаточно компактный и удобный.

Просмотров: 802

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

Данная страница отсутствует. Вы точно уверены, что адрес правильный и тут было что то нужное для Вас? :))


Notice: Use of undefined constant window - assumed 'window' in /home/users/b/bazhinov/domains/cms.standarta.net/projects/standarta.net/forms/_tpl_1426533707_16_03_2015.php on line 6

Fatal error: Uncaught Error: Call to undefined function alert() in /home/users/b/bazhinov/domains/cms.standarta.net/projects/standarta.net/forms/_tpl_1426533707_16_03_2015.php:6 Stack trace: #0 /home/users/b/bazhinov/domains/cms.standarta.net/class/tpl.inc(472): include() #1 /home/users/b/bazhinov/domains/cms.standarta.net/projects/standarta.net/ru/_tpl_1426596346_17_03_2015.php(65): TPL->dopContent('3') #2 /home/users/b/bazhinov/domains/cms.standarta.net/class/tpl.inc(146): include('/home/users/b/b...') #3 /home/users/b/bazhinov/domains/cms.standarta.net/class/tpl.inc(581): TPL->getTplFile() #4 /home/users/b/bazhinov/domains/standarta.net/index.php(161): TPL->BuildInsidePage('coding') #5 {main} thrown in /home/users/b/bazhinov/domains/cms.standarta.net/projects/standarta.net/forms/_tpl_1426533707_16_03_2015.php on line 6