Подсветка синтаксиса (Drupal 7 + CKEditor + GeSHi)

Подсветка синтаксиса штука очень удобная, особенно при написании тематических заметок. Вот и я решил воспользоваться всеми прелестями highlighter'ов. На первый взгляд задача показалась мне довольно тривиальной, но при ближайшем рассмотрении оказалось не так то просто подружить подобный функционал с друпалом.

Итак, в наличие у нас:

Скачиваем и приступаем:

  1. Распаковываем плагин GeSHi в папку /sites/all/libraries/geshi таким образом, чтобы путь до файла geshi.php выглядел следующим образом:  /sites/all/libraries/geshi/geshi.php​;
  2. Устанавливаем модуль Geshifilter. Если в п.1 плагин был установлен верно, модуль автоматически подхватит его и на странице /admin/reports/status будет написано нечто вроде "GeSHi filter - Найденная версия библиотеки GeSHi 1.0.8.11";
  3. Устанавливаем модуль CKEditor;
  4. Распаковываем плагин CKEditor в папку /sites/all/libraries/ckeditor таким образом, чтобы путь до файла ckeditor.js выглядел следующим образом:  /sites/all/libraries/ckeditor/ckeditor.js​;
  5. Теперь необходимо все это дело связать воедино и заставить работать. Для этого нужно скачать и установить следующие надстройки для плагина CKEditor. Скачиваем: codesnippetgeshicodesnippetajaxwidgetdialogdialoguilineutilsclipboard;
  6. Распаковываем надстройки в папку плагина CKEditor таким образом, чтобы путь до файлов plugin.js получился вот таким /sites/all/libraries/ckeditor/plugins//plugin.js (например, /sites/all/libraries/ckeditor/plugins/codesnippet/plugin.js);
  7. Распаковываем надстройки в папку модуля CKEditor таким образом, чтобы путь до файлов plugin.js получился вот таким /sites/all/modules/ckeditor/plugins//plugin.js (например, /sites/all/modules/ckeditor/plugins/codesnippet/plugin.js);
  8. Переходим к настройке.

В корне папки модуля CKEditor есть файл с именем ckeditor.config.js. Открываем его, ищем строку 

config.extraPlugins = '';

И заменяем ее на следующие строки: 

  1. config.extraPlugins = 'codesnippet';
  2. config.extraPlugins = 'codesnippetgeshi';
  3. config.extraPlugins = 'xml';
  4. config.extraPlugins = 'ajax';
  5. config.extraPlugins = 'dialog';
  6. config.extraPlugins = 'dialogui';
  7. config.extraPlugins = 'lineutils';
  8. config.extraPlugins = 'widget';
  9. config.extraPlugins = 'clipboard';

Затем ищем: 

['DrupalBreak', 'DrupalPageBreak']

И меняем на 

['DrupalBreak', 'DrupalPageBreak', 'CodeSnippet']

Далее, находим файл в папке плагина CKEditor /sites/all/libraries/ckeditor/config.js и вставляем в функцию 

CKEDITOR.editorConfig

Следующий код 

  1. config.extraPlugins = 'codesnippet';
  2. config.extraPlugins = 'codesnippetgeshi';
  3. config.extraPlugins = 'xml';
  4. config.extraPlugins = 'ajax';
  5. config.extraPlugins = 'dialog';
  6. config.extraPlugins = 'dialogui';
  7. сonfig.extraPlugins = 'lineutils';
  8. config.extraPlugins = 'widget';
  9. config.toolbar_Full.push(['CodeSnippet']);

Далее, необходимо исправить недочет текущей (на данный момент) версии модуля CKEditor. Для этого идем в папку с модулем  /sites/all/modules/ckeditor/includes и открываем файл ckeditor.admin.inc. В нем ищем функцию 

  1. function ckeditor_toolbar_buttons_all() {
  2. ...
  3. 'Image' => array('name' => 'Image', 'icon' => $path . '/images/buttons/image.png', 'title' => 'Image', 'row' => 2),
  4. ...
  5. }

И после строки с ключом Image вставляем следующую строчку 

  1. 'CodeSnippet' => array('name' => 'CodeSnippet', 'icon' => $path . '/images/buttons/codesnippet.png', 'title' => 'Code Snippet', 'row' => 2),

Сохраняем и закрываем. Далее переходим /sites/all/libraries/geshi/​ и создаем в этой директории файл с именем colorize.php со следующим содержимым 

  1. <?php
  2.  
  3. if ( function_exists( 'stream_resolve_include_path' ) && stream_resolve_include_path( 'geshi.php' ) === FALSE ) {
  4. die( '<pre class="html">Please install the GeSHi library. Refer to plugins/codesnippetgeshi/README.md for more information.</pre>' );
  5. }
  6.  
  7. include_once 'geshi.php';
  8.  
  9. $json_string = file_get_contents( 'php://input' );
  10. $json_object = json_decode( $json_string );
  11.  
  12. $geshi = new GeSHi( $json_object->html, $json_object->lang );
  13.  
  14. echo $geshi->parse_code();
  15.  
  16. ?>

Этот файл будет принимать запросы от модуля CKEditor, обрабатывать их и возвращать "подсвеченные" результаты.

Теперь осталось только настроить модуль CKEditor в админке. Переходим /admin/config/content/ckeditor, выбираем нужный профиль (у меня это Full), жмем "Изменить" и в секции "Внешний вид редактора" включаем галочки напротив установленных ранее надстроек (codesnippetgeshi, codesnippet, ajax, widget, dialog, dialogui, lineutils, clipboard). В этой же секции перетаскиваем кнопку CodeSnippet на свою панель. Переходим в секцию "Дополнительные настройки" и в поле "Пользовательская конфигурация JavaScript" добавляем следующую строку 

  1. config.codeSnippetGeshi_url = 'http:\/\/yoursite.com\/sites\/all\/libraries\/geshi\/colorize.php';

Жмем сохранить и проверяем работу новоиспеченного функционала на какой-нибудь форме вашего сайта (параллельно можно делать лестные оценки своему терпению :) ).