От автора: иногда необходимо опубликовать на своем сайте исходный код программы, с подсветкой синтаксиса. Именно эту задачу мы с Вами будем решать в данном уроке. С помощью плагина SyntaxHighlighter и нескольких строк кода PHP мы реализуем публикацию кода с подсветкой его синтаксиса.
В качестве исходников к данному уроку я воспользуюсь исходниками из урока Установка визуального редактора с файловым менеджером. Сразу оговорюсь, что если Вы публикуете материал на своем сайте без использования визуального редактора, то Вы будете избавлены от некоторых недостатков визуальных редакторов. Если же Вы используете все же визуальные редакторы, то публиковать код нужно будет в режиме кода (не в визуальном режиме).
Внимание!!! В связи со спецификой публикации (при публикации используются BB-теги, которые пересекаются с публикуемыми BB-тегами) рекомендуется просмотреть текстовую версию из исходников.
Итак, приступим к публикации кода с подсветкой синтаксиса
Детали урока «Подсветка синтаксиса кода на сайте»
Тема: PHP, JavaScript
Сложность: Средняя
Урок: Видео версия (.mp4)
Время: 01:04:27
Размер архива: 168 Mb
Для подсветки синтаксиса кода воспользуемся плагином SyntaxHighlighter. На самом деле подобных плагинов в сети Вы можете найти множество, но мне приглянулся именно этот.
На момент записи урока версия данного плагина — 3.0.83. Но в уроке мы воспользуемся более ранней версией, которую я нашел в сети. Почему не актуальной версией? Дело в том, что в актуальной версии автор плагина почему-то убрал иконку копирования кода:
Вместо этой панельки осталась панелька с единственной иконкой — информацией о плагине. Папку syntaxhighlighter с плагином поместим в папку со скриптами — js. В папке плагина Вы найдете сам скрипт, стили, картинки и темы оформления. Все это нужно подключить на страницу, где планируется публикация кода. Остановиться стоит на файлах, которые Вы найдете в папке scripts плагина. Здесь более двух десятков скриптов. Каждый файл отвечает за синтаксис того или иного языка. Полагаю, Вы уже догадались, что из этой папки мы будем подключать файлы в зависимости от языка, код на котором собираемся публиковать. Например, если мы планируем публиковать код PHP, CSS, JavaScript и HTML, то нам потребуется подключить 4 файла: shBrushPhp.js, shBrushCss.js, shBrushJScript.js, shBrushXml.js.
Как Вы заметили, окончание названия файла «говорит» о языке, синтаксис которого поддерживает данный файл. Последний файл с окончанием Xml поддерживает синтаксис и XML, и HTML. Итак, подключаем файлы и вызываем плагин (строка кода — SyntaxHighlighter.all();):
|
1 2 3 4 5 6 7 8 9 10 |
<!-- HIGHLIGHT --> <link type="text/css" rel="stylesheet" href="js/syntaxhighlighter/styles/shCore.css"> <link type="text/css" rel="stylesheet" href="js/syntaxhighlighter/styles/shThemeDefault.css"> <script type="text/javascript" src="js/syntaxhighlighter/scripts/shCore.js"></script> <script type="text/javascript">SyntaxHighlighter.all();</script> <script type="text/javascript" src="js/syntaxhighlighter/scripts/shBrushPhp.js"></script> <script type="text/javascript" src="js/syntaxhighlighter/scripts/shBrushCss.js"></script> <script type="text/javascript" src="js/syntaxhighlighter/scripts/shBrushJScript.js"></script> <script type="text/javascript" src="js/syntaxhighlighter/scripts/shBrushXml.js"></script> <!-- HIGHLIGHT --> |
Теперь попробуем опубликовать какой-нибудь код на странице. Для публикации кода необходимо воспользоваться следующей конструкцией:
|
1 2 |
<pre class="brush: название_кисточки"> ... Здесь код ... |
В качестве названия кисточки выбираем тот код, который публикуется. Например, если публикуем код PHP, то напишем php, если HTML, то html (названия обязательно в нижнем регистре). При этом, если Вы используете для публикации визуальный редактор, то публикация кода должна обязательно производиться в режиме кода. В редакторе ckeditor для этого воспользуйтесь иконкой «Источник»:
Попробуем опубликовать строку HTML-кода:
|
1 2 |
<pre class="brush: html"> <h1>Строка кода</h1> |
Смотрим на странице и видим желаемый результат:
Собственно, мы достигли поставленной цели и на этом урок можно было бы завершать, если бы… Если бы не 2 но. Давайте попробуем опубликовать каркас HTML-страницы с тегами html, body и прочими:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<pre class="brush: html"> <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <h1>Заголовок</h1> <p>Параграф</p> </body> </html> |
Обновим теперь страницу и посмотрим результат:
Как видим, плагин не справился с некоторыми тегами (html, body и др.) и их попросту нет в публикуемом коде. Данный плагин не одинок в подобной проблеме. Для решения возникшей проблемы необходимо немного помочь плагину. Как именно? Очень просто — нужно заменить некоторые символы на их мнемоники.
Сделать это можно, конечно же, вручную. Но, если публикуемого кода много, но это занятие станет довольно трудоемким и не лишенным возможных ошибок. Поэтому давайте автоматизируем данный процесс — поможет нам в этом функция htmlspecialchars(), которая преобразует специальные символы в их сущности (мнемоники).
Это было первое «но», с которым мы уже знаем как справиться. Второе «но» заключается исключительно в удобстве публикации кода. Например, мне бы хотелось вместо несколько неудобного:
|
1 |
<pre class="brush: html"> |
Писать что-то более удобное, типа:
|
1 2 |
[code = html] [/code] |
Решить обе задачи нам помогут регулярные выражения. Для начала составим шаблон регулярного выражения, который бы искал в тексте bb-теги CODE и заменял их на конструкцию pre, понятную плагину. Итак, шаблон может быть таким:
|
1 |
$pattern = '#\<code>(.*?)\</code>#is'; |
Здесь мы запоминаем 2 группы символов — название кисточки (\w+) и, собственно, все, что будет между bb-тегами CODE (.*?). Вторая запомненная группа (публикуемый код) — это именно то, что необходимо обрабатывать функцией htmlspecialchars().
Осталось только произвести замены в тексте согласно искомому шаблону. Для этого можно было бы воспользоваться функцией preg_replace(). Добавив к шаблону модификатор «e», мы могли бы включить в функцию preg_replace() обработку совпадений функциями PHP. Но, из-за необходимых для данной процедуры множественных экранирований, код стал бы крайне нечитабельным.
Именно поэтому мы воспользуемся другой функцией — preg_replace_callback(). В качестве второго параметра данной функции мы укажем имя функции, которая бы работала с найденными совпадениями. Итак, напишем 2 несложные функции: первая ищет совпадения согласно шаблону, вторая — обрабатывает найденные совпадения:
|
1 2 3 4 5 6 7 8 |
function code_content($content){ $pattern = '#\<code>(.*?)\</code>#is'; $content = preg_replace_callback($pattern, "callback", $content); return $content; } function callback($match){ $content = "<pre class='brush: " .strtolower($match[1]). "'>" .htmlspecialchars($match[2]). " |
»;
return $content;
}
Результатом работы функции будет возвращенный контент в котором все возможные блоки кода между bb-тегами CODE будут обработаны функцией htmlspecialchars(), а сами bb-теги CODE будут заменены на теги pre с именем кисточки. Также функцией strtolower() мы обработали первое совпадение с тем, чтобы привести название кисточки к ниженму регистру (как Вы помните, плагину необходим именно такой формат).
Попробуем теперь опубликовать код, с которым плагин в предыдущий раз не справился:
Вот теперь все отлично:
Собственно, на этом наша работа закончена. Далее Вы уже можете заниматься настройкой самого плагина. Все настройки и 2 способа их использования Вы можете найти на странице Configuration. Например, если Вы хотите убрать нумерацию строк, то можно воспользоваться опцией gutter, указав ее значение перед вызовом плагина:
|
1 2 3 4 |
<script type="text/javascript"> SyntaxHighlighter.defaults['gutter'] = false; SyntaxHighlighter.all(); </script> |
Также можно подключить другую тему оформления кода вместо дефолтной (Default). Например, подключим тему Eclipse:
|
1 |
<link type="text/css" rel="stylesheet" href="js/syntaxhighlighter/styles/shThemeEclipse.css"> |
В результате оформление кода будет таким:
На этом, урок по подсветке синтаксиса на сайте, окончен. Удачи Вам и до новых встреч!
Комментарии (7)