Особенности подсветки синтаксиса для Интернет

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

Подсветка синтаксиса – это форматирование текста согласно данным синтаксическим правилам. Форматирование в основном заключается в выделении отдельным цветом определённых синтаксических конструкций, зачастую используются и отдельные шрифты.
Делается это для удобства восприятия, и на самом содержании никак не сказывается. Обычно подсвечивают исходные коды программ – листинги, например, как во всех IDE. Тем не менее, можно «подсвечивать» вообще любой текст, ведь в любом языке есть свой синтаксис. Филологию трогать не будем, и займёмся исключительно подсветкой синтаксиса исходников. (Помните, как в школе подчёркивали различными линиями прилагательные, существительные…? Это был настоящий Syntax Highlighting).
Форматирование кода удобно не только при редактировании, но и при публикации.
Мы настолько привыкли к подсвеченным исходникам, что их публикация в виде сплошного текста была бы просто не приличной.

Возьмём «Hello World» на Java, его и будем использовать для примера:

package helloworld;

/**
 * @author r00tGER
 */
public class Main {

    public static void main(String[] args) {
        System.out.println("<h2>Hello World!</h2>"); //Print to console
    }

}

Как, Вы заметили, пример уже подсвечен. Теперь разберёмся как это работает.

Веб-страница представляет из себя html-документ, соответственно и листинг должен вставляться в неё в виде html-фрагмента. А всё оформление должно выполняться с помощью html и css, только так браузер сможет «раскрасить» исходники. Тут главное позаботиться о том, чтобы заменить все спецсимволы, встречающиеся в листинге на их escape-последовательности, иначе они будут интерпретированы браузером.
Обратите внимание на 9-ю строку в нашем примере, там встречаются html теги, если мы не заменим угловые скобки на escape-последовательности, то браузер отобразит «Hello World» как заголовок второго уровня (h2).
Это как раз к вопросу: «Как разместить html код страницы на самой странице, так чтобы его не интерпретировал браузер». Заменять спецсимволы умеют большинство WYSIWYG редакторов, для этого достаточно редактировать листинги в режиме текста. Для этого же и создан данный сайт.

После замены всех спецсимволов в листинге, его можно отформатировать согласно синтаксису. Например, раскрасить переменные, функции, константы, типы и др. в свои цвета.

Есть два различных пути, как подсветить синтаксис:

Первый путь – сразу форматировать исходники при создании или динамической генерации страницы на сервере.
Суть в том, чтобы листинги вставлялись в страницу со всем необходимым оформлением. В браузер исходники попадают уже подсвеченными, в виде обычного html-документа, и гарантированно будут отображены. Форматирование осуществляется при редактировании самой страницы. Для этого используются различные дополнения и плагины к редакторам, или даже он-лайн сервисы. Так же подсветка может осуществляться на стороне сервера, с помощью специальных библиотек, например на PHP. Это популярно во многих CMS, при динамическом создании страниц. Этот путь предполагает очень интенсивное использование различных тегов и стилей, что в свою очередь очень ухудшает общее соотношение текст-код на странице, и может отрицательно сказаться на её «репутации» у поисковиков.

Вот примерно такой html код мы получим для нашего примера:

<pre style='color:#000000;background:#ffffff;'><span style='color:#800000; font-weight:bold; '>package</span><span style='color:#004a43; '> helloworld</span><span style='color:#800080; '>;</span>

<span style='color:#3f5fbf; '>/**</span>
<span style='color:#3f5fbf; '>&#xa0;</span><span style='color:#7f9fbf; font-weight:bold; '>*</span><span style='color:#3f5fbf; '> </span><span style='color:#7f9fbf; font-weight:bold; '>@author</span><span style='color:#3f5fbf; '> </span><span style='color:#7f9fbf; font-weight:bold; '>r00tGER</span><span style='color:#3f5fbf; '></span>
<span style='color:#3f5fbf; '>&#xa0;*/</span>
<span style='color:#800000; font-weight:bold; '>public</span> <span style='color:#800000; font-weight:bold; '>class</span> Main <span style='color:#800080; '>{</span>

    <span style='color:#800000; font-weight:bold; '>public</span> <span style='color:#800000; font-weight:bold; '>static</span> <span style='color:#bb7977; '>void</span> main<span style='color:#808030; '>(</span><span style='color:#bb7977; font-weight:bold; '>String</span><span style='color:#808030; '>[</span><span style='color:#808030; '>]</span> args<span style='color:#808030; '>)</span> <span style='color:#800080; '>{</span>
        <span style='color:#bb7977; font-weight:bold; '>System</span><span style='color:#808030; '>.</span>out<span style='color:#808030; '>.</span>println<span style='color:#808030; '>(</span><span style='color:#0000e6; '>"&lt;h2>Hello World!&lt;/h2>"</span><span style='color:#808030; '>)</span><span style='color:#800080; '>;</span> <span style='color:#696969; '>//Print to console</span>
    <span style='color:#800080; '>}</span>

<span style='color:#800080; '>}</span>
</pre>

Получили захламление разметкой, конечно, можно вынести стили в отдельный CSS файл, но это не особо решит проблему.

Второй путь – все форматирование провести на стороне клиента.
Суть в том, чтобы листинги вставить в страницу в виде простого текста, а форматировать их уже потом, непосредственно в браузере клиента. Для этого используются JavaScript библиотеки, которые и «раскрашивают» исходники в браузере. Всё предельно просто, минус только в одном – выключенный JavaScript. Но даже в таком случае ничего страшного не произойдёт, исходник просто останется не отформатированным текстом. Плюсов у данного метода довольно много. Легкость публикации, все сводится к копированию и вставке. Листинги хранятся в низменном виде, всегда легко изменить стиль и даже JavaScript библиотеку для подсветки синтаксиса. Не изменяется соотношение разметка-текст. С интеграцией вообще не должно быть проблем. Всё будет происходить на стороне клиента, сайт вообще может быть статическим.

При таком способе, для нашего примера, в код страницы вставляется следующий фрагмент (может отличаться в зависимости от используемой библиотеки, но суть одна):

<pre class="brush: java;">
package helloworld;

/**
 * @author r00tGER
 */
public class Main {

    public static void main(String[] args) {
        System.out.println("<h2>Hello World!</h2>"); //Print to console
    }

}
</pre>

Как видим, нет никакой html-разметки, весь листинг находится внутри тега pre, всё остальное делает JavaScript

Так какой Syntax Highlighter выбрать? Трудно сделать универсальную подсказку по выбору Syntax Highlighter-а. Их много, и все имеют свои отличия. В первую очередь – это список поддерживаемых языков программирования. Если, например, Java поддерживают большинство, то 1C не так уж и многие. Наличие всяких приятных мелочей, вроде автоматической нумерации сток (как в примерах). Лучший способ выбрать нужное – это попробовать самому. Многие библиотеки, плагины, дополнения реализованы под конкретные редакторы, CMS и платформы. Поэтому такой вариант может устроить любителей популярных CMS на PHP, дня них существует большой выбор готовых модулей для подсветки синтаксиса. Если у Вас блог или сайт на каком-нибудь общественном движке, например narod.ru или Blogger.com, где по сути ничего нельзя и нет никакой свободы для действий, то второй путь для Вас единственно возможный. А если Вам это требуется не часто, то проще воспользоваться он-лайн сервисом, он и спец-символы заменит, и отформатирует согласно требуемому синтаксису. Спросите у поисковиков «on-line Syntax Highlighter», наверняка подберёте себе по душе.

Code Publication Utility

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