среда, 15 апреля 2009 г.

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;".

3 комментария:

  1. А как тулбар подключить?Все хорошо,а его нету.И вопрос для Джумлы подойдет.Все плагины с глюками(

    ОтветитьУдалить
  2. На счёт тулбара не знаю, у меня он сам появляется. Для жумлы подойдёт, как и для всего другого.

    ОтветитьУдалить