• Главная
  • WEB студия
    • Услуги и Цены
    • Домены
    • Хостинг и Почта
    • Сайт-Визитка
    • Интернет-магазин
    • Поддержка сайта
    • Портфолио
  • Продвижение сайта
    • Контекстная реклама
    • Семантическое ядро
    • SEO продвижение сайта
  • Социальные сети
    • SMO/SMM-продвижение
    • Создание и ведение групп
    • Автопостинг новостей
  • Парсинг сайтов
    • Зачем нужен парсинг?
    • Зачем нужен парсинг?
    • Анализ цен конкурентов
  • Журнал о Web
    • Поисковые системы
    • Все о SEO
    • Все о SMM
    • jQuery скрипты
    • Малый бизнес
  • Справочники
    • HTML
    • CSS
    • PHP
    • MySQL
    • jQuery
  • Информация
    • Кто МЫ!?
    • Контакты
    • Оплата услуг
    • Спасибо Вам
  • Инструменты
  • SEOker
  • SIZEr
  • HTML редактор
  • Наши проекты
  • W1CMS.ru
  • DiiF.ru
  • MinURL.ru

Подсветка синтаксиса Google Code Prettify и Bootstrap 3.x

​Сейчас многие сайты используют Bootstrap​ для создания адаптивных шаблонов и при выводе кода, хочется чтобы он выглядел красиво! Для выделения кода используют скрипты подсветки синтаксиса, в интернете представлено множество разработок на эту тему...

  1. Главная
  2. Все про JS : jQuery, Node, AngularJS

Сейчас многие сайты используют 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 т.к. считаем его самым производительным и удобным!

Скачать 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 килобайт. Опять же не влияет на скорость загрузки страницы.

Можно добавлять свои языка и стилизовать.

Рекомендуем

Теги

SEO HTML CSS JavaScript

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

Веб-студия

  • Услуги и Цены
  • Аренда сайтов
  • Реклама на наших проектах
  • Журнал о Web технологиях

Сделаем

  • Сайт-Визитку
  • Интернет-магазин
  • Landing Page
  • Поддержка сайта

Заполним

  • Написание статей
  • Обмен данными
  • Парсинг сайтов

Продвинем

  • Контекстная реклама
  • Продвижение сайта
  • Социальные сети
  • Автопостинг новостей

Наши контакты

W1C : Первый Веб-Консультант
mail@w1c.ru
Пн - Пт: 10:00 - 20:00

Дизайн и разработка сайта - W1C на W1CMS
W1C : Web First Consultant - Intelligence everywhere ©