среда, 28 марта 2012 г.

SyntaxHighlighter в и для Blogger

Данная статья поможет Вам реализовать в блоге на Blogger подсветку синтаксиса с помощью Java скрипта SyntaxHighlighter. Вот ссылка на сайт, где Вы сможете с ним ознакомиться: http://alexgorbatchev.com/SyntaxHighlighter/

И так для начала давайте определимся со списком поддерживаемых языков, которые у Вас в блоге должны отображаться с подсветкой, в SyntaxHighlighter они называются Brushes (кисти), вот ссылка на перечень кистей: http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/

Определились, поехали дальше, мой список кистей:
- С++ - shBrushCpp.js
- Delphi - shBrushDelphi.js
- SQL - shBrushSql.js
- XML - shBrushXml.js

Теперь вот этот список нам нужно представить в виде Java скрипт, для этого берем вот эту строку:

И вместо “имя_вашей_кисти” вставляем например shBrushCpp.js, прошу заметить, что количеству Ваших кистей должно соответствовать такое же количество таких строк, по итогу у Вас должно получиться приблизительно вот так:






Теперь вставьте перед списком кистей вот эти строки:




Как Вы уже догадались, мы подключаем CSS библиотеки и скрипт «ядра» SyntaxHighlighter. Должно получиться следующее:








А за списком кистей добавим настройки:


Вот результат нашей работы:








Теперь это нам нужно интегрировать в наш шаблон, для этого копируем вышеописанный код в буфер обмена и идём в панель настроек нашего блога, выбираем пункт меню «Шаблон» и кликаем на кнопке «Изменить HTML». В появившемся окошке без страхов и упрёков жмём «Приступить». Опускаемся в самый низ и перед тегом вставляем наш код. Если всё было сделано правильно, то Ваш блог уже умеет подсвечивать синтаксис, если нет, то попробуйте повторить все описанные шаги сначала, только будьте внимательней. Вторая часть статьи ознакомит Вас с тем как этот самый синтаксис подсвечивать.

В SyntaxHighlighter реализовано 2 метода для подсветки, это pre и script. Рассмотрим их отдельно:

PRE
Работают везде, отображаются во всех RSS читалках как обычные pre теги. Основной проблемой этого метода является то, что все «<» должны быть заменены на их HTML представление '<'. Это обеспечит правильную визуализацию. SyntaxHighlighter ищет pre теги, которые имеют специальный атрибут. Формат атрибута такой же, как и атрибут стиля CSS. Единственный обязательный параметр - кисть, который должен быть установлен её псевдонимом.

Пример использования:
function HelloWorld: string;
begin
  Result := 'Hello World!!!'
end;

Результат:
function HelloWorld: string;
begin
  Result := 'Hello World!!!'
end;

SCRIPT
Метод размещает все внутри CDATA, это позволяет вырезать и вставлять код прямо из вашего текстового редактора. Также не требует HTML экранирования тега pre. Тег script удаляется из большинства RSS читалок, так что если вы пользуете SyntaxHighlighter на блоге, Вам лучше пользоваться методом pre. Если вы включаете закрывающий тег сценария, например, /script, даже внутри блока CDATA, большинство браузеров преждевременно закрывает эти теги.

Пример использования:


Результат:


Комментариев нет:

Отправка комментария