Lighter is a free syntax highlighting class developed with MooTools. It was created with the MooTools developer in mind and takes advantage of many of the Framework's features. Using it can be as simple as adding a single script to your webpage, selecting the elements you wish to highlight, and Lighter takes care of the rest. It is currently in use on the MooTools forge so you are seeing it in action right here.
Download Lighter and extract the files. Copy the Compressed directory into a web-accessible directory of your choice. Feel free to rename the folder to anything you want. You can safely delete any Fuel/Flame files you're not going to use. For easiest usage, keep all the files in the same directory.
Link to the Lighter.js file in the head section of your document after the MooTools file. The example below assumes you moved the Compressed folder into your scripts folder called "js" and renamed it to "lighter".
<head> ... <script type="text/javascript" src="/js/mootools.core.js"></script> <script type="text/javascript" src="/js/lighter/Lighter.js"></script> ... </head>
Prepare your source code by giving the element containing the code a class name with the language and theme you want to use. Note: Lighter use the first class as the fuel:flame combo. Ensure that any other classes go after this.
<!-- Syntax highlight using Fuel.js.js and default theme -->
<pre id="jsCode" class="js">var myClass = new Class({})</pre>
<!-- Syntax highlight using Fuel.php.js and theme from Flame.twilight.css -->
<pre id="phpCode" class="php:twilight"><?php php_info() ?></pre>
Finally, use the following JavaScript code examples inside of a 'domready' or 'onload' callback to create the highlighted elements. Be sure to check out the Options section to see the various options you can use. The FAQ and Examples page has other various examples you can use.
// Object style syntax.
var myLighter = new Lighter('jsCode', { altLines: 'hover' });
// Element style syntax
$('phpCode').light({ altLines: 'hover' });
// Highlight all "pre" elements in a document
$$('pre').light({ altLines: 'hover' });
// Highlight all code elements within a pre element (how Markdown usually outputs code) using the each() method
$$('pre > code').each(function(element) {
var lighter = new Lighter(element, {
altLines: 'odd',
container: el.getParent()
});
})
Note: Lighter assumes that the rest of the files needed are also in that "/js/lighter/" folder. It will attach those files on demand. This means that Lighter files don't load until after the domready/load event happens which might cause a small flicker between unhighlighted and highlighted state. If you don't like this behavior, you can attach the files yourself to load all Lighter files along side the initial document load.
All browsers supported by MooTools are compatible with Lighter. It's possible that it may work with earlier/other browsers but these are unofficially supported. The official list is:
Lighter is licensed under the MIT License. Use it, modify it, have fun with it... in any circumstance.
A note on comments here: These comments are moderated. No comments will show up until they are approved. Comments that are not productive (i.e. inflammatory, rude, etc) will not be approved.
Found a bug in this plugin? Please report it this repository's Github Issues.
blog comments powered by Disqus