Подсветка синтаксиса языков программирования в Drupal 7 с помощью модуля Syntax Highlighter.

image

15.02.12
Comments 4

Совсем недавно я установил на свой блог модуль подсветки синтаксиса языков программирования Geshi Filter, но сегодня я его удалил по той причине что нашел аналогиный по функционалу который мне понравился больше, называется он Syntax Highlighter, сегодня я в подробностях опишу как установить и настроить данный модуль.

Итак давайте приступим к установке. Первым делом скачайте модуль интеграции Syntax Highlighter 7.x, установите его в папку sites/all/modules/, затем скачайте сам скрипт Syntax Highlighter с сайта разработчика и установите его в папку sites/all/libraries/. После идем в админку сайта и включаем модуль Syntax Highlighter.

Модуль установлен, теперь самое время приступить к его настройке. Первым делом нужно подключить модуль к одному из форматов ввода, для этого пройдите Конфигурация –> Форматы ввода, давайте отредактируем формат Full Html. Находим в списке доступных  фильтров фильтр Syntax Highlighter ставим чекбокс напротив него.

А сейчас очень важный момент, вам стоит убедиться, что в упорядоченном списке фильтров, фильтр «Syntax Highlighter» находится на первом месте.

После нужно сохранить настройки формата ввода Full Html.

Для того чтобы увидеть как работает данный модуль создадим статью, и вставим в исходный код любой кусок PHP кода который заключим в специальные теги <pre class="brush:php"></pre>, кстати класс тега <pre> будет зависеть от нужного вав языка программирования, может быть как brush:html, brush:css и т.д, в результате у нас получится вот такой симпатичный блок.

        <?php print $messages; /* Выводим сообщения системы */ ?>
          <!-- Заголовок с суффиксом и преффиксом -->
        <?php print render($title_suffix); ?>
        <?php if($title): ?> <h1><?php print $title; ?></h1><?php endif; ?>
        <?php print render($title_suffix); ?>
        <?php print render($tabs); /* Выводим табы */ ?>
        <?php print render($page['content']); /* Выводим регион "контент" */ ?>

Когда я установил этот модуль мне ужасно не понравилось что в правом углу сгенерированного блока выводится блок с ссылкой на сайт автора скрипта, но я нашел способ как удалить его, если вы тоже хотите тоже от него избавиться читайте дальше эту статью.

Для начала пройдем в папку libraries/syntaxhighlighter_3.0.83/ scripts/ и откроем файл shCore.js, как видите весь код в этом файле перевернут с ног наголову, тоесть этот файл зашифрован. Для того чтобы расшифровать его будем использовать один онлайн сервис. Скопируйте весь код в этом файле. Пройдите на сайт strictly-software.com/unpacker. На сайте найдите текстовое поле с заголовком «Paste Packed Code Here» (Вставьте сюда запакованный код) , вставьте туда код и нажмите на кнопку Unpack. Из текстового поля, которое находится чуть ниже скопируйте полученный код и замените им весь код файла libraries/syntaxhighlighter_3.0.83/ scripts/shCore.js. Теперь вам нужно найти в этом файле строку:

list: ["expandSource", "help"]

и заменить ее на:

list: ["expandSource"]

Пройдите на сайт и убедитесь что кнопка «?» исчезла, но блок в котором она находилась по прежнему зеленого цвета. Этот недочет можно устранить с помощью CSS. Пройдите в папку libraries/syntaxhighlighter_3.0.83/styles/ и откройте файл shThemeDefault.css. Найдите там строки:

.syntaxhighlighter .toolbar {
color: white !important;
background: #6ce26c !important;
border: none !important;
}

 Уберите от сюда свойство background: #6ce26c !important;.

После всех этих манипуляций можете (необязательно) обратно запаковать код скрипта, воспользовшись вот этим сервисом .

Если вы все сделали правильно блок с рекламной кнопкой «?» исчезнет.

Tags: 

Комментарии

Станислав 20.04.13

Приветствую!
У Вас указано что чтоб синтакс подсветился необходимо разместить в специальных тегах. Каких?

admin 21.04.13

Добрый день, дополнил статью.

Станислав 21.04.13

Отлично. Спасибо. А полного списка поддерживаемы pre классов нет?

admin 24.04.13

У меня нет, в гугле есть.

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