logo Code Publication Utility

Утилита для работы с «SyntaxHighlighter by AlexGorbatchev»

Используем Syntax Highlighter

SyntaxHighlighter by Alex Gorbatchev - JavaScript библиотека для подсветки синтаксиса исходных кодов на веб-страницах. Далее буду называть просто SH. Имеет очевидные преимущества среди своих многочисленных собратьев: очень гибкая в конфигурации, предельно простые настройки, много приятных функциональных возможностей, и при этом легко интегрируется с любыми сайтами. На данный момент включена в дистрибутив поддержка следующих языков: Java, C++, XML, CSS, HTML, JavaScript, Bash, C#, Delphi, Diff, Groovy, PHP, Plain, Python, Ruby, Scala, SQL, Visual Basic. Есть множество дополнительных языков, которые можно установить отдельно, без особых усилий, каждый может расширить этот список.

Благодаря этому завоевала огромную популярность. Многие CMS имеют уже готовые дополнения на основе этой библиотеки, что упрощает установку и использование. Поэтому, если Вы используете популярные CMS и различные движки форумов, блогов, такие как: Joomla, WordPress, PHP BB… - то Вам стоит поискать уже готовый плагин и не париться с ручной установкой, хотя, в ней нет ничего сложного.

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

Как это работает?
SH встраивается в страницу, а лучше сразу в шаблон, как и все остальные JavaScript библиотеки и скрипты. Листинг же вставляется в виде обычного текста внутри определённых тегов (только с заменой спецсимволов, а начиная со 2-й версии SH, можно даже спецсимволы оставлять "как есть"). По этим тегам SH и узнаёт о наличии листинга на странице. После загрузки страницы в браузер, SH пробегается по содержанию и если находит листинг, то сразу же его «подсвечивает». Всё предельно просто и очень удобно, исходники можно прямо из IDE копипастить на страницу, SH сам обо всем позаботиться.

Установка.
Можно скачать дистрибутив и разместить на своём сайте, а можно использовать и специальную версию, не требующую установки на сайт. Всё отличие только в путях к скриптам, т.е. как и любой скрипт, SH может быть загружен на страницу со своего же сайта, или с любого другого, во втором случае с сайта проекта SH.

SH представляет из себя набор обычных JS-скриптов (и несколько CSS стилей). Если у Вас тематический сайт и Вам часто приходится выкладывать исходники, то лучше интегрировать SH непосредственно в шаблон.

Теперь можно начинать: 

<head>
 . . .

<script type="text/javascript" src="SH_HOME/scripts/shCore.js"></script>
<script type="text/javascript" src="SH_HOME/scripts/shBrushJScript.js"></script>

<link type="text/css" rel="Stylesheet" href="SH_HOME/styles/shCore.css"/>
<link type="text/css" rel="Stylesheet" href="SH_HOME/styles/shThemeDefault.css"/>

<script type="text/javascript">
     SyntaxHighlighter.config.clipboardSwf = 'SH_HOME/scripts/clipboard.swf';
     SyntaxHighlighter.all()
</script>

 . . .
</head>

В секцию <head>. . .</head> добавляем импорт JS-скриптов и CSS-стилей библиотеки. Для работы SH необходимо ядро - shCore.js, а так же парсеры - "кисти" для конкретных языков. Для примера, в 5-й строке импортирована "кисть" для JavaScript. Соответственно нужно импортировать из "SH_HOME/scripts/" кисти для остальных необходимых языков. (SH_HOME - это путь к SH библиотеке). У Вас он может быть любым, а для он-лайн версии он будет "http://alexgorbatchev.com/pub/sh/версия_библиотеки/". Путь лучше указывать полностью, а не относительно - это гарантирует то, что Ваши RSS-подписчики увидят всю подсвыетку коректно. Аналогично и с CSS-стилями: "shCore.css" - это базовый стиль, а "shThemeDefault.css" - дополнительный. Один из других возможных выбирается из "SH_HOME/styles/". Стоит поэкспериментировать со стилями, не всегда дефаултный хорошо согласуется с общим дизайном. После того, как всё необходимое импортировано, активируем библиотеку - 12-я строка "SyntaxHighlighter.all() ". После этого SH готов разукрашивать все листинги на странице, которые для него приготовлены. В этой же секции можно разместить глобальные настройки.

Всё готово, можно подсвечивать. Для этого помещаем листинг внутри тега <pre>, обязательно указав какую кисть использовать - class="brush: java": 

 . . .
<body>
 . . .

<pre class="brush: java">
    /**
     * Hello World! on Java
     */
    public void SayHello()
    {
        if (counter &lt;= 10)
            System.out.println("Hello World!"); //some comments
    }
</pre>

 . . .
</body>
</html>

После загрузки страницы, SH пробежится по всему содержанию и подсветит все, что находится внутри тега <pre>, согласно выбранной кисти. В итоге в браузере будет отображено так: 

    /**
     * Hello World! on Java
     */
    public void SayHello()
    {
        if (counter <= 10)
            System.out.println("Hello World!"); //some comments
    }

Как Вы заметили, пришлось заменять символ "<" на его код "&lt", и так придётся со всеми спецсимволами. Для этого и была созданна данная утилита. Начиная со второй версии, SH понимает конструкцию CDATA. Соответственно внутри неё можно ничего и не менять: 

<script type="syntaxhighlighter" class="brush: java"><![CDATA[
    /**
     * Hello World! on Java
     */
    public void SayHello()
    {
        if (counter <= 10)
            System.out.println("Hello World!"); //some comments
    }
]]></script>

Но я не сторонник этого способа. Во первых код получается не валидным, (у тега <script> нет параметра class), а во вторых такие листинги скорее всего будут проигнорированы поисковиками. И наверняка RSS-ридеры будут блокировать сам тег <script>, поэтому Ваши подписчики не увидят никаких листингов вообще.

Можно настраивать каждый блок по отдельности:

<pre class="brush: js; ruler: true; first-line: 10; highlight: [2, 4, 6]">...</pre>