Подсветка текста на сайте (highlight)

Вкратце опишу, как работает и подключается скрипт highlight.js.

Работа скрипта:

Текст, заключенный в теги <pre><code>Ваш текст</code></pre> будет подсвечен нужными цветами. Скрипт автоматически определяет язык текста и подсвечивает его в нужном формате. Минус скрипта в том, что он не может автоматически преобразовать спец. символы в html сущности. Перед вставкой кода на сайт, его нужно будет обработать, т.е. преобразовать спец. символы в html сущности. Данный скрипт поддерживает синтаксис языков: javascript, css, php, html, xml, java, sql и д.р.. Более полный список поддерживаемых языков вы сможете найти на сайте разработчиков: http://softwaremaniacs.org/soft/highlight/

Подключение и использование:

Скачиваем архив со скриптом в корень вашего сайта (ссылка на скачивание в конце статьи). Далее между тегами <head>....</head> необходимо вставить эти строчки:

<link rel="stylesheet" href="/highlight/default.min.css">
<script src="/highlight/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

Ваш скрипт подключен и готов к работе. Теперь в документе вы сможете вставлять подсвеченный код.
Для этого нужно между тегами <pre><code>.....</code></pre> вставить преобразованный код:

<pre><code>Ваш код</code></pre>

Пример работы:

Допустим нам необходимо данный код: <!DOCTYPE html><html><head></head><body>Проверка работоспособности скрипта</body></html> вставить и подсветить на нашем сайте.
Для этого мы копируем данный код и преобразовываем в нем все спец. символы и на выходе получаем вот это: <!DOCTYPE html><html><head></head><body>Проверка работоспособности скрипта</body></html>. Наш код готов для вставки на сайт. Копируем преобразованный код и вставляем его между тегами <pre><code>....</code></pre>. На выходе получаем вот это:

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        Проверка работоспособности скрипта
    </body>
</html>

Я взял на себя ответственность немного облагородить данный код отступами. =)

Скачать highlight.js