Basic Usage
-----------
Download EnlighterJS and extract the files. Copy the prebuild files of the *Build/* directory into a web-accessible directory of your choice.
Link to the EnlighterJS.yui.js javascript file and the EnlighterJS.yui.css stylesheet in the head section of your document **after** the MooTools file.
The example below assumes you moved the files into your scripts folder under "js/" and your styles folder under "css/".
The extension .yui indicates that these files are compressed with the [Yahoo YUI Compressor](http://yui.github.io/yuicompressor/). **These files are ready for productive use!**
If you want to start developing, you should consider to use the uncompressed versions for easier debugging!
Rendering options can be defined as global option (Metainit attributes or options object) or local option using the `data-enlighter-` attributes on each codeblock.
It is recommended to use local options only if necessary (e.g. to define a language for each block).
#HTML
...
...
Prepare your source code by giving the element (containing the code) an optional *data-enlighter-language* attribute with the language of the code.
**Notice**: Instead of Lighter.js *fuel:flame' syntax combo within the css classname, EnlighterJS will use HTML5 `data-` attributes!
#HTML
var myClass = new Class({})
Finally, use the following JavaScript code examples inside of a 'domready' or 'onload' callback to create the highlighted elements - this process is called initialization.
Be sure to check out the Options section to see the various options you can use. The Example pages have various examples you can use.
It's strongly recommended to use the Element style syntax or the EnlighterJS.Util.Helper class! Further informations are available within the [Initialization Section](#initialization).
#JS
// OPTION1 - Element style syntax - get element by it's ID
document.id('myJsCode').enlight(true);
// OPTION2 - Element style syntax - highlight all pre elements with the class *myPhp*
// an EnlighterJS instance is automatically created
document.getElements('pre.myPhp').enlight({language: php});
// OPTION3 - Use the Helper-Class to highlight all pre elements - this is the recommended way and required to use the Code-Group feature
EnlighterJS.Util.Helper(document.getElements('pre'), {
language: 'javascript',
theme: 'git'
});
Instead of initializing EnlighterJS manually, since version 1.1 it is possible to use a simple html-metatag (called *EnlighterJS Metainit*) to run Enlighter on your page (with basic config options). Further informations are available within the [Initialization Section](#initialization).
#HTML
Since version 1.8, it's possible to highlight special lines of code. Just add the attribute `data-enlighter-highlight` to your codeblock and provide a set of lines to mark (ranges supported).
#HTML
Version 2.0 introduces some amazing features like Inline-Syntax-Highlighting.
Just change the renderer option to 'Inline' - and of course the [Metainit](#metainit_initialization) tool performs this action automatically
#JS
// Highlight all code tags and use Javascript as default language
EnlighterJS.Util.Helper(document.getElements('code'), {
language: 'javascript',
renderer: 'Inline'
});
In some cases it might be usefull to start the linnumber counting with another value than 1 (maybe an excerpt). In this case you can add the `data-enlighter-lineoffset` attribute to your codeblock.
#HTML