Подсвечиваем код на сайте
вторник, 29 января 2013 14:28:47, написал Admin
Давно мечтал о нормальной подсветке кода php, html и css. Наконец-то у меня выдалось время и я посветил этому вопросу несколько часов. Итак, небольшой обзор существующих способов подсветки показал, что её (подсветку) можно делать или не стороне клиента, или на стороне сервера. Для себя я сразу решил, что свой сервер грузить лишней работой не стоит. В общем, решил искать реализацию на JavaScript. Конечно, при отключённом js мои посетители не увидят подсветки, но таких, надеюсь, будет мало))
После гугления наткнулся на симпатичную статью. В ней описывался компактный скрипт highlight: http://softwaremaniacs.org/soft/highlight/
Увы, после подключения подсветки кода я не увидел. Зато мой «любимый» IE подсветил ошибку на JavaScript. Мол, объект не поддерживает какое-то там свойство. Как Вы наверное понимаете, копаться в чужом коде и искать ошибку я не стал. Не подключается – и ладно, ищем другой скрипт.
Кандидатом номер два стал SyntaxHighlighter от Alex Gorbatchev. Особенность скрипта – что он не требует jQuery (хотя я не считаю это преимуществом) и можно указать только те языки, которые нужны. После скачивания и настройки подсветка кода тут же заработала, что очень и очень меня порадовало!
Архив качаем отсюда: http://alexgorbatchev.com/SyntaxHighlighter/download/
Расскажу о некоторых особенностях настройки. Извлеките из скаченного архива и подключите следующие файлы:
- shCore.js
- shCore.css
- shThemeDefault.css
Далее определитесь с языками, подсветка коих Вам нужна. Так, я выбрал себе css, html и php. Чтобы они заработали, надо подключить следующие файлы: shBrushCss.js, shBrushXml.js, shBrushPhp.js.
И последний шаг – инициализация скрипта. Добавьте скрипт со строчкой
SyntaxHighlighter.all();
- и подсветка заработает.
На этом собственно все. Заключительный штрих – у себя я отключил боковую панельку (полоса прокрутки+ссылка на сайт автора) командой SyntaxHighlighter.defaults['toolbar'] = false;
Как пользоваться подсветкой? Используйте тег <pre>с классом brush:[язык подсветки]. Т.е. для php это будет выглядеть так:
<pre class="brush: php; toolbar: true;">echo "Привет, мир!"; </pre>
Скриптом я доволен.
Подсветка кода JavaScript