Подсветка синтаксиса в Друпале. Пошаговая инструкция.

При беглом поиске "drupal syntax highlighting" предлагаются сложные решения, требующие установки модулей, в массе своей не прошедших этап бета-версий. Тот же беглый поиск настойчиво рекомендует библиотеку SyntaxHighlighter, упирая на лёгкость установки и использования. На самом деле, этой библиотеки вполне достаточно для подсвечивания синтаксиса на сайте, построенном на Друпале, без каких-либо дополнительных модулей. Итак, по порядку:

  1. Скачиваем библиотеку по ссылке "download" на странице SyntaxHighlighter. В результате получается архив с именем "syntaxhighlighter_3.0.83.zip" или похожим на него.
  2. Распаковываем эту библиотеку к себе на сайт в поддиректорию "sites/all". Например, внутри "sites/all" создаём директорию "scripts" (чтобы все подобные сторонние скрипты держать в ней), а внутрь разархивируем скачанный файл. Путь к index.html из архива превратится в "/sites/all/scripts/syntaxhighlighter_3.0.83/index.html".
  3. У себя на сайте в настройках Друпала создаём новый формат текста. Для седьмого Друпала это в Administration » Configuration » Content authoring - Add text format, в шестом Друпале это Administer » Site configuration » Input formats - Add input format (/admin/settings/filters/add). В имени формата пишем "Raw HTML", даём администраторам право на его использование и, не включая ни одного фильтра, сохраняем.
    На этом этапе всё уже готово к подсветке. Можно написать новую статью с новым форматом текста и содержанием:
    <pre class="brush: js">
    function foo() {
    }
    </pre>
    
    <script type="text/javascript" src="/sites/all/scripts/syntaxhighlighter_3.0.83/scripts/shCore.js"></script>
    <script type="text/javascript" src="/sites/all/scripts/syntaxhighlighter_3.0.83/scripts/shBrushJScript.js"></script>
    <link href="/sites/all/scripts/syntaxhighlighter_3.0.83/styles/shCore.css" rel="stylesheet" type="text/css" />
    <link href="/sites/all/scripts/syntaxhighlighter_3.0.83/styles/shThemeDefault.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
         SyntaxHighlighter.all();
    </script>
    

    и получить в результате красиво раскрашенный код:

    function foo() {
    }
    
  4. Однако повторять строчки импорта скриптов и стилей каждый раз скучно, поэтому заводим новый блок с описанием "Syntax Highlighter Block", в формате выбираем "Raw HTML", а в теле блока пишем:
    <script src="/sites/all/scripts/syntaxhighlighter_3.0.83/scripts/shCore.js" type="text/javascript"></script>
    <script src="/sites/all/scripts/syntaxhighlighter_3.0.83/scripts/shAutoloader.js" type="text/javascript"></script>
    <link href="/sites/all/scripts/syntaxhighlighter_3.0.83/styles/shCore.css" rel="stylesheet" type="text/css"/>
    <link href="/sites/all/scripts/syntaxhighlighter_3.0.83/styles/shThemeDefault.css" rel="stylesheet" type="text/css"/>
    
    <script type="text/javascript">
    function path()
    {
      var args = arguments, result = [];
      for(var i = 0; i < args.length; i++)
          result.push(args[i].replace('@', '/sites/all/scripts/syntaxhighlighter_3.0.83/scripts/'));
      return result
    };
     
    SyntaxHighlighter.autoloader.apply(null, path(
      'applescript            @shBrushAppleScript.js',
      'actionscript3 as3      @shBrushAS3.js',
      'bash shell             @shBrushBash.js',
      'coldfusion cf          @shBrushColdFusion.js',
      'cpp c                  @shBrushCpp.js',
      'c# c-sharp csharp      @shBrushCSharp.js',
      'css                    @shBrushCss.js',
      'delphi pascal          @shBrushDelphi.js',
      'diff patch pas         @shBrushDiff.js',
      'erl erlang             @shBrushErlang.js',
      'groovy                 @shBrushGroovy.js',
      'java                   @shBrushJava.js',
      'jfx javafx             @shBrushJavaFX.js',
      'js jscript javascript  @shBrushJScript.js',
      'perl pl                @shBrushPerl.js',
      'php                    @shBrushPhp.js',
      'text plain             @shBrushPlain.js',
      'py python              @shBrushPython.js',
      'ruby rails ror rb      @shBrushRuby.js',
      'sass scss              @shBrushSass.js',
      'scala                  @shBrushScala.js',
      'sql                    @shBrushSql.js',
      'vb vbnet               @shBrushVb.js',
      'xml xhtml xslt html    @shBrushXml.js'
    ));
    </script>
    <script type="text/javascript">
      SyntaxHighlighter.all();
    </script>
    

    Если нужно, в адресах ссылок и в функции path() исправляем путь на правильный.

  5. Идём в настройки темы и помещаем блок Syntax Highlighter в подвал страницы.
  6. Создаём новую статью (формат текста - Full Html, Raw HTML больше не требуется) и пишем для проверки:
    <pre class="brush: c#">
    static void WarAndPeace(string[] args) {
      Console.WriteLine("Привет, Мир!");
      Console.WriteLine("Здорово, Война!");
    }
    </pre>
    
  7. Празднуем победу и читаем инструкции, если что-то непонятно с конфигурацией.
Оценка: