Подсветка синтаксиса через Prettify

Скрипты

Рисунок Подсветка синтаксиса через Prettify
Подсветка синтаксиса через Prettify Подсветка синтаксиса через Prettify
оценка: 3.1 из 5
оценок: 8, отзывов: 3

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

Скрипт подсветки кода автоматически определяет и подсвечивает следующие типы кодов: bsh, c, cc, cpp, cs, csh, cyc, cv, htm, html, java, js, m, mxml, perl, pl, pm, py, rb, sh, xhtml, xml, xsl.

Для начала нужно обзавестись скриптами Prettify. Для этого скачайте следующий архив: prettify.zip. На своем хосте создайте папку, скажем, prettify. В скачанном архиве вы найдете папку src. Все ее содержимое перенесите на свой хост в созданную вами папку.

После этого, нужно прописать скрипт в теле HEAD вашей странички:

Code
<script type="text/javascript" src="http://szenprogs.ru/scripts/prettify/prettify.js"></script>
<link rel="stylesheet" type="text/css" href="http://szenprogs.ru/scripts/prettify/prettify.css">

Не забудьте сменить адрес http://szenprogs.ru/scripts/prettify/ на путь к скрипту на вашем хосте.

Теперь, нужно сделать так, чтоб скрипт запускался. Для этого в теге BODY пишем событие onload. Выглядеть это будет так:

Code
<body onload="prettyPrint();">

На этом этапе подготовительные работы можно считать оконченными. Для того, чтобы скрипт подсветил синтаксис, код нужно прописывать в теге pre или теге code с классом prettyprint. Вот пример, как прописывать код на страничке:

Code
<pre class="prettyprint">
  window.alert('Hello world!');
</pre>

или

Code
<code class="prettyprint">
  window.alert('Hello world!');
</code>

Для работы скрипта подсветки синтаксиса этого достаточно. Если вам нужно поменять стиль подсветки, то измените файл prettify.css, который находится в архиве и залит на ваш хост.

Если вы хотите, чтобы определенная часть кода не учавствовала в подсветке, то пропишите эту часть кода с классом nocode. Для примера:

Code
<code class="prettyprint">
  window.alert('Hello world!');
  <span class="nocode">Эта часть кода не будет подсвечена.</span>
</code>

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

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




Подсветка синтаксиса через Prettify
Скрипты
Скрипты, инструкции, справочники

rss
Категория:Скрипты
Просмотрено:8073
Рейтинг:3.1/8
Дата добавления:2009-11-24 09:27, Вторник
Добавил:Szen
Теги:prettify, подсветка

Мини-форум

№ 02009-11-24 09:27
Szen
Аватар участника Szen
Здесь вы можете задать вопрос или оставить комментарий по теме "Подсветка синтаксиса через Prettify".
Гость
№ 1
2010-07-05 12:51
Szen
Аватар участника Szen
Apocalypse, если подождете пару дней, то переделаем скрипт под UCOZ. smile
Szen
№ 2
2010-07-15 08:36
Szen
Аватар участника Szen
Apocalypse, мы сделали универсальный скрипт подсветки синтаксиса, который будет работать на любом движке (включая UCOZ). Найти описание и метод использования можете здесь:
http://szenprogs.ru/blog....7-08-85
Szen · WWW
№ 3
2011-01-18 08:17
Apocalypse
Аватар участника Apocalypse
Szen, огромное спасибо! Какой же вы всё-таки молодец!
Ярослав
Учавствовать в обсуждении "Подсветка синтаксиса через Prettify" могут только зарегистрированные пользователи.
Реклама
Кнопка портала
Посетители
Зарегистрированных посетителей не было.
Друзья портала
Вакантное место для вашей рекламы!
RSS лента Блога
RSS лента Каталога файлов
RSS лента Новостей
Будьте в курсе событий.
Введите ваш email:

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

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



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