Подсветка синтаксиса для любого движка

Делаем подсветку синтаксиса кода на сайте. За основу возьмем фреймворк от Google Prettify. Он довольно прост, не требует особых знаний, подключается несколькими строками. Но у Prettify есть один большой недостаток - для подсветки нужно вкладывать код в тег CODE, PRE или XMP с обязательным классом prettyprint. К сожалению, это ограничивает использование подсветки кода на некоторых движках, где код автоматически окружается не тегом CODE или PRE, а, как на UCOZ, тегом DIV с классом codeMessage.

Учитывая спрос на скрипт подсветки синтаксиса, мы несколько видоизменили оригинальный код Prettify. Новый скрипт позволяет устанавливать подсветку кода на любой движок, независимо от того, как этот код в движке оформляется.

Для начала вам нужно скачать архив с элементами обновленного кода. Скачать архив можно здесь.

Архив нужно распаковать и положить его содержимое, скажем, в папке prettify на вашем хосте.

В разделе HEAD вашего сайта подключите скрипт и файл CSS-стилей подсветки. Выглядит это так:

Соответственно, не забываете поменять адреса, если скрипт залили к себе на хост.

Теперь у тега BODY нужно определить событие onclick для того, чтобы скрипт подсветки синтаксиса отработал. Тег BODY должен выглядеть следующим образом:

Мы определили следующие переменные:

• window['PR_ADDBR'] - булевское значение (true или false). Если значение true, то между строками кода будет дополнительный перенос.
• window['PR_TAGNAME'] - значение-массив. Предопределяет тег, или теги, для которых будет использована подсветка синтаксиса.
• window['PR_CLASSNAME'] - значение-массив. Предопределяет класс, или классы тега, для которых будет использована подсветка синтаксиса.

ВНИМАНИЕ! В этом примере подсветка синтаксиса настроена для сайта на основе двжка от UCOZ. Владельцам других движков нужно выяснить, какие теги и классы используются для обрамления кода и предопределить их самостоятельно.

На этом все. Удачи в свершениях!

Вы можете присоедениться к моему микроблогу в Твиттере @SzenProgs. Буду благодарен, если оцените мой труд, и щелкните по звездочкам ниже.

• 1
• 2
• 3
• 4
• 5

Подсветка синтаксиса для любого движка
Скрипты
Скрипты, инструкции, справочники