Google-code-prettify - это подсветка синтаксиса множества языков программирования и разметки.

Рассмотрим примеры интеграции

Пример #1, автозагрузка

Вы можете загрузить JavaScript и CSS с помощью одной строки

Перед закрывающимся тегом </head>

<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>

При такой загрузке есть целый ряд дополнительных возможностей.

CGI параметрыЗначение по умолчаниюДействие
autoload=(true | false)trueавто запуск после загрузки страницы
lang=...noneназвание языка для подсвекти. Если указан несколько раз, то загружаются все(?lang=CSS&lang=html)
skin=...noneТема. Если указана несколько раз, то срабатывает первая успешно загруженная
callback=js_identВызов при верстке

Пример вызова с параметрами:

<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?lang=css&skin=desert"></script>

Пример #2, собственные JavaScript и CSS

Скачайте архив с исходниками: https://code.google.com/p/google-code-prettify/downloads/list

Перед закрывающимся тегом </head>:

<link href='pathTo/prettify.css' rel='stylesheet' type='text/css' />
<script src='pathTo/prettify.js' type='text/javascript' />

В тег <body> добавляем onload="prettyPrint()":

<body onload="prettyPrint()">

Пример #3, собственные JavaScript и CSS без добавления кода в <body>

Скачайте архив с исходниками: https://code.google.com/p/google-code-prettify/downloads/list

Перед закрывающимся тегом </head>:

<link href='pathTo/prettify.css' rel='stylesheet' type='text/css' />

Создайте файл startPrettify.js и добавьте в него код:

!function ($) {
  $(function(){
    var $window = $(window)
    // Запускаем code pretty:
    window.prettyPrint && prettyPrint()
  })
}(window.jQuery)

Перед закрывающимся тегом </body>:

<script src='pathTo/prettify.js' type='text/javascript' />
<script src='pathTo/startPrettify.js' type='text/javascript' />

Пример использования

<pre class="prettyprint">
    <html>
        <head>
            <title>Мой сайт
        </head>
        <body>
            <p>Hello World!</p>
        </body>
    </html> 
</pre>

Дополнительно

Для отображения нумерации строк добавьте класс linenums в тег pre:

<pre class="prettyprint linenums">
    <html>
        <head>
            <title>Мой сайт
        </head>
        <body>
            <p>Hello World!</p>
        </body>
    </html> 
</pre>

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

<style>
li.L0, li.L1, li.L2, li.L3,
li.L5, li.L6, li.L7, li.L8
{ list-style-type: decimal !important }
</style>

Если Ваш код начинается не с первой строки, можно указать номер строки старта. Для этого в конце класса linenums добавьте номер строки linenums:10. Пример:

<pre class="prettyprint linenums:10">
    ...
    <?php
    echo 'hello world';
    ?>
    ...
</pre>

Язык программирования определяется автоматически, но можно его указать явно. Для этого необходимо в тег pre добавить класс с указанием языка lang-.... Пример:

<pre class="prettyprint linenums lang-html">
    ...
</pre>

Доступная подсветка языков программирования:

  • bsh
  • c
  • cc
  • cpp
  • cs
  • csh
  • cyc
  • cv
  • htm
  • html
  • java
  • js
  • m
  • mxml
  • perl
  • pl
  • pm
  • py
  • rb
  • sh
  • xhtml
  • xml
  • xsl

Преимущества:

  • Благодаря тому, что данное решение написано на JavaScript с примесью CSS, задействована только клиентская часть.
  • Использует минимум ресурсов браузера
  • Не требует указания языка программирования
  • Небольшой вес дистрибутива
  • Возможно добавлять свои языки и стили

Больше информации здесь: https://code.google.com/p/google-code-prettify/