Подсветка кода в Bootstrap

Третья часть серии материалов блога, которые посвящены примерам использования стилей и скриптов, включенных в CSS-фреймворк известный, как Twitter Bootsrap.

Посветка кода в Twitter Bootstrap

Итак, для подсветки кода вместе с бутстрап лучше всего использовать JavaScript- библиотеку Google Code Prettify.

1. Подключаем скрипты и стили, запускаем гугловский скрипт:

<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/prettify.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/prettify.js"></script>
<script>
jQuery(document).ready(function($) {
  var $window = $(window)
  window.prettyPrint && prettyPrint() 
})
</script>
<!--[if lt IE 9]>
  <script src="js/html5.js"></script>
<![endif]-->

2. Выделение программного кода нужно производить посредством HTML тега <pre> с классом .prettyprint:

<pre class="prettyprint">&lt;?php
echo "Hello Wold!";
?&gt;
</pre>

При этом вариант в котором каждой строчке будет присвоен собственный номер будет выглядеть вот так:

<pre class="prettyprint linenums">&lt;?php
echo "Hello Wold!";
?&gt;
</pre>

Если вы хотите, чтобы программный код был строго фиксированной высоты, тогда используйте дополнительный класс .pre-scrollable, — это показано на снимке окна браузера выше, взгляните на третий и четвертый блоки.

Отличительной особенностью данного варианта является то, что все элементы синтаксиса различных ЯП будут  распознаны автоматически. Забудьте про ручное прописывание дополнительных классов.

Скачать
Опубликовано 18-03-2013 в 14:26


Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>











Свежие комментарии

  • krasnov8953: к записи Не работает как мне кажется строчка $newTvId = $ »
  • Dimanski: к записи ничего не понимаю. Ставлю ModX на хостинг r01.ru »
  • Дмитрий: к записи Спасибо! Очень выручили. С битриксом беда, а прав »
  • леонид: к записи как сделать что были в ряд? у меня получается по о »
  • Администратор: к записи Статический IP. »
  • Steel: к записи Администратор, вы данную проблему решили подключен »
  • Дмитрий: к записи Хотел узнать как прикрутить данное окно (http://re »

Blogroll:

  • Поможем выбрать лампу для гель лака здесь. →

Последние твиты