Подсветка синтаксиса в Друпале. Пошаговая инструкция.
При беглом поиске "drupal syntax highlighting" предлагаются сложные решения, требующие установки модулей, в массе своей не прошедших этап бета-версий. Тот же беглый поиск настойчиво рекомендует библиотеку SyntaxHighlighter, упирая на лёгкость установки и использования. На самом деле, этой библиотеки вполне достаточно для подсвечивания синтаксиса на сайте, построенном на Друпале, без каких-либо дополнительных модулей. Итак, по порядку:
- Скачиваем библиотеку по ссылке "download" на странице SyntaxHighlighter. В результате получается архив с именем "syntaxhighlighter_3.0.83.zip" или похожим на него.
- Распаковываем эту библиотеку к себе на сайт в поддиректорию "sites/all". Например, внутри "sites/all" создаём директорию "scripts" (чтобы все подобные сторонние скрипты держать в ней), а внутрь разархивируем скачанный файл. Путь к index.html из архива превратится в "/sites/all/scripts/syntaxhighlighter_3.0.83/index.html".
- У себя на сайте в настройках Друпала создаём новый формат текста. Для седьмого Друпала это в 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() { }
- Однако повторять строчки импорта скриптов и стилей каждый раз скучно, поэтому заводим новый блок с описанием "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() исправляем путь на правильный.
- Идём в настройки темы и помещаем блок Syntax Highlighter в подвал страницы.
- Создаём новую статью (формат текста - Full Html, Raw HTML больше не требуется) и пишем для проверки:
<pre class="brush: c#"> static void WarAndPeace(string[] args) { Console.WriteLine("Привет, Мир!"); Console.WriteLine("Здорово, Война!"); } </pre>
- Празднуем победу и читаем инструкции, если что-то непонятно с конфигурацией.
- Назад
- Далее