Некоторое время назад я делал обзор библиотек, предназначенных для подсветки кода. Но тогда я упустил из виду одно очень интересное решение (скорее всего не одно 🙂 ).
Называется эта библиотека 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 напишет контент для сайта всем желающим.
