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

Скрипты

Подсветка синтаксиса для любого движка
оценка: 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. Буду благодарен, если оцените мой труд, и щелкните по звездочкам ниже.




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

rss
Категория:Скрипты
Просмотрено:6163
Рейтинг: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:

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

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



Онлайн всего: 8
Гостей: 7
Пользователей: 1

SergeyDut
Портал SzenProgs.ru © 2008 - 2017 · Условия
Администратор и дизайнер портала: Szen
Хостинг от uCoz