SyntaxHighlighter підсвічування синтаксису коду на сайті

21

Від автора: іноді необхідно опублікувати на своєму сайті вихідний код програми, з підсвічуванням синтаксису. Саме цю задачу ми з Вами будемо вирішувати в даному уроці. За допомогою плагіна SyntaxHighlighter і кількох рядків коду PHP ми реалізуємо публікацію коду з підсвічуванням його синтаксису.

В якості вихідних до даного уроку я скористаюся з исходниками уроку Встановлення візуального редактора з файловим менеджером. Відразу обмовлюся, що якщо Ви публікуєте матеріал на своєму сайті без використання візуального редактора, то Ви будете позбавлені деяких недоліків візуальних редакторів. Якщо ж Ви використовуєте все ж візуальні редактори, то публікувати код потрібно буде в режимі коду (не в візуальному режимі).

Увага!!! У зв’язку зі специфікою публікації (при публікації використовуються BB-теги, які перетинаються з публікуються BB-тегами) рекомендується переглянути текстову версію з исходников.

Отже, приступимо до публікації коду з підсвічуванням синтаксису

Деталі уроку «Підсвічування синтаксису коду на сайті»

Тема: PHP, JavaScript

Складність: Середня

Урок: Відео версія (.mp4)

Час: 01:04:27

Розмір архіву: 168 Mb

SyntaxHighlighter підсвічування синтаксису коду на сайтіSyntaxHighlighter підсвічування синтаксису коду на сайті

Для підсвічування синтаксису коду скористаємося плагіном SyntaxHighlighter. Насправді подібних плагінів в мережі Ви можете знайти безліч, але мені сподобався саме цей.

На момент запису уроку версія даного плагіна — 3.0.83. Але в уроці ми скористаємося більш ранньою версією, яку я знайшов в мережі. Чому не актуальною версією? Справа в тому, що в актуальній версії автор плагіна чомусь прибрав іконку копіювання коду:

SyntaxHighlighter підсвічування синтаксису коду на сайті

Замість цієї панельки залишилася панелька з єдиною іконкою — інформацією про плагіні. Папку syntaxhighlighter з плагіном помістимо в папку зі скриптами — js. У папці плагіна Ви знайдете сам скрипт, стилі, картинки і теми оформлення. Все це потрібно підключити на сторінку, де планується публікація коду. Варто зупинитися на файлах, які Ви знайдете в папці scripts плагіна. Тут більше двох десятків скриптів. Кожен файл відповідає за синтаксис тієї чи іншої мови. Думаю, Ви вже здогадалися, що з цієї папки ми будемо підключати файли в залежності від мови, код на якому збираємося публікувати. Наприклад, якщо ми плануємо публікувати код PHP, CSS, JavaScript і HTML, то нам буде потрібно підключити 4 файлу: shBrushPhp.js, shBrushCss.js, shBrushJScript.js, shBrushXml.js.

Як Ви помітили, закінчення назви файлу «говорить» про мову, синтаксис якого підтримує даний файл. Останній файл із закінченням підтримує синтаксис Xml і XML і HTML. Отже, підключаємо файли і викликаємо плагін (рядок коду — SyntaxHighlighter.all();):

SyntaxHighlighter.all();

Тепер спробуємо опублікувати якийсь код на сторінці. Для публікації коду необхідно скористатися наступною конструкцією:

В якості назви пензлика вибираємо той код, який публікується. Наприклад, якщо публікуємо код PHP, то напишемо php, якщо HTML, html (назви обов’язково в нижньому регістрі). При цьому, якщо Ви використовуєте для публікації візуальний редактор, публікація коду повинна обов’язково проводитися в режимі коду. В редакторі ckeditor для цього скористайтесь іконкою «Джерело»:

SyntaxHighlighter підсвічування синтаксису коду на сайті

Спробуємо опублікувати рядок HTML-коду:

SyntaxHighlighter підсвічування синтаксису коду на сайті

Рядок коду

Дивимося на сторінці і бачимо бажаний результат:

SyntaxHighlighter підсвічування синтаксису коду на сайті

Власне, ми досягли поставленої мети і на цьому урок можна було би завершувати, якби… якби не 2 а. Давайте спробуємо опублікувати каркас HTML-сторінки з тегами html, body і іншими:

Заголовок

Параграф

Оновимо тепер сторінку і подивимося результат:

SyntaxHighlighter підсвічування синтаксису коду на сайті

Як бачимо, плагін не впорався з деякими тегами html, body і ін) і їх просто немає в опублікованому коді. Даний плагін не самотній у подібній проблемі. Для вирішення виниклої проблеми необхідно трохи допомогти плагіну. Як саме? Дуже просто — потрібно замінити деякі символи на їх мнемоніки.

Зробити це можна, звичайно ж, вручну. Але, якщо публікується коду багато, але це заняття стане досить трудомістким і не позбавленим можливих помилок. Тому давайте автоматизуємо даний процес — допоможе нам в цьому функція htmlspecialchars(), яка перетворює спеціальні символи в їх сутності (ідентифікатор).

Це було перше «але», з яким ми вже знаємо, як впоратися. Друге «але» полягає виключно в зручності публікації коду. Наприклад, мені б хотілося кілька замість незручного:

Писати щось більш зручне, типу:

Вирішити обидва завдання нам допоможуть регулярні вирази. Для початку складемо шаблон регулярного виразу, який би шукав в тексті bb-теги CODE і замінював їх на конструкцію pre, зрозумілу плагіну. Отже, шаблон може бути таким:

$pattern = ‘#\(.*?)\#is’;

Тут ми запам’ятовуємо 2 групи символів — назва пензлики (\w+) і, власне, все, що буде між bb-тегами CODE (.*?). Друга запомненная група (публікується код) — це саме те, що необхідно обробляти функцією htmlspecialchars().

Залишилося тільки зробити заміни в тексті згідно з потрібного шаблону. Для цього можна було б скористатися функцією preg_replace(). Додавши до шаблону модифікатор «e», ми могли б включити в функцію preg_replace() обробку збігів функціями PHP. Але, необхідних для даної процедури множинних экранирований, код став би вкрай нечитабельним.

Саме тому ми скористаємося іншою функцією — preg_replace_callback(). В якості другого параметра даної функції ми вкажемо ім’я функції, яка б працювала з знайденими збігами. Отже, напишемо 2 нескладні функції: перша шукає збіги згідно шаблону, друга — обробляє знайдені збіги:

function code_content($content){
$pattern = ‘#\(.*?)\#is’;
$content = preg_replace_callback($pattern, «callback», $content);
return $content;
}
callback function($match){
$content = «» .htmlspecialchars($match[2]). «»;
return $content;
}

Результатом роботи функції буде повернутий контент в якому всі можливі блоки коду між bb-тегами CODE будуть оброблені функцією htmlspecialchars(), а самі bb-теги CODE будуть замінені на теги pre з ім’ям пензлика. Також функцією strtolower() ми опрацювали перше збіг з тим, щоб привести назва пензлика до ниженму регістру (як Ви пам’ятаєте, плагіну необхідний саме такий формат).

Спробуємо тепер опублікувати код, за яким плагін в попередній раз не впорався:

SyntaxHighlighter підсвічування синтаксису коду на сайті

Ось тепер все відмінно:

SyntaxHighlighter підсвічування синтаксису коду на сайті

Власне, на цьому наша робота закінчена. Далі Ви вже можете займатися налаштуванням самого плагіна. Всі налаштування і 2 способи їх використання Ви можете знайти на сторінці Configuration. Наприклад, якщо Ви хочете прибрати нумерацію рядків, то можна скористатися опцією gutter, вказавши її значення перед викликом плагіна:

SyntaxHighlighter.defaults[‘gutter’] = false;
SyntaxHighlighter.all();

Також можна підключити іншу тему оформлення коду замість темою за замовчуванням (Default). Наприклад, підключимо тему Eclipse:

В результаті оформлення коду буде таким:

SyntaxHighlighter підсвічування синтаксису коду на сайті

На цьому урок з підсвічуванням синтаксису на сайті, закінчено. Удачі Вам і до нових зустрічей!