Ни для кого не секрет, что читать код значительно удобнее в редакторе с подсветкой синтаксиса. Поэтому очень полезно сделать такую подсветку на страницах своего сайта. В этой статье я расскажу о библиотеках, которые позволяют легко решить эту задачу.
В первую очередь определим минимальные требования к таким библиотекам:
1) подсветка кода без лишних действий с вашей стороны, т.е. в идеале нужно указать только язык, подсветку для которого нужно включить, и выделить сам блок с кодом (обычно с помощью тегов
pre);2) нумерация строк кода (очень удобно ссылаться на эти номера в описании, да и посетителю будет легче ориентироваться).
На сегодняшний день существует довольно много библиотек, выполняющих подсветку кода. Но по принципу работы, на мой взгляд, можно выделить два основных типа:
1) подсветка синтаксиса выполняется на стороне клиента, т.е. браузером;
2) подсветка выполняется серверным скриптом.
В первом случае браузер получает страницу, в которой блоки кода не имеют подсветки и находятся внутри тегов
pre и code (теги могут быть другими) и JavaScript функцию.При загрузке страницы будет выполнена js функция, которая проанализирует содержимое этих блоков, «раскрасит» код, пронумерует строки и т.д.
Во втором варианте блоки кода анализируются на стороне сервера, и тут же выполняется подсветка. Например, если исходная страница содержит:
if ($tagcloud === FALSE) {то браузер получит что-то вроде:
- if (
$tagcloud === FALSE
) {
Примечание. Этот блок я специально не форматировал.
Как видите, здесь каждый элемент находится внутри тегов
или , для которых установлены соответствующие стили.
Теперь о преимуществах и недостатках.
Первый вариант (подсветка на стороне браузера с помощью JavaScript).
Преимущества.
1) Меньше нагрузка на сервер (хотя, если страницы кэшируются, особенной разницы не будет).
2) Если вставки кода большие, то может быть выигрыш в размере страницы (т.е. размер JavaScript будет меньше размера дополнительной разметки со стилями во втором варианте).
Недостатки.
1) Нужна поддержка JavaScript на стороне клиента. Если страница просматривается в браузере, то это не проблема, а вот в RSS ридере подсветку не увидите.
2) Размер страницы увеличивается за счет js-файла и грузить его ради пары строк как-то не рационально (т.е. выигрыш в размере можно получить только при достаточно больших блоках кода).
Второй вариант (подсветка на стороне сервера).
Преимущества.
1) Такую подсветку правильно отображают не только браузеры, но и RSS ридеры и eMail клиенты (актуально, если вы рассылаете ленту по почте).
Недостатки.
1) Объем страницы увеличивается и довольно сильно.
2) Увеличивается время формирования страницы.
Теперь переходим к библиотекам.
Для подсветки на стороне браузера можно использовать:
1) highlight.js
2) Code Press
3) Mike Samuel’s JavaScript Code Prettifier
4) SyntaxHighlighter – существует плагин для WordPress, основанных на этой библиотеке
Следующие три библиотеки позволяют не только подсветить код, но и создать текстовый редактор внутри textarea.
5) Edit area
6) CodeMirror
7) Helene
Подсветка на стороне сервера:
1) GeSHi (наверное, самая распространенная) на ее основе создан ряд плагинов для различних CMS
2) GNU Enscript и плагин для WordPress на ее основе - Syntax Highlighting with Enscript.
3) Highlight - плагин для WordPress.
Теперь приведу список плагинов WordPress, которые работают на основе GeSHi
4) iG:Syntax Hiliter
5) CodeColorer
6) Highlight Source Pro
7) Code Snippet 2.0
8) Dean’s Code Highlighter – этот плагин я использую в своем блоге.
9) WP-Syntax
Пару слов о количестве поддерживаемых языков. Если вам нужна подсветка широко распространенных языков (вроде C++, Java, PHP, HTML), то, скорее всего, вам подойдет любая из упомянутых здесь библиотек. Если же вы хотите подсветить что-нибудь экзотическое, то и в этом случае есть из чего выбрать. Например, GeSHi поддерживает более 70 языков (о некоторых я даже не слышал :-) ).
Как видите, есть из чего выбрать!
Источник: кросспостинг из моего блога - www.simplecoding.org.
