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

Люба х...ня

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

Google code-prettify vs bootstrap twitter

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

...

  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, которая использует етот механизм для подсветки кода в шаблонах страниц.

Расскажите нам о своем проекте!