Lighter.js – это скрипт для подсветки синтаксиса, который использует для своей работы библиотеку Mootools. Скрипт прост в использовании и настройке, имеет различные цветовые темы. Я создал небольшой демо пример, чтобы вы могли оценить его способности. Смотреть демо пример.
Теперь о том, как подключить и использовать скрипт.
Во-первых нужно скачать и подключить необходимые скрипты:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.1/mootools-yui-compressed.js"></script> <script type="text/javascript" src="source/Lighter.js"></script> <script type="text/javascript" src="source/Flame.js"></script> <script type="text/javascript" src="source/Flame.git.js"></script> <script type="text/javascript" src="source/Fuel.js"></script> <script type="text/javascript" src="source/Fuel.js.js"></script> <script type="text/javascript" src="source/Fuel.ruby.js"></script>
Сначала подключается файл библиотеки Mootools, затем исходники Lighter.js. Заметьте, что файлы с префиксом Flame, содержат темы для подсветки синтаксиса. То есть, если вы хотите иметь подсветку в стиле github.com, то подключите файл Flame.git.js. Файлы с префиксом Fuel распознают исходный код языков. Это значит, что если вам нужно подсвечивать исходники на языках Ruby и JavaScript, то нужно подключить файлы Fuel.ruby.js и Fuel.js.js.
Блоки с подсвечиваемым кодом нужно отметить классом, в котором нужно указать язык программирования и тему подсветки:
<pre class="ruby:git"> // далее подсвечиваемый код </pre>
Помимо этого, есть и другой способ указать скрипту тему и язык программирования – это указать в опциях вызова скрипта параметры Flame и Fuel.
Заключительный шаг – вызов функции light, в которую можно передать различные параметры работы скрипта:
$$('pre').light({
altLines: 'hover',
mode: 'ol'
});
Здесь, в качестве параметров я передаю значение hover для парметра altLines для подсветки строк при наведении на них указателя мышки, ol для параметра mode для того, чтобы показывать номера строк. Все остальные опции можно узнать здесь.
