Подсветка синтаксиса программного кода для отображения на веб-страницах (версия 1.1)

Автор:
Источник: /highlight.php

Как показать программный код на веб-странице красиво, с неоходимой подсветкой синтаксиса, и чтобы не форматировать его в ручную. Очевидно, что просто тег <code>, придуманный когда-то для отображения программного кода, тут не подойдет. Но велосипед уже изобретен - имеются готовые, бесплатные решения, для наглядного отображения программного кода на веб-страницах.

1. SyntaxHighlighter 2

Поддерживаемые языки: Bash/shell, C#, C++, CSS, Delphi, Diff, Groovy, JavaScript, Java, Perl, PHP, Plain Text, Python, Ruby, Scala, SQL, Visual Basic, XML.

Установка SyntaxHighlighter достаточно проста. Распакуйте набор javascript-файлов в директорию с сайтом.

Добавьте следующие строки в заголовок HTML-документа:

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

После них необходимо добавить файлы скриптов, а именно ядро и набор файлов, отвечающих за подсветку синтаксиса требуемых языков программирования, например, для подсветки когда на С++ нам потребуется подключить два файла:

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

Далее требуется добавить в заголовок функцию, отвечающую за выделение синтаксиса.

<script type="text/javascript">
SyntaxHighlighter.all();
</script>

Блоки с программным кодом, который требует подсветки, следует оформлять следующим образом:

<pre class="brush: cpp">
cout << "hello world!";
</pre>

Скачать SyntaxHighlighter 2 и изучить подробности можно на сайте разработчика:
http://alexgorbatchev.com/wiki/SyntaxHighlighter

2. SyntaxHighlighter 1.51

Набор javascript-файлов, которые на клиентской стороне выполняют форматирование и подсветку синтаксиса программного кода.

Поддерживаемые языки: C++, C#, CSS, Delphi, Java, Java Script, PHP, Python, Ruby, Sql, VB, XML/HTML.

Использовать syntaxhighlighter на своем сайте достаточно просто, для этого в заголовок документа помещаются строки:

<link type="text/css" rel="stylesheet" href="Styles/SyntaxHighlighter.css"></link>
<script language="javascript" src="Scripts/shCore.js"></script>
<script language="javascript" src="Scripts/shBrushXml.js"></script>
... тут можно подключать другие файлы *.js из пакета syntaxhighlighter,
	каждый файл отвечает за стилизацию своего языка программирования ...

Далее, все вставки кода, которые требуется отформатировать, помещаются в блоки вида:

<pre name="code" class="html">
... некоторый код здесь ...
</pre>

или

<textarea name="code" class="c#" cols="60" rows="10">
... некоторый код здесь ...
</textarea>

В аттрибуте class задается язык программирования, для которого выполняется форматирование.

После того, как все вставки сделаны, требуется запустить процесс форматирования кода. Для этого необходимо вставить следующий код ближе к концу страницы:

<script language="javascript">
dp.SyntaxHighlighter.ClipboardSwf = 'Scripts/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');
</script>

Скачать syntaxhighlighter и изучить подробности можно тут:
http://code.google.com/p/syntaxhighlighter/

Syntaxhighlighter используется на этом сайте для отображения фрагментов кода.

3. star-light

Так же, как и syntaxhighlighter, приложение star-light выполняется на клиентской стороне.
Поддерживаемые языки: JavaScript, HTML, CSS, XML, PHP, Email (выделение цитат), VBScript, T-SQL.

Использование инструмента star-light еще более простое - в заголовок страницы надо добавить лишь подключение CSS файла:

<link rel="stylesheet" href="star-light.css" type="text/css"/>

<pre class="html">
... некоторый код здесь ...
</pre>

Домашняя страничка проекта star-light:
http://dean.edwards.name/weblog/2005/06/star-light/

Пример использования:
http://dean.edwards.name/my/examples/star-light/

Скачать star-light можно здесь:
http://deanedwards.googlecode.com/svn/trunk/download/star-light.zip