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

Для организации подсветки кода на сайте можно использовать модуль под названием 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.

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

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

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

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

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