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

Скрипты

x;z-index:1 }
Подсветка синтаксиса для любого движка
оценка: 5.0 из 5
оценок: 4, отзывов: 2

Делаем подсветку синтаксиса кода на сайте. За основу возьмем фреймворк от 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. Владельцам других движков нужно выяснить, какие теги и классы используются для обрамления кода и предопределить их самостоятельно.

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

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

x;z-index:1 }


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

rss
Категория:Скрипты
Просмотрено:7899
Рейтинг:5.0/4
Дата добавления:2010-07-08 13:49, Четверг
Добавил:Szen
Теги:prettify, подсветка, синтаксис

Мини-форум

№ 02010-07-08 13:49
Szen
Аватар участника Szen
Здесь вы можете задать вопрос или оставить комментарий по теме "Подсветка синтаксиса для любого движка".
Гость
№ 1
2011-01-18 08:18
Apocalypse
Аватар участника Apocalypse
Оргомное спасибо! Просто супер!
Ярослав
№ 2
2011-10-09 21:45
priestged
Аватар участника priestged
У меня идет сплошным текстом! Как это исправить?
Aleksandr
Учавствовать в обсуждении "Подсветка синтаксиса для любого движка" могут только зарегистрированные пользователи.
RSS лента Блога
RSS лента Каталога файлов
RSS лента Новостей
Будьте в курсе событий.
Введите ваш email:

Личный блок
  • Гость портала.
  • Личных данных нет.
Вход на сайт
Регистрация
Опрос
Каким файл-хостингом вы пользуетесь?
Всего ответов: 412
Статистика
Valid HTML 4.01 Transitional

Яндекс цитирования



Онлайн всего: 1
Гостей: 1
Пользователей: 0
Портал SzenProgs.ru © 2008 - 2025 · Условия
Администратор и дизайнер портала: Szen
Хостинг от uCoz