Подсвечиваем Любой Код на Сайте с помощью SyntaxHighlighter

В данной статье мы используем версию 3.0.83

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

Для установки этого скрипта, необходимо пройти по ссылке - SyntaxHighlighter. Затем просто скачивайте его на компьютер и следуем указаниям ниже.

Основные Шаги

В архиве есть несколько папок нам понадобятся папки scripts и styles.

Создайте не сервере папки scripts и styles. Закачайте файлы, из архива в соответствующие им папки на сервере scripts и styles.

Затем между тегами head добавьте следующую строку (путь конечно у Вас будет свой будьте внимательны)

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

Далее необходимо подключить языки которые Вы будете использовать (например, ShBrushXml.js для xml, xhtml, xslt, html, xhtml). Выглядит это так:

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

В таблице представлены все языки которые можно подсветить, aliases и файлы для подключения.

Brush name	Brush aliases	File name
ActionScript3	as3, actionscript3	shBrushAS3.js
Bash/shell	bash, shell	shBrushBash.js
ColdFusion	cf, coldfusion	shBrushColdFusion.js
C#	c-sharp, csharp	shBrushCSharp.js
C++	cpp, c	shBrushCpp.js
CSS	css	shBrushCss.js
Delphi	delphi, pas, pascal	shBrushDelphi.js
Diff	diff, patch	shBrushDiff.js
Erlang	erl, erlang	shBrushErlang.js
Groovy	groovy	shBrushGroovy.js
JavaScript	js, jscript, javascript	shBrushJScript.js
Java	java	shBrushJava.js
JavaFX	jfx, javafx	shBrushJavaFX.js
Perl	perl, pl	shBrushPerl.js
PHP	php	shBrushPhp.js
Plain Text	plain, text	shBrushPlain.js
PowerShell	ps, powershell	shBrushPowerShell.js
Python	py, python	shBrushPython.js
Ruby	rails, ror, ruby	shBrushRuby.js
Scala	scala	shBrushScala.js
SQL	sql	shBrushSql.js
Visual Basic	vb, vbnet	shBrushVb.js
XML	xml, xhtml, xslt, html, xhtml	shBrushXml.js

Включаем на страницы каскадные таблицы стилей shCore.css и shThemeDefault.css. Если Вы хотите использовать другую тему вместо shThemeDefault.css подключите другой файл из архива, например shThemeEclipse.css

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

Для того чтобы подсветить конкретный язык, необходимо обернуть Ваш код в теги pre. Допустим Вы хотите подсветить html, то это будет выглядеть так:

<pre class="brush: html;">&lt;table width=&quot;100%&quot; border=&quot;0&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot;&gt;<br />
&lt;tr&gt;<br />
&lt;td&gt;&amp;nbsp;&lt;/td&gt;<br />
&lt;/tr&gt;<br />
&lt;tr&gt;<br />
&lt;td&gt;&amp;nbsp;&lt;/td&gt;<br />
&lt;/tr&gt;<br />
&lt;/table&gt;</pre>

И в конце страницы перед </body> добавляем

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

Чтобы подсветить, например, php, необходимо сменить html на php соответственно.