Подсветка синтаксиса через Prettify

Будем делать подсветку синтаксиса посредством скрипта Prettify производства Google. Установка скриипта очень простая и не требует особых телодвижений, но результат говорит сам за себя.

Скрипт подсветки кода автоматически определяет и подсвечивает следующие типы кодов: bsh, c, cc, cpp, cs, csh, cyc, cv, htm, html, java, js, m, mxml, perl, pl, pm, py, rb, sh, xhtml, xml, xsl.

Для начала нужно обзавестись скриптами Prettify. Для этого скачайте следующий архив: prettify. На своем хосте создайте папку, скажем, prettify. Нам нужны только 2 файла: prettify.js и prettify.css

После этого, нужно прописать скрипт в теле HEAD вашей странички:

<scripttype="text/javascript"src="prettify/prettify.js"></script>
<linkrel="stylesheet"type="text/css"href="prettify/prettify.css">

Не забудьте сменить адрес на путь к скрипту на вашем хосте.

Теперь, нужно сделать так, чтоб скрипт запускался. Для этого в теге BODY пишем событие onload. Выглядеть это будет так

На этом этапе подготовительные работы можно считать оконченными. Для того, чтобы скрипт подсветил синтаксис, код нужно прописывать в теге pre или теге code с классом prettyprint. Вот пример, как прописывать код на страничке:

<bodyonload="prettyPrint();">
<preclass="prettyprint">
  window.alert('Hello world!');
</pre>

или

<codeclass="prettyprint">
  window.alert('Hello world!');
</code>

Для работы скрипта подсветки синтаксиса этого достаточно. Если вам нужно поменять стиль подсветки, то измените файл prettify.css, который находится в архиве и залит на ваш хост.

Если вы хотите, чтобы определенная часть кода не учавствовала в подсветке, то пропишите эту часть кода с классом nocode. Для примера:

<codeclass="prettyprint">
  window.alert('Hello world!');
 
<span class="nocode">Эта часть кода не будет подсвечена.</span>
</code>