Syntax Highlighting Code

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

Сама разработка называется syntaxhighlighter, как то сжато получается, - можно написать Syntax Highlighting Code. Сайт проекта http://alexgorbatchev.com, http://code.google.com/p/syntaxhighlighter.

Построена система красиво на чистых JavaScript да CSS. На момент моего увлекательного тестирования я использовал версию 2.1.364.

В чем ее смысл? Если постить исходники так как есть то браузер не будет кое где учитывать отступы, кавычки, квадратные скобки и т.д. Можно использовать тег pre - тогда мы сохраним исходную формулировку и отступы. Но как не крути – нет той подсветки как в средах разработки или специальных вьюверах. Есть и специальные программы, с помощью которых можно перевести текст исходного кода - в красивый подсвеченный HTML. После чего остается его только вставить на страницу. Но зачем все эти прелести, когда уже готовая система сделает все за вас.

Как использовать?
Скачиваем, распаковываем, получаем структуру

[scripts]
shBrushAS3.js
shBrushBash.js
shBrushColdFusion.js
shBrushCpp.js
shBrushCSharp.js
shBrushCss.js
shBrushDelphi.js
shBrushDiff.js
shBrushErlang.js
shBrushGroovy.js
shBrushJava.js
shBrushJavaFX.js
shBrushJScript.js
shBrushPerl.js
shBrushPhp.js
shBrushPlain.js
shBrushPowerShell.js
shBrushPython.js
shBrushRuby.js
shBrushScala.js
shBrushSql.js
shBrushVb.js
shBrushXml.js
shCore.js
shLegacy.js
clipboard.swf

[src]
shCore.js
shLegacy.js

[styles]
shCore.css
shThemeDefault.css
shThemeDjango.css
shThemeEclipse.css
shThemeEmacs.css
shThemeFadeToGrey.css
shThemeMidnight.css
shThemeRDark.css
help.png
magnifier.png
page_white_code.png
page_white_copy.png
printer.png

Поддерживаемые языки

Brush name	Brush aliases	File name
ActionScript3	as3, actionscript3	shBrushAS3.js
Bash/shell	bash, shell	shBrushBash.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
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

Есть и дополнительные языки.

В каталоге Scripts находятся скрипты (как ни странно) в Styles стили, вам нужно эти скрипты подключить к сайту, для этого нужно дописать в шаблоне код:

<link href='http://alexgorbatchev.com/pub/sh/2.1.364/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/2.1.364/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>

Для оптимизации лучше использовать только те отношения к языкам которые вы будете использовать. Например если вы используете С# то можно ограничиться:

<link href='http://alexgorbatchev.com/pub/sh/2.1.364/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/2.1.364/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>

файлы *Core нужно использовать обязательно, - это ядро. Если вы имеете возможность закачать скрипты себе на сайт то пишите относительный путь к скриптам, например:

Ели хостинг не позволяет - то можно использовать сторонний, куда вы можете залить

src='http://domain.com/Scripts/shBrushCSharp.js'

где http://domain.com/ ваш сайт со скриптами, или сайт разработчика как в моем случае:

Все! Для того чтобы запостить, например, код:

namespace MenuGame.GameScreenManager
{
    class GameScreenInput
    {
        public bool Up;
        public bool Down;
        public bool Left;
        public bool Right;
}
}

нужно модифицировать его до вида

namespace MenuGame.GameScreenManager
{
    class GameScreenInput
    {
        public bool Up;
        public bool Down;
        public bool Left;
        public bool Right;
}
}

и вставить данный HTML код в вашу статью.

Нюансы.
В теге pre название класса за brush – это название языка на котором написан ваш исходный код.
Если вы хотите чтобы подсвечивались некоторые рядки:

class="brush: php; highlight: [1, 4]"

Если вы не хотите чтобы не отображались номера рядков используйте опцию

class="brush: php; gutter: false"

Если вы не хотите чтобы отображалась панель управления вверху кода используйте опцию

class="brush: php; toolbar: false;"

Если вы хотите чтобы автоматически не переводило на новую строчку

class="brush: plain; wrap-lines: false"

Спасибо авторам. Приятной работы.