Подсветка синтаксиса Google Code Prettify и Bootstrap 3.x
Сейчас многие сайты используют Bootstrap для создания адаптивных шаблонов и при выводе кода, хочется чтобы он выглядел красиво! Для выделения кода используют скрипты подсветки синтаксиса, в интернете представлено множество разработок на эту тему...
Сейчас многие сайты используют Bootstrap для создания адаптивных шаблонов и при выводе кода, хочется чтобы он выглядел красиво!
Для выделения кода используют скрипты подсветки синтаксиса, в интернете представлено множество разработок на эту тему:
1. Highlight.js на данный момент является одним из популярнейших скриптом этого типа. Пользоваться им очень просто, потому что работает он автоматически: сам находит блоки кода, сам определяет язык, сам подсвечивает. Поддерживает 27 языков программирования. Может выполняться на сервере и на клиенте
2. GeSHi (Generic Syntax Highlighter) позволяет подсвечивать синтаксис кода, написанного любом из более 80 языков. GeSHi использует подключаемые файлы с описанием синтаксиса языков, что обеспечивает простоту добавления новых описаний. GeSHi написан на PHP - Выполняется только на сервере.
3. Google-code-prettify - это удобнейшая реализация подсветки синтаксиса множества языков программирования и разметки. Главное достоинство: весит всего 14 Kb и выполняется только на клиенте
Для нашего сайта W1C.ru мы выбрали именно Google-code-prettify т.к. считаем его самым производительным и удобным!
Как подключить подсветку синтаксиса
Во-первых для начала создадим исходный HTML-документ, включающий несколько строк кода. Подключаем основные стили фреймворка между тегов <HEAD>... </HEAD>:
<!-- Подключаем стили бутстрапа: --> <link href="bootstrap/css/bootstrap.css" rel="stylesheet"> <link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet"> <!-- Подключаем стили для подсветки кода: --> <link href="google-code-prettify/prettify.css" rel="stylesheet">
Если нужно просто подсветитить как на примере:
пишем всегда вот так:
<pre class="prettyprint"><!-- ваш программный код к статье, исходник. --></pre>
Если же необходимо каждую строчку пронумеровать
тогда добавим класс linenums, как в примере ниже:
<pre class="prettyprint linenums"><!-- ваш программный код к статье, исходник. --></pre>
В конце страницы, перед закрытием тега Body добавляем клиентские скрипты:
<script src="bootstrap/js/jquery.js"></script> <script src="google-code-prettify/prettify.js"></script> <script src="bootstrap/js/bootstrap.js"></script> <script src="bootstrap/js/application.js"></script>
добавим скрипт запуска подсветки кода:
<script type="text/javascript">
!function ($) {
$(function(){
window.prettyPrint && prettyPrint()
})
}(window.jQuery)
</script>
Подведем итоги:
Благодаря тому, что Google-code-prettify написан на JavaScript с примесью CSS, задействована только клиентская часть. Это вам не серверный тяжеловес GeSHi. И в отличие от аналогичной библиотеки под названием Syntax Highlighter практически не отъедает ресурсы, отведенные браузеру. Особенно это заметно, когда приходится использовать более 3-4 вставок на одну страницу.
Не требует явного указания языка программирования, который нужно распознать. Это отличный бонус по сравнению с уже упомянтыми предыдущими пунктами решениями.
Чрезвычайно малый вес дистрибутива. Всего-то 14-15 килобайт. Опять же не влияет на скорость загрузки страницы.
Можно добавлять свои языка и стилизовать.
