97 lines
No EOL
4.9 KiB
Text
97 lines
No EOL
4.9 KiB
Text
|
|
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
|
|
<head>
|
|
...
|
|
<!-- Include EnlighterJS Styles -->
|
|
<link rel="stylesheet" type="text/css" href="css/EnlighterJS.yui.css" />
|
|
|
|
<!-- Include MooTools Framework -->
|
|
<script type="text/javascript" src="js/mootools-core-1.5.0-full-nocompat.js"></script>
|
|
|
|
<!-- Include EnlighterJS -->
|
|
<script type="text/javascript" src="js/EnlighterJS.yui.js" ></script>
|
|
...
|
|
</head>
|
|
|
|
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
|
|
<!-- Syntax highlight using Javascript and default theme -->
|
|
<pre data-enlighter-language="js">var myClass = new Class({})</pre>
|
|
|
|
<!-- Syntax highlight using the Git Theme with default language-->
|
|
<pre data-enlighter-theme="git"><?php php_info() ?></pre>
|
|
|
|
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
|
|
<!-- Initialize EnlighterJS -->
|
|
<meta name="EnlighterJS" content="Advanced javascript based syntax highlighting" data-language="standard" data-theme="standard" data-indent="5" data-compiler="List" data-altlines="none" data-selector="pre" />
|
|
|
|
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
|
|
<!-- just highlight line number 2 !-->
|
|
<pre data-enlighter-language="js" data-enlighter-highlight="2">
|
|
this.tokens = tokens || [];
|
|
options = this.options;
|
|
</pre>
|
|
|
|
<!-- highlight line 2,3,4 !-->
|
|
<pre data-enlighter-language="js" data-enlighter-highlight="2-4">
|
|
EnlighterJS.Util.Helper(document.getElements('pre'), {
|
|
indent : 5,
|
|
grouping: false
|
|
});
|
|
</pre>
|
|
|
|
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
|
|
<!-- start linenumber counting with line 15 !-->
|
|
<pre data-enlighter-language="js" data-enlighter-lineoffset="15">
|
|
this.tokens = tokens || [];
|
|
options = this.options;
|
|
</pre> |