Подсветка кода с google code-prettify и bootstrap

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

Подключение:

...

1. Для начала создадим исходный HTML-документ, включающий несколько строк кода. Подключаем основные стили фреймворка между тегами :
    
   
   
2. Фрагменты, которые нужно подсветить замечаем следующим образом посредством

   . Если нужно просто подсветить пишем всегда вот так:
   
   
   

3. Если же необходимо пронумеровать каждую строчку, тогда добавим класс linenums, как в примере ниже:
    

4. Пишем немного на JavaScript, чтобы "google code-prettify" мог спокойно выполнять свою работу, сохраняем его в app.js:
    

   !function ($) {
   $(function(){
   var $window = $(window)
   // Запускаем code pretty:
   window.prettyPrint && prettyPrint()
   })
   }(window.jQuery)
   

5. Перед закрывающим тегом подключаем необходимые клиентские скрипты:
    

6. Результат показан на примере этой статьи :)

Выводы

• Благодаря тому, что данное решение написанный на JavaScript с примесью CSS, задействована только клиентская часть.
• В отличие от аналогичной библиотеки под названием Syntax Highlighter от Алекса Горбачева практически не отъедает ресурсы, отведенные браузеру. Особенно это заметно, когда приходится использовать более 3-4 вставок на одну страницу.
• Не требует явного указания языка программирования, который нужно распознать. Это отличный бонус в сравнении с уже упомянтыми предыдущими пунктами решениями.
• Чрезвычайно малый вес дистрибутива. Всего-то 14-15 килобайт. Опять же не влияет на скорость загрузки страницы.
• Можно добавлять свои языки и стилизовать темы здесь.

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