«
»

Подсветка исходников на веб-страницах

2010-04-24

В данном посте речь пойдет о замечательном jQuery-плагине для подсветки исходных кодов на веб-страничках под названием Сhili.

Сhili позволяет просто и быстро придать очаровательный вид исходному коду.
Он умеет подсвечивать CSS, HTML, JavaScript, PHP, JAVA, MySQL, Delphi, C++ и др.

Как же использовать этот чудо-плагин? Так и быть, приведу краткую инструкцию…

1. Скачайте библиотеку jQuery и сам плагин Chili:
Их можно найти по следующим ссылкам:
http://jquery-chili-js.googlecode.com/files/chili-2.2.zip
http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js
Разархивируйте плагин и залейте себе на хостинг, допустим, в папку «js/».

2. Для инициализации скрипта нужно добавить в html-код страницы следующие строки:

<script type="text/javascript" src="/js/jquery-1.3.2.min.js"></script>
<script type="text/javaScript" src="/js/chili/jquery.chili-2.2.js"></script>
<script type="text/javascript">
ChiliBook.recipeFolder = "/js/chili/";
</script>

3. Оберните код, который нужно подсветить, тегами <code>…</code>, и укажите класс, соответствующий языку.
Пример:

<code class="javascript">
for(var i=0; i&lt;10; i++) {
alert(&quot;Click me [&quot;+i+&quot;]&quot;);
}
</code>

Вот и всё!
В результате мы получим вот такой вот подсвеченный html-код:

/*Example code*/
for(var i=0; i<10; i++) {
alert("Click me ["+i+"]");
}

Должен подчеркнуть следующие моменты:

  • 1. Незнаю почему, но Chili не заработал у меня с версией jQuery v1.4.2. Только после того как я подключил jQuery v1.3.2 всё начало работать.
  • 2 .С целью оптимизации скорости загрузки Chili, его исходний код можно минимизировать. Он очень хорошо сжимается.
  • 3. Обратите внимание, что предназначенный для подсветки исходный код должен быть инвертирован в html-сущности (к примеру: «</code>» будет «&lt;/code&gt;»).

Более подробную информацию об этом плагине можно найти по следующим ссылкам:
http://noteslog.com/personal/projects/chili/2.2/
http://code.google.com/p/jquery-chili-js/
http://plugins.jquery.com/project/chili



Добавить комментарий