[ Новые сообщения · Участники · Правила форума · Поиск · RSS ] |
|
Форум Всё для Ucoz Скрипты (Другие) Подсветка кода. |
Подсветка кода. |
# 1 22:15
![]() Делаем подсветку синтаксиса кода на сайте. За основу возьмем фреймворк от Google Prettify. Он довольно прост, не требует особых знаний, подключается несколькими строками. Но у Prettify есть один большой недостаток - для подсветки нужно вкладывать код в тег CODE, PRE или XMP с обязательным классом prettyprint. К сожалению, это ограничивает использование подсветки кода на некоторых движках, где код автоматически окружается не тегом CODE или PRE, а, как на UCOZ, тегом DIV с классом codeMessage. Учитывая спрос на скрипт подсветки синтаксиса, мы несколько видоизменили оригинальный код Prettify. Новый скрипт позволяет устанавливать подсветку кода на любой движок, независимо от того, как этот код в движке оформляется. Для начала вам нужно скачать архив с элементами обновленного кода. Скачать архив можно здесь. Архив нужно распаковать и положить его содержимое, скажем, в папке prettify на вашем хосте. В разделе HEAD вашего сайта подключите скрипт и файл CSS-стилей подсветки. Выглядит это так: Code <script type="text/javascript" src="http://szenprogs.ru/scripts/prettify/prettify.sp.js"></script> <link type="text/css" rel="stylesheet" href="http://szenprogs.ru/scripts/prettify/prettify.css"></link> Соответственно, не забываете поменять адреса, если скрипт залили к себе на хост. Теперь у тега BODY нужно определить событие onclick для того, чтобы скрипт подсветки синтаксиса отработал. Тег BODY должен выглядеть следующим образом: Code <body onload="window['PR_ADDBR']=false; window['PR_TAGNAME']=['div']; window['PR_CLASSNAME']=['codeMessage']; prettyPrint();"> ВНИМАНИЕ! В этом примере подсветка синтаксиса настроена для сайта на основе двжка от UCOZ. Владельцам других движков нужно выяснить, какие теги и классы используются для обрамления кода и предопределить их самостоятельно. Прикрепления:
0654131.jpg
(5.8 Kb)
|
| |||
| |||