• Страница 1 из 1
  • 1
Подсветка кода.
Группа: Проверенный
Собщений: 580
Репутация: 50
Наград: 5
Замечания : 0%
# 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)
  • Страница 1 из 1
  • 1
Поиск: