Делаем подсветку синтаксиса кода на сайте. За основу возьмем фреймворк от 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();">
Мы определили следующие переменные: * window['PR_ADDBR'] - булевское значение (true или false). Если значение true, то между строками кода будет дополнительный перенос. * window['PR_TAGNAME'] - значение-массив. Предопределяет тег, или теги, для которых будет использована подсветка синтаксиса. * window['PR_CLASSNAME'] - значение-массив. Предопределяет класс, или классы тега, для которых будет использована подсветка синтаксиса. ВНИМАНИЕ! В этом примере подсветка синтаксиса настроена для сайта на основе двжка от UCOZ. Владельцам других движков нужно выяснить, какие теги и классы используются для обрамления кода и предопределить их самостоятельно. При копирование Материала ссылка на наш сайт строго обязательна Fead-web.ucoz.ru сайт автора: www.ucozon.ru
|