Подсветка кода с google code-prettify и bootstrap
- 2 Августа 2013
- Volodymyr Hodiak
- Разработка
- 4882
Если вы не знаете что такое Twitter Bootstrap — тогда вам туда. Google code-prettify — это удобная реализация подсветки синтаксиса большого количества языков программирования и разметки. Сегодня мы с вами кратко рассмотрим простейший пример интеграции бутстрапа с описываемым модулем .
Подключение:
...
- Для начала создадим исходный 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 килобайт. Опять же не влияет на скорость загрузки страницы.
- Можно добавлять свои языки и стилизовать темы здесь.
PS: Разработкой сайтов мы занимаемся на платформе OYi.Engine 5.0, которая использует етот механизм для подсветки кода в шаблонах страниц.