Ни для кого не секрет, что читать код значительно удобнее в редакторе с подсветкой синтаксиса. Поэтому очень полезно сделать такую подсветку на страницах своего сайта. В этой статье я расскажу о библиотеках, которые позволяют легко решить эту задачу.
В первую очередь определим минимальные требования к таким библиотекам:
1) подсветка кода без лишних действий с вашей стороны, т.е. в идеале нужно указать только язык, подсветку для которого нужно включить, и выделить сам блок с кодом (обычно с помощью тегов <pre>);
2) нумерация строк кода (очень удобно ссылаться на эти номера в описании, да и посетителю будет легче ориентироваться).
На сегодняшний день существует довольно много библиотек, выполняющих подсветку кода. Но по принципу работы, на мой взгляд, можно выделить два основных типа:
1) подсветка синтаксиса выполняется на стороне клиента, т.е. браузером;
2) подсветка выполняется серверным скриптом.
В первом случае браузер получает страницу, в которой блоки кода не имеют подсветки и находятся внутри тегов <pre><code>…</code></pre>
(теги могут быть другими) и JavaScript функцию.
При загрузке страницы будет выполнена js функция, которая проанализирует содержимое этих блоков, «раскрасит» код, пронумерует строки и т.д.
Во втором варианте блоки кода анализируются на стороне сервера, и тут же выполняется подсветка. Например, если исходная страница содержит:
<pre lang="php"> if ($tagcloud === FALSE) {</pre>
то браузер получит что-то вроде:
<div class="ch_code_container" style="font-family: monospace;white-space: nowrap;height:-1px;"> <ol> <li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"> <div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #b1b100;">if</span> <span style="color: #66cc66;">(</span><span style="color: #0000ff;">$tagcloud</span> === <span style="color: #000000; font-weight: bold;">FALSE</span><span style="color: #66cc66;">)</span> <span style="color: #66cc66;">{</span></div> </li> </ol> </div>
Примечание. Этот блок я специально не форматировал.
Как видите, здесь каждый элемент находится внутри тегов <div>
или <span>
, для которых установлены соответствующие стили.
Теперь о преимуществах и недостатках.
Первый вариант (подсветка на стороне браузера с помощью 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
5) CodeColorer
8 ) Dean’s Code Highlighter – этот плагин я использую в своем блоге.
9) WP-Syntax
Пару слов о количестве поддерживаемых языков. Если вам нужна подсветка широко распространенных языков (вроде C++, Java, PHP, HTML), то, скорее всего, вам подойдет любая из упомянутых здесь библиотек. Если же вы хотите подсветить что-нибудь экзотическое, то и в этом случае есть из чего выбрать. Например, GeSHi поддерживает более 70 языков (о некоторых я даже не слышал 🙂 ).
Как видите, есть из чего выбрать!
Удачи!