Подсветка синтаксиса через 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.zip. На своем хосте создайте папку, скажем, prettify. В скачанном архиве вы найдете папку src. Все ее содержимое перенесите на свой хост в созданную вами папку.
После этого, нужно прописать скрипт в теле HEAD вашей странички:
<link rel="stylesheet" type="text/css" href="http://szenprogs.ru/scripts/prettify/prettify.css">
Не забудьте сменить адрес http://szenprogs.ru/scripts/prettify/ на путь к скрипту на вашем хосте.
Теперь, нужно сделать так, чтоб скрипт запускался. Для этого в теге BODY пишем событие onload. Выглядеть это будет так:
На этом этапе подготовительные работы можно считать оконченными. Для того, чтобы скрипт подсветил синтаксис, код нужно прописывать в теге pre или теге code с классом prettyprint. Вот пример, как прописывать код на страничке:
window.alert('Hello world!');
</pre>
или
window.alert('Hello world!');
</code>
Для работы скрипта подсветки синтаксиса этого достаточно. Если вам нужно поменять стиль подсветки, то измените файл prettify.css, который находится в архиве и залит на ваш хост.
Если вы хотите, чтобы определенная часть кода не учавствовала в подсветке, то пропишите эту часть кода с классом nocode. Для примера:
window.alert('Hello world!');
<span class="nocode">Эта часть кода не будет подсвечена.</span>
</code>
На этом все. Удачи в свершениях!
| Категория: | Скрипты |
| Просмотрено: | 2280 |
| Рейтинг: | 3.8/6 |
| Дата добавления: | 24.11.2009 09:27, Вторник |
| Добавил: | Szen |
| Теги: | prettify, подсветка |
Рекомендуем
Дополнительно
Мини-форум
| № 0 | Вторник, 24.11.2009 09:27 |
Szen | Здесь вы можете задать вопрос или оставить комментарий по теме "Подсветка синтаксиса через Prettify". |
| Профиль |
| № 1 | Понедельник, 05.07.2010 11:57 |
Apocalypse | Возник вопрос - как сделать, чтобы код подсвечивался ещё через тег <div>, а точнее через <div class="codeMessage"> (Стандартный класс uCoz, если код взят в Code Любой код Заранее благодарен |
| Профиль |
| № 2 | Понедельник, 05.07.2010 12:51 |
| Szen | Apocalypse, если подождете пару дней, то переделаем скрипт под UCOZ.  |
| Профиль |
| № 3 | Четверг, 15.07.2010 08:36 |
| Szen | Apocalypse, мы сдклали универсальный скрипт подсветки синтаксиса, который будет работать на любом движке (включая UCOZ). Найти описание и метод использования можете здесь: http://szenprogs.ru/blog....7-08-85 |
| Профиль |
Внимание
Все скрипты, инструкции, тесты, статьи и подборки, опубликованные в блоге портала, являются собственностью портала. Администрация портала не несет никакой ответственности за содержания статей и скриптов, но обязуется не публиковать материалы, нарушающие законодательство Российской Федерации, порнографию, инструкции по взлому и вскрытию. Администрация портала сама решает, кому помогать в решении какой-либо проблемы, а кому отказать в помощи. Цитируя наш текст и устанавливая опубликованные скрипты, вы соглашаетесь с тем, что используете продукт, созданный или подготовленный порталом SzenProgs. Портал SzenProgs оставляет за собой право менять инструкции, тесты, записи, подборки и скрипты по своему усмотрению и менять содержимое файлов, залитых на портале.
Любая, полная или частичная, публикация материала, размещенного в блоге портала SzenProgs, на другом стороннем от портала SzenProgs сайте должна сопровождаться ссылкой на источник.
(SMS):
(WebMoney):
Kimblejcjqzz(40), denisbardas(15), stisurneybrit(49), faremiamume(46), NiteNearianep(40), Dik0n(24).
Желаем им счастья, здоровья, благополучия, любви и богатства!
С уважением, администрация сайта.
