Подсветка синтаксиса кода в Drupal. Настройка FCKEditor + Syntax Highlighter

Искал на днях очередные маны. На одном из сайтов понравилась подсветка синтаксиса кода. В плане функциональности - оно, вроде как, толку нету - всё равно люди копипастом пользуются, но смотрится неплохо. Вот решил на нашем сайте организовать аналогичное. Первым делом начал гуглить. Нашлось 2 варианта: TinyMCE + GeSHi и FCKEditor + Syntax Highlighter. Т.к. на нашем сайте прикручен именно FCKEditor - будем рассматривать настройку связки именно FCKEditor + Syntax Highlighter. Итак, приступим.

Нам понадобится:

1. Уже установленный, настроеный сайт на Drupal 6.X
2. FCKeditor 2.6.6. Качаем со странички или напрямую
   
3. Модуль для Drupal - FCKeditor 6.x-2.1. Качаем со странички или по ссылке напрямую
   
4. Непосредственно сам Syntax Highlighter. Качаем отсюда
5. Модуль для Drupal - Systax Highlighter 6.x-1.22. Качаем со странички или сразу по ссылке
6. Плагин для FCKeditor - Systax Highlighter 2.1.0. Качаем отсюда (на всякий пожарный приаттачил его к статье)
   

cd /usr/local/src/
mkdir hl
cd /usr/local/src/hl/
wget downloads.sourceforge.net/project/fckeditor/FCKeditor/2.6.6/FCKeditor_2.6.6.tar.gz?use_mirror=citylan ftp.drupal.org/files/projects/fckeditor-6.x-2.1.tar.gz alexgorbatchev.com/downloads/grab.php?name=sh ftp.drupal.org/files/projects/syntaxhighlighter-6.x-1.22.tar.gz www.psykoptic.com/userfiles/files/FCKEditor-syntaxhighlight_2.1.0.zip
mv grab.php?name=sh syntaxhighlighter_2.1.364.zip

Распакуем архивы и раскидаем их по каталогам. Сначала раскидаемся с модулями для Drupal.

tar xzfv fckeditor-6.x-2.1.tar.gz
tar xzfv syntaxhighlighter-6.x-1.22.tar.gz
mv fckeditor /[путь]/[до]/[корня]/[сайта]/modules/
mv syntaxhighlighter /[путь]/[до]/[корня]/[сайта]/modules/

Распакуем FCKeditor и Systax Highlighter и раскидаем их по каталогам. Обратите внимание, что FCKeditor кладётся в
/[путь]/[до]/[корня]/[сайта]/modules/fckeditor/
а syntaxhighlighter в каталог
/[путь]/[до]/[корня]/[сайта]/sites/all/libraries/

tar xzfv FCKeditor_2.6.6.tar.gz
mv -f fckeditor/* /var/www/linux16.net/modules/fckeditor/fckeditor
rm -rf fckeditor
mkdir -p /[путь]/[до]/[корня]/[сайта]/sites/all/libraries/syntaxhighlighter
unzip syntaxhighlighter_2.1.364.zip -d /[путь]/[до]/[корня]/[сайта]/sites/all/libraries/syntaxhighlighter

Распакуем и положим плагин FCKeditor - Systax Highlighter

unzip FCKEditor-syntaxhighlight_2.1.0.zip -d /[путь]/[до]/[корня]/[сайта]/modules/fckeditor/plugins

Теперь есть один ньюанс. Разработчик данного модуля, включил в выпадающее меню не все доступные языки. Остались недоступными Bash, erlang и некоторые другие. Чтобы их включить, отредактируйте файл
/[путь]/[до]/[корня]/[сайта]/modules/fckeditor/plugins/syntaxhighlight2/dialog/fck_syntaxhighlight.html
Найдите блок

                <td width="372">
                    <select id="ddLang">
                        <option value="c++">C++</option>
                        <option value="csharp">C# </option>
                        <option value="css">CSS </option>
                        <option value="delphi">Delphi</option>
                        <option value="java">Java </option>
                        <option value="jscript">Java Script</option>
                        <option value="php">PHP</option>
                        <option value="python">Python</option>
                        <option value="ruby">Ruby</option>
                        <option value="sql">SQL</option>
                        <option value="vb">VB.NET</option>
                        <option value="xhtml">XML/HTML</option>
                    </select>
                </td>

И добивьте нужные языки. Их список и список алиасов можно найти в каталоге
/[путь]/[до]/[корня]/[сайта]/sites/all/libraries/syntaxhighlighter/scripts
Делаете cat на каждый файл, в имени которого есть *Brush*.js Последние строки показывают название языка и его алиас

SyntaxHighlighter.brushes.Bash.aliases          = ['bash', 'shell'];

Запоминаете названия и алиасы тех языков, которые Вам понадобятся и вписываете их в
[путь]/[до]/[корня]/[сайта]/modules/fckeditor/plugins/syntaxhighlight2/dialog/fck_syntaxhighlight.html
В моём случае получилось следующее.

                <td width="372">
                    <select id="ddLang">
                        <option value="bash">Bash</option>
                        <option value="c++">C++</option>
                        <option value="csharp">C# </option>
                        <option value="css">CSS </option>
                        <option value="diff">Diff</option>
                        <option value="erlang">Erlang</option>
                        <option value="java">Java </option>
                        <option value="javafx">JavaFX </option>
                        <option value="jscript">Java Script</option>
                        <option value="php">PHP</option>
                        <option value="perl">Perl</option>
                        <option value="plain">Plain</option>
                        <option value="powershell">PowerShell</option>
                        <option value="python">Python</option>
                        <option value="ruby">Ruby</option>
                        <option value="sql">SQL</option>
                        <option value="xhtml">XML/HTML</option>
                    </select>
                </td>

Теперь надо зарегистрировать плагин в друпаловском модуле. Для этого отредактируем
/[путь]/[до]/[корня]/[сайта]/modules/fckeditor/fckeditor.config.js
Найдём строки

//uncomment these three lines to enable teaser break and page break plugins
//remember to add 'DrupalBreak' and 'DrupalPageBreak' buttons to the toolbar
FCKConfig.Plugins.Add( 'drupalbreak', 'en,pl,ru' ) ;
FCKConfig.Plugins.Add( 'imgassist' ) ;

и допишем после них следующее

// ----------------------
// Configure Syntax highlighter for 2.0.x
FCKConfig.Plugins.Add('syntaxhighlight2', 'en');
// default language options:
// c++,csharp,css,delphi,java,jscript,php,python,ruby,sql,vb,xhtml
FCKConfig.SyntaxHighlight2LangDefault = 'bash'; // here you can add the language of your preference
FCKConfig.AutoGrowMax = 400 ;

Помимо этого, надо добавить кнопку в интерфейс fckeditor. Для этого всё в этом же файле, в блоке FCKConfig.ToolbarSets['DrupalFull'] пропишем кнопку

 FCKConfig.ToolbarSets['DrupalFull'] = [ 
['Source','SyntaxHighLight2'], 
['Cut','Copy','Paste','PasteText','PasteWord'], 
['Undo','Redo','-','Find',' Replace','-','SelectAll','RemoveFormat'], 
['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'], 
['OrderedList','UnorderedList','-','O utdent','Indent','Blockquote'], 
['JustifyLeft','JustifyCenter','JustifyRight'],

Аналогично можно дописать кнопку в интерфейс 'DrupalBasic'. Делается также, только несколькими строками ниже. Всё, подготовительные работы закончены. Теперь включим модули. Идём на сайт "Управление" » "Конструкция сайта" » "Модули" Включаем модули FCKeditor и Syntax highlighter. После включения Syntax highlighter надо отредактировать форматы ввода, фильтр Full HTML. Идём "Управление" » "Настройка сайта" » "Форматы ввода" Жмём "Настройть" напротив Full HTML. В фильтрах включаем "Syntax Highlighter" и выключаем (если включени) "Фильтр URL". Жмём "Сохранить настройки". Теперь идём "Управление" » "Настройка сайта" » "Syntax highlighter" и выбираем языки, которые хотим подсвечивать. Помимо этого можно поэкспериментировать над темами оформления. С настройкой Syntax Highlighter закончили. Теперь последние штрихи в настройке FCKeditor.

Идём в адмикуи постави разрешения на доступ к модулю разным группам. Делается это тут "Управление" » "Управление пользователями" » "Разрешения". В блоке "модуль fckeditor" ставим галочки напротив групп, которым разрешается доступ к FCKeditor. Теперь создадим профили непосредственно в самом FCKeditor. Идём "Управление" » "Настройка сайта" » "FCKeditor". Жмём "Создать новый профиль".

Основные установки:

Обзываем профиль, как хочется, включаем в него нужные группы.

Внешний вид редактора:

Выбираем панель инструментов, соответсвенно группе, на которую заводите профиль. Выше, когда регистрировали кнопку Syntax highlighter, прописали её в интерфейс DrupalFull и DrupalBasic. Соответсвенно не забываем, если необходимо, выбрать именно эти виды интерфейсов.

Быстро пробежавшись по настройкам, допилите модуль под свои хотелки. Как закончите, жмите "Сохранить".

Проверим, всё ли получилось. Идём "Создать материал" » "Страница". Должна появиться следующая кнопка

Нажав на неё откроется окно, в которое надо вставить код и выбрать нужную подсветку синтаксиса. Помимо этого, во вкладке "Advanced" можно покрутить некоторые параметры.

Результат работы модуля подсветки синтаксиса Вы можете видеть чуть выше в статье.

Удалим скачанное из каталога /usr/local/src/hl

rm -rf /usr/local/src/hl

Вот вроде и всё. Будут вопросы или замечания - пишите в камментах, постараюсь ответить.