SyntaxHighlighter 2.0. Подсветка синтаксиса программного кода в блоге

Музыка: LTJ Bukem - Earth Volume 1 >> LTJ Bukem - Earth Volume 2

Обустраивая свой блог, в предыдущей статье столкнулся с необходимостью подсветки кода исходников в блоге. Google находит много всяких разных подсветчиков по запросу "подсветка кода в blogger", но мне понравился скрипт SyntaxHighlighter.
SyntaxHighlighter - это полнофункциональный самостоятельный скрипт подсветки синтаксиса (code syntax highliter) поддерживающий кучу языков, имеющий удобный небольшой тулбарчик с кнопками, позволяющими выводить исходник в отдельном окне и копировать его в буфер обмена. Скрипт абсолютно мультиплатформенный и может работать в любом блоге хоть в WordPress, хоть в Joomla!, хоть в Blogger.com.
Итак, хватит о том, какой SyntaxHighlighter хороший и красивый, далее о том, как его установить в свой блог на blogger.com.

1. Зайди на страничку своего блога, далее Настроить -> Макет -> Изменить HTML
2. Добавь в код своей странички, непосредственно перед закрывающим тэгом </head> следующий код:
   

   
   <link href='http://bitbucket.org/alexg/syntaxhighlighter/raw/8815b7f713eb/Styles/shCore.css' rel='stylesheet' type='text/css'/>
   <link href='http://bitbucket.org/alexg/syntaxhighlighter/raw/8815b7f713eb/Styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
   <script src='http://bitbucket.org/alexg/syntaxhighlighter/raw/8815b7f713eb/Scripts/shCore.js' type='text/javascript'/>
   <script src='http://bitbucket.org/alexg/syntaxhighlighter/raw/8815b7f713eb/Scripts/shBrushPhp.js' type='text/javascript'/>
   <script src='http://bitbucket.org/alexg/syntaxhighlighter/raw/8815b7f713eb/Scripts/shBrushXml.js' type='text/javascript'/>
   <script src='http://bitbucket.org/alexg/syntaxhighlighter/raw/8815b7f713eb/Scripts/shBrushCSharp.js' type='text/javascript'/>
   <script type='text/javascript'>
    SyntaxHighlighter.config.bloggerMode = true;
    SyntaxHighlighter.all();
   </script>
   

   Если ты обратишь внимание, на текст свойства src тэга script, то увидишь, что в 4, 5 и 6-й строках мы подключаем необходимые нам языки (PHP, HTML и C#). Для подключения любого другого языка нужно, всего лишь, скопировать любую из этих трёх строк и изменить имя подключаемого файла на необходимое. Полный список поддерживаемых языков, их алиасов и файлов, необходимых для их подсветки, можно найти на сайте разработчика.


3. Сохрани изменённый шаблон.


4. Теперь, чтобы исходники в блоге отображались с помощью SyntaxHighlighter, тебе необходимо заключать куски кода в тэги <pre class="brush: php"></pre>, заменяя значение свойства brush на алиас языка, синтаксис которого необходимо подсвечивать. Список поддерживаемых алиасов можно посмотреть на сайте разработчика. Например, в этой статье я использовал нижеприведённый код:
   

   
   <pre class="brush: html">
    &lt;p&gt;Пример HTML-кода&lt;/p&gt;
   </pre>
   

Всё хорошо, но есть одно НО, для того, чтобы всё корректно работало, необходимо внимательно следить, чтобы в исходниках, которые ты вставляешь в блог, символ "<" был заменён на "&lt;".