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

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

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



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

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