Главная » Файлы » Скрипты для uCoz » Другие скрипты
Подсветка синтаксиса code через Prettify
22.06.14, 15:43:00



Будем делать подсветку синтаксиса посредством скрипта 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 вашей странички:

Код
<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. Выглядеть это будет так:

Код
<body onload="prettyPrint();">


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

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


или

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


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

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

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


На этом все. Удачи в свершениях!
Категория: Другие скрипты | Добавил: Apocalypse | Теги: синтаксиса, Через, подсветка, Prettify, code
Просмотров: 335 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: