Проста підсвічування коду на сайт
Ця запис написана мною в 2014 році. В ті часи дерева були високими, а долар коштував менше 40 рублів. З тих пір пройшло багато часу і багато чого змінилося. Враховуйте це, читаючи.
Після оновлення блогу мені здалося, що буде набагато зручніше в блоках з кодом ввести підсвічування синтаксису.
Погуглити, я знайшов безліч великих готових рішень, але мені вони всі здалися зайвими. Адже потрібно просто зробити код на сторінках трохи більш читабельним, але якщо потрібна повноцінна підсвічування синтаксису - будь-якого зручніше буде скопіювати код в свій улюблений редактор.
Тому я вирішив написати свою просту підсвічування коду в блоках на JavaScript, вона буде працювати для html, css, php, js.
UPD 05.01.2016: Я розробив плагін для WordPress, який ви можете використовувати. Читати докладніше
Що б скрипту було зрозуміло де який код, його потрібно обертати в спеціальні блоки:
<Pre class = "php"> КОД </ pre> <pre class = "html"> КОД </ pre> <pre class = "css"> КОД </ pre> <pre class = "js"> КОД </ pre>
Так само, якщо це html код (ну або там просто зустрічаються теги), їх потрібно перетворювати в спеціальні символи. Хоча це начебто і так зрозуміло, інакше теги просто не буде видно, бо браузер їх обробить як теги. UDP: У новій версії скрипта це вже не обов'язково, він все зробить за вас.
Працює скрипт на основі регулярних виразів, просто обертаючи потрібні символи в span теги для відповідного забарвлення. Він робить це не ідеально, присутні різні баги, але із завданням в загальному випадку справляється - мета скрипта просто зробити код, що розміщується в блозі, читабельним
Код скрипта і приклад використання ви можете взяти на github .
Приклад його роботи ви бачите на моєму блозі.
Найгірше підсвічування реалізована для JavaScript, тому що я мало пишу на ньому, для html, css і php більш-менш. Згодом буду допрацьовувати і викладати тут інформацію про оновлення.
UPD 13.07.2014: Тепер скрипт сам замінить html символи <та> на відповідні їм, щоб їх можна було коректно вивести. Попередня обробка не обов'язкова.
UPD 20.07.2014: Введена підтримка html коду в PHP блоках, тепер при змішуванні html і php коду підсвічується і той, і інший (в PHP блоках).
UPD 24.07.2014: Виправлений баг, якщо в блоках з PHP кодом не зустрічається блоків <? Php -КОД-?>, То весь блок підсвічується по PHP правилам.
Виправлений баг, якщо в блоках з PHP кодом не зустрічається блоків <?Php -КОД-?