Подсветка синтаксиса через Prettify
Скрипты
Подсветка синтаксиса через 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>
На этом все. Удачи в свершениях!
Вы можете присоедениться к моему микроблогу в Твиттере @SzenProgs. Буду благодарен, если оцените мой труд, и щелкните по звездочкам ниже.
x;z-index:1 }Google+
Подсветка синтаксиса через Prettify
Скрипты
Скрипты, инструкции, справочники
| Категория: | Скрипты |
| Просмотрено: | 9372 |
| Рейтинг: | 3.1/8 |
| Дата добавления: | 2009-11-24 09:27, Вторник |
| Добавил: | Szen |
| Теги: | prettify, подсветка |
Рекомендуем
Дополнительно к Подсветка синтаксиса через Prettify
Мини-форум
| № 0 | 2009-11-24 09:27 |
Szen | Здесь вы можете задать вопрос или оставить комментарий по теме "Подсветка синтаксиса через Prettify". |
| Гость |
| № 2 | 2010-07-15 08:36 |
Szen | Apocalypse, мы сделали универсальный скрипт подсветки синтаксиса, который будет работать на любом движке (включая UCOZ). Найти описание и метод использования можете здесь: http://szenprogs.ru/blog....7-08-85 |
| Szen · WWW |
