Подсветка синтаксиса в тегах code или pre с помощью JavaScript

При создание сайта и написании статей не хватало оформление синтаксиса в теге code. Сперва думал написать что то свое. Принцип прост, есть тег с идентификатором через JavaScript его находишь и по регулярным выражениям ставишь цветовую подсветку. Задача простая. Зная Google и его тяготу к JQuery задался вопросом "А не написал ли Google функции по подсветки синтаксиса?". Поиска множество форумов, нашел самый простой способ преобразование синтаксиса кода в читабельный вид от Google.

Начнем по порядку. Сперва необходимо скачать скрипты и выложить на свой сайт. Скачать его можно по адресу www.google-code-prettify.googlecode.com. Подключение скрипта осуществляется таким образом. В индексном файле в теге head подгружаем скрипт. У меня они подключены так:

<link href="/google-code-prettify/prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="/google-code-prettify/prettify.js"></script>

Пути к файлам должны соответствовать месту, куда вы их скопировали. Далее необходимо в теге body при загрузки запускаем скрипт

<body onload="prettyPrint()">

Подготовительный этап пройден. Теперь скрипт у нас подгружен и можно использовать его для подсветки кода синтаксиса и преобразовывать его в читабельный вид. Для этого необходимо в тегах code и pre прописать классы и в некоторых случаях ID.

<code class="prettyprint">...</code>
или
<pre class="prettyprint">...</code>

Теперь немного поясню по классам. В функции используются такие идентификаторы prettyprint используется для обозначения о необходимости применять скрипт в данном теге, а последующие для применения разных типов стилей отображения.

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

Применять стили можно и через ID, к примеру так:

<code id="perl" class="prettyprint">

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

для HTTP

<code class="prettyprint lang-html">

для CSS

<code class="prettyprint lang-css">

PHP

<code id="PHP" class="prettyprint">

XML

<code class="prettyprint lang-xml">

JavaScript

<code class="prettyprint lang-js">

Java

<code class="prettyprint lang-java">

SSH

<code class="prettyprint lang-sh">

Для консольного редактора я использовал Perl или Bash

<code id="perl" class="prettyprint">
<code class="prettyprint" id="bash">

Все примеры можно посмотреть здесь. Пользуйтесь и наслаждайтесь результатом. Так же данный скрипт использован на данном сайте.