Блог Vaden Pro

Все о самостоятельном создании и продвижении сайтов

Делаем подсветку синтаксиса кода в Drupal 7 с GeSHi Filter.

Дата:30.11.14 в 2:00
Раздел: 

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

Для организации подсветки кода на сайте можно использовать модуль под названием GeSHi Filter. Разработчики этого модуля утверждают, что он обеспечивает подсветку синтаксиса более чем 130 языков программирования. Достоверность этой информации не подтверждена. Но с самыми распространенными программными языками этот модуль справляется просто отлично. Пример вывода кода этим модулем:

function checkArr(n) { //создаем массив из чисел от 2 до n 
  var arr = [];
  for (c = 0; c < (n-1); c++) {
  arr[c] = c+2;
}

Сначала качаем

библиотеку

модуля и распаковываем ее в папку ваш_сайт/sites/all/libraries. Если этой папки у Вас нету, то ее нужно создать.

Далее устанавливаем обычным способом сам

Geshi

Непосредственно после завершения его установки надо будет добавить новый фильтр в формат ввода. Это делается так:

  1. Сначала надо зайти в настройки сайта.
  2. Выбрать «Работа с содержимым» и перейти в «форматы текста».
  3. Выбрать оптимальный формат, например Full HTML
  4. Активировать GeSHi filter.

Drupal 7 подключаем Geshi Filter

Теперь на сайте есть подсветка синтаксиса. Только она пока еще не настроена под индивидуальные требования. Для выполнения настройки надо зайти в настройки модуля. Теперь на мониторе в меню появляется несколько разделов. В первом, настройки библиотеки, ничего менять не надо. Второй, настройка тегов, отвечает за то, какие именно теги будут активировать подсветку синтаксиса. Я выбрал вариант как на скриншоте, чтобы избежать случайного сбоя фильтра при добавлении кода. 

Drupal 7 настройка Geshi Filter

Раздел под названием "опции подсветки синтаксиса" отвечает за настройки языка, нумерацию строк и т.п.

Drupal настройка Geshi Filter

Стилизация, макеты и CSS (это четвертый раздел)- можно оставить все настройки по умолчанию.

Drupal настройка Geshi Filter

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

Drupal настройка тегов Geshi Filter

После выполнения всех настроек на странице нашего материала появится подсказка как активировать подсветку кода в соответствии со всеми нашими настройками.

Drupal подсказка как активировать подсветку кода

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

Drupal использование Geshi Filter вместе со CKEditor

Оценок: 3 (средняя 5 из 5)

Оценка: 
Понравилась статья? Расскажите о ней друзьям:

Курсы по Drupal (в открытом доступе)