jQuery + Chili = подсветка кода

Владимир | | HTML, JavaScript, Web разработка.

jquery chili

Некоторое время назад я делал обзор библиотек, предназначенных для подсветки кода. Но тогда я упустил из виду одно очень интересное решение (скорее всего не одно 🙂 ).

Называется эта библиотека Chili и представляет собой плагин к jQuery. Т.е. в данном случае речь идет о подсветке кода на стороне браузера.

Это очень удачное решение, особенно если вы уже используете jQuery для других целей. В этом случае объем дополнительного JavaScript кода сводится к минимуму.

Прежде всего, посмотрите на список поддерживаемых языков: C++, C#, CSS, Delphi, Java, JavaScript, LotusScript, MySQL, PHP и XHTML.

Конечно, если сравнивать с библиотеками вроде GeShi (которые выполняют подсветку на стороне сервера), то список выглядит совсем не впечатляюще. Но, с другой стороны, вы не используете ресурсы сервера для подсветки.

Да и по большому счету все самые распространенные языки присутствуют.

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

Теперь рассмотрим установку и настройку.

1) Распаковываете библиотеку в какую-нибудь папку на сервере (например, js/chili).

2) Добавляете в заголовок страницы следующий код:

<script type="text/javascript" src=" jquery.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>. В атрибутах class этих тегов указываете название языка.

Например:

<code class="php">$myVar = 1;</code>

Если блок кода содержит несколько строк нужно добавить тег <pre>

<pre><code class="php">
class MyClass {
	
	private $name;
	private $age;
	
	public function MyClass($name, $age) {
		$this->name = $name;
		$this->age = $age;
	}
</code><pre>

Плагин довольно гибко настраивается.

Например, вы можете включить/отключить нумерацию строк и указать номер первой строки. Для этого используется атрибут class тега pre.

<pre class="ln-25">

В этом случае первая строка в блоке кода будет иметь номер 25.

Кстати, при выделении мышкой фрагмента в подсвеченном блоке появляется окно с выделенным текстом и без нумерации строк. Очень удобно при копировании.

Единственный нюанс. Чтобы закрыть это окно, нужно кликнуть мышкой внутри него. Клики по странице не дают никакого эффекта.

Кроме того, вы можете использовать подсветку только для определенных блоков. Для этого,

ChiliBook.automatic = false;
$( '#blockId' ).chili();

Как видите, библиотека довольно удобная.

Ссылки на другие примеры вы найдете на этой странице.

Удачи!

Постовой:
Автор блога SEO-copywriting напишет контент для сайта всем желающим.

  • Sam

    Разметка поплыла.

    • Спасибо!
      Я заметил, только не сразу 🙁 . Уже поправил.

  • Sam

    Разметка поплыла.

    • Спасибо!
      Я заметил, только не сразу 🙁 . Уже поправил.

  • А как насчет автоопределения языка? а то на форуме не всегда язык будут выставлять.

    • Если нужно автоопределение попробуйте highlight.js
      Правда, такая подсветка будет работать медленнее.

  • А как насчет автоопределения языка? а то на форуме не всегда язык будут выставлять.

    • Если нужно автоопределение попробуйте highlight.js
      Правда, такая подсветка будет работать медленнее.

  • нет, нашего пользователя подсведкой кода сейчас не удивить! 🙂

  • нет, нашего пользователя подсведкой кода сейчас не удивить! 🙂

  • Спасибо, Владимир, за информацию.
    Применил у себя на блоге. Только есть проблемы с class=»php».
    1. Если в блоке присутствуют , и , то блок отобразится пустым.
    2. И если в блоке присутствует html код и php код. Я присваиваю class="php" в одном случае корректно все подсвечивает, в другом - часть кода пропадает. Возможно, проблема общая с 1.
    А в целом, все стало красивей и читабельней :) И радует, что это плагин к jQuery.

  • Спасибо, Владимир, за информацию.
    Применил у себя на блоге. Только есть проблемы с class=»php».
    1. Если в блоке присутствуют , и , то блок отобразится пустым.
    2. И если в блоке присутствует html код и php код. Я присваиваю class="php" в одном случае корректно все подсвечивает, в другом - часть кода пропадает. Возможно, проблема общая с 1.
    А в целом, все стало красивей и читабельней :) И радует, что это плагин к jQuery.

  • По первому пункту имеется в виду присутствуют «», а то обрезало.

  • По первому пункту имеется в виду присутствуют «», а то обрезало.

  • Тьфу ты, опять обрезало. Короче, открывающий и закрывающий php-дескрипторы.

    • Есть два примера на оф.сайте плагина, в которых показана подстветка php + html раз и два, и, похоже, подсветка вполне корректная, несмотря на <?php и ?>.
      Посмотрите, может найдёте разницу между их примерами и своим.

  • Тьфу ты, опять обрезало. Короче, открывающий и закрывающий php-дескрипторы.

    • Есть два примера на оф.сайте плагина, в которых показана подстветка php + html раз и два, и, похоже, подсветка вполне корректная, несмотря на <?php и ?>.
      Посмотрите, может найдёте разницу между их примерами и своим.

  • Ivolga

    попробовала — ничего не получилось.
    вообще ничего не подсвечивает, не представляю даже, где искать проблему.ошибок никаких не дает.

    • Возьмите пример с оф. сайта и по этапно переделывайте под ваш сайт. Если на каком-то этапе перестанет работать, будете знать где возникла проблема.

      • Ivolga

        спасибо за опер. ответ.
        в общем, если 
        ChiliBook.recipeFolder = «chili_2_2/»;  
        то не работает, а 
        если так 

        то работает, по кр. мере  с php и html.
        но вот почему не работает с mysql не понимаю 🙁

        ни так
                 SELECT * f1 FROM tab1;  }    ни так            function table_exists($table) { $table = addslashes($table); $q = mysql_query("SELECT 1 FROM `$table` WHERE 1=0", $this->dbh); if($q === false) return false; else return true; }   

        • Вообще странно. В документации
          ChiliBook.recipeFolder = «SOMEWHERE/»;