Улучшенная подсветка кода на веб странице от Google. Недавно, Google порадовал веб дизайнеров одной приятной штукой. Это, так называемый, Google Code Prettifier. Дословно на русский это не переведешь, но его смысл отражен в названии - "Улучшенная подсветка кода на веб странице". В данном случае под кодом понимается код программы на одном из языков программирования. Не знаю как у вас, а мне частенько приходится помещать програмный код на веб страницы. Если этот код будет написан одним цветом, то читать его будет совершенно неудобно. Каждый кто работал в специальных средах программирования (Visual Studio или Borland Builder) понимает, как много значит подсветка синтаксиса. Сделать подсветку синтаксиса языков программирования на веб страницах, не тривиальная задача. Google, похоже, решил ее и делится своим решением с нами. JavaScript и CSS, сладкая парочка. Приятной особенностью подхода Google является то, что веб дизайнер не должен заботиться о том, чтобы "раскрасить" код. Не нужно выделять каждый оператор специальными тегами. Все что необходимо, это заключить ваш код в тег <pre class="prettyprint">...</pre> и вуаля... Код выглядит, как в вашем любимом редакторе. Реализация "раскраски" написана на JavaScript с использованием каскадных таблиц стилей (CSS), то есть вся раскраска ложиться на браузер (клиент). Веб серверу даже ничего не приходится делать для этого. Более того, каждый веб дизайнер может сам изменить цвета, на те, которые ему больше нравятся. Для этого достаточно лишь отредактировать css файл. Как заставить это работать на своем сайте Заставить все это работать не просто..., а очень просто:) Для начала необходимо загрузить два "магических" файла: prettify.js и prettify.css. Это самые главные участники "раскраски". Найти эти файлы можно, например, вот тут:
JavaScript Code
CSS File Далее нужно положить эти файлы на свой сервер, например, в корневую папку сервера. Теперь, подключаем эти два файла на странице, которая должна выводить программный код. Например, так:
<link rel="stylesheet" href="prettify.css" type="text/css">
<script type="text/javascript" src="prettify.js"></script>
Имейте ввиду, что javascript файл prettify.js имеет размер 43 килобайта (что весьма много), поэтому я рекомендую вам сначала удалить из него все комментарии, пробелы и переносы строк. Ну и последний штрих. Необходимо определить для документа следующий обработчик для onload эвента: prettyPrint()
Например, вот так: <body onload="prettyPrint()"> Вот теперь все. Любой фрагмент кода заключенный в теге <pre class="prettyprint"> теперь будет выглядеть весело раскрашенным. Дабы не быть голословным, приведу пример раскраски:  Небольшой FAQ по Google Prettifier Приведу несколько популярных вопросов по данному инструменту. Источник здесь. Какие языки программирования поддерживает Google Prettifier? В комментариях к файлу prettify.js сказано, что данный инструмент должен работать для множества языков, включая: C и его потомки, Java, Python, Bash, SQL, HTML, XML, CSS, Javascript, и Makefiles. Он более или менее работает на Ruby, PHP, Awk и некоторых подмножеств Perl. Этот инструмент точно не работает для Smalltalk, Lisp-подобных или CAML-подобных языках. Как я могу указать на то, на каком языке написан мой код? Нет никакой возможности указать, на каком языке написан код, так как это усложнит интерфейс. Если язык не определяется правильно, значит это баг:) С какими браузерами он работает? Prettifier тестировался с IE 6, Firefox 1.5 & 2, и Safari 2.0.4. Перейдите на тестовую страницу, чтобы посмотреть, как это работает в вашем браузере. |
Статьи 
