Раскрашиваем блоки с кодом. PHP библиотеки и плагины для WordPress

Владимир | | Web дизайн, Web разработка, WordPress.

Подсветка синтаксиса

Ни для кого не секрет, что читать код значительно удобнее в редакторе с подсветкой синтаксиса. Поэтому очень полезно сделать такую подсветку на страницах своего сайта. В этой статье я расскажу о библиотеках, которые позволяют легко решить эту задачу.

В первую очередь определим минимальные требования к таким библиотекам:

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

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 языков (о некоторых я даже не слышал 🙂 ).

Как видите, есть из чего выбрать!

Удачи!

  • А у вас подсветку делает клиентский браузер или на сервере? Это плагин к WP или редактирование шаблона?

    • Я использую серверный вариант. Плагин на основе GeSHi — Dean’s Code Highlighter. Главным образом из-за подсветки в RSS.

  • А у вас подсветку делает клиентский браузер или на сервере? Это плагин к WP или редактирование шаблона?

    • Я использую серверный вариант. Плагин на основе GeSHi — Dean’s Code Highlighter. Главным образом из-за подсветки в RSS.

  • Спасибо за обзор. А то сложно подобрать себе подходящий.

  • Спасибо за обзор. А то сложно подобрать себе подходящий.

  • Отлично,я не знал что есть серверный вариант, своему вордпрессу ставил highlight.js, но он что-то мне не сильно по душе, буду сегодня эксперементировать с серверными

  • Отлично,я не знал что есть серверный вариант, своему вордпрессу ставил highlight.js, но он что-то мне не сильно по душе, буду сегодня эксперементировать с серверными

  • Интересно, а на blogspot можно сделать такую подсветку кодов программ?

    • Да, можно, но только подсветку на стороне клиента (т.е. с помощью js).
      Blogspot позволяет менять разметку шаблона. Заходим в «Макет»->»Изменить HTML», и между тегами head вставляем js код. Тут возникает один нюанс. Я не знаю можно ли на сервере blogspot сохранить свой js файл. Поэтому вам придется вставлять либо исходный код библиотеки между тегами script, либо сохранить файл на другом сервере и сделать ссылку на него.
      После этого просто следите чтобы вокруг блоков с кодом были нужные теги.

    • Небольшое дополнение. Используйте вставку кода библиотеки только в крайнем случае, т.к. он будет грузится заново для каждой страницы.

  • Интересно, а на blogspot можно сделать такую подсветку кодов программ?

    • Да, можно, но только подсветку на стороне клиента (т.е. с помощью js).
      Blogspot позволяет менять разметку шаблона. Заходим в «Макет»->»Изменить HTML», и между тегами head вставляем js код. Тут возникает один нюанс. Я не знаю можно ли на сервере blogspot сохранить свой js файл. Поэтому вам придется вставлять либо исходный код библиотеки между тегами script, либо сохранить файл на другом сервере и сделать ссылку на него.
      После этого просто следите чтобы вокруг блоков с кодом были нужные теги.

    • Небольшое дополнение. Используйте вставку кода библиотеки только в крайнем случае, т.к. он будет грузится заново для каждой страницы.

  • Pingback: Урок 13.Создание фотогалереи на сайте. Менеджер изображений. | Freshcoder.ru - уроки PHP()

  • Pingback: Подсветка кода для Word Press | Студия WebTeam блог разработчика()

  • Спасибо за обзор. Я себе выбрал SyntaxHighlighter Plus

  • Спасибо за обзор. Я себе выбрал SyntaxHighlighter Plus

  • Pingback: Підсвічування коду на WordPress блозі | Блоґ Виспянського Ігоря()