Установка скрипта SyntaxHighlighter
Установка скрипта для підсвічування синтаксису дуже проста і може бути розділена на 2 етапи.
Отже, для початку завантажуємо файли скрипта SyntaxHighlighter до себе на комп'ютер. Зробити це можна як на офіційному сайті SyntaxHighlighter. так і перейшовши за наступним посиланням (версія яку використовую я).
Далі створюємо папку на хостингу і копіюємо в неї файли скрипта. Для прикладу створимо в корені сайту папку з назвою «syntaxhighlighter» і скопіюємо туди всі файли з архіву.
Тепер нам потрібно підключити до сайту всі необхідні файли SyntaxHighlighter. Для цього в
сторінки додайте наступний код.При необхідності можна об'єднати потрібні файли і підключати всього один файл. Це допоможе трохи прискорити завантаження сторінок сайту за рахунок зменшення кількості підключень.
Також варто зауважити, що якщо ви використовуєте WordPress, то вищенаведений код потрібно буде додати в файл header.php вашої теми оформлення. Більш докладно про файлах тим оформлення WordPress ви можете дізнатися в статті «Установка і редагування теми WordPress».
Після підключення всіх необхідних файлів можна приступати до керівництва з використання скрипта підсвічування синтаксису коду SyntaxHighlighter.
Як реалізувати підсвічування синтаксису за допомогою SyntaxHighlighter
Для того щоб виділити код на сайті потрібно оформити блоки з кодом наступним чином.
де brush: php відповідає за мову коду, синтаксис якого буде підсвічуватися.
Якщо виділяється код буде написаний на C ++, то замість brush: php потрібно буде написати brush: cpp. При цьому в
сторінки обов'язково повинен бути підключений файл, який відповідає за підсвічування синтаксису коду відповідної мови програмування.Також варто зауважити, що для коректної підсвічування коду його потрібно заздалегідь підготувати і перетворити все спеціальні символи в HTML-суті. Якщо цього не зробити, то після вставки до статті замість відображення коду на сторінці він буде виконуватися. Виходячи з цього, перед додаванням коду все спеціальні символи необхідно перетворювати в HTML-суті і лише потім додавати код до статті.
Для перетворення спецсимволов в HTML-суті можна скористатися будь-якої зручної програмою, наприклад, програмою DreamWeaver або NotePad ++ (виділити текст і натиснути Меню - TextFX - TextFX Convert - Encode HTML (# 038;<>«)). Крім цього в інтернеті існує безліч різноманітних безкоштовних інструментів з обробки коду. Один з них ви можете знайти на цій сторінці.
Після обробки коду і додавання його на сторінку у вас повинно вийти приблизно такі (на прикладі підсвічування php коду).
Також при виділенні коду рекомендую поміщати його в спеціальний клас CSS з певними властивостями. Це дасть вам можливість більш гнучко змінювати зовнішній вигляд коду на сайті. Для прикладу наведу клас CSS, який я використовую у себе на сайті.
Як бачите, в ньому ми створюємо рамку для блоку з кодом, задаємо розмір шрифту і додаємо відступи. Даний клас потрібно буде додати в таблицю стилів вашого сайту. Після цього для виділення коду на сайті потрібно використовувати наступну конструкцію.
Код кнопок підсвічування синтаксису для сайтів на WordPress
Код кнопки для підсвічування PHP коду
Код кнопки для підсвічування CSS коду
Аналогічним чином можна створити кнопки для підсвічування C ++, C #, XML і інших мов програмування. Все залежить від вашого бажання і потреб.
На цьому все. Удачі вам і успіхів у створенні сайтів.
Помітили помилку? Виділіть її та натисніть Ctrl + Enter
Версія для друку