Підсвічування коду з google code-prettify і bootstrap

2 Серпня 2013
Volodymyr Hodiak
Розробка
4671

Люба х...ня

Якщо ви не знаєте що таке Twitter Bootstrap — тоді вам туди. Google-code-prettify — це зручна реалізація підсвічування синтаксису великої кількості мов програмування і розмітки. Сьогодні ми з вами коротко розглянемо найпростіший приклад інтеграції бутстрапа з описуваним модулем.

Google-code-prettify vs bootstrap twitter

Підключення:

...

Для початку створимо вихідний HTML-документ, що включає кілька рядків коду. Підключаємо основні стилі фреймворку між тегами :
Фрагменти, які потрібно підсвітити помічаємо наступним чином допомогою
```
. Якщо потрібно просто підсвітити пишемо завжди ось так:
```
```
 
```
Якщо ж необхідно пронумерувати кожну строчку, тоді додамо клас linenums, як у прикладі нижче:
```
 
```
Пишемо трохи на JavaScript, щоб "google code-prettify" міг спокійно виконувати свою роботу, зберігаємо його в app.js:
```
!function ($) {
  $(function(){
    var $window = $(window)
    // Запускаєм code pretty:
    window.prettyPrint && prettyPrint()
  })
}(window.jQuery)
```
Перед закрывючим тегом підключаємо необхідні клієнтські скрипти:
Результат показаний на прикладі цієї статті :)

Висновки:

Завдяки тому, що дане рішення написаний на JavaScript з домішкою CSS, задіяна тільки клієнтська частина.
В відміну від аналогічної бібліотеки під назвою Syntax Highlighter від Алекса Горбачова практично не від'їдає ресурси, відведені браузеру. Особливо це помітно, коли доводиться використовувати більш 3-4 вставок на одну сторінку.
Не вимагає явної вказівки мови програмування, який потрібно розпізнати. Це відмінний бонус у порівнянні з вже згаданими у попередніх пунктах рішеннями.
Надзвичайно мала вага дистрибутива. Всього-то 14-15 кілобайт. Знову ж не впливає на швидкість завантаження сторінки.
Можна додавати свої мови і стилізувати теми тут.

P.S.: Розробкою сайтів ми займаємось на платформі OYi.Engine 5.0, яка використовує цей механізм для підсвітки коду в шаблонах сторінок.