$('#loading-example-btn').click(function () {
var btn = $(this)
btn.button('loading')
$.ajax(...).always(function () {
btn.button('reset')
});
});
...
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, window.addEvent('domready', function(){}); labore et dolore magna aliquyam erat.
var myClass = new Class({})
php_info();``` 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. Further informations as well as some advanced examples are available within the [Initialization Section](#initialization). ```js // Use the Init utility function to highlight all pre elements - this is the recommended way and required to use the Code-Group feature EnlighterJS.Util.Init('pre', null, { language: 'php', theme: 'Classic' }); ``` 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). ```html ``` ### Some Examples ### 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
this.tokens = tokens || []; options = this.options;
EnlighterJS.Util.Init('pre', null, {
indent : 2,
grouping: false
});
```
Version 2.0 introduces some amazing features like Inline-Syntax-Highlighting. The [Metainit](#metainit_initialization) tool performs this action automatically.
```js
// Highlight all pre(block) + code(inline) tags and use Javascript as default language
EnlighterJS.Util.Init('pre', 'code', {
language: 'javascript'
});
```
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
this.tokens = tokens || []; options = this.options;``` Initialization -------------- Initialization means, that all elements (you wish to highlight) get selected and rendered by EnlighterJS. The original codeblock is set invisible and the rendered one is injected after. This task can be performed in **two different ways**: ### 1. Metainit Initialization ## Instead of initializing EnlighterJS by javascript, it's possible to use a simple html-metatag (called *EnlighterJS Metainit*) to run Enlighter on your page (with basic config options). This will be usefull if you only need a basic setup. Take a look into the examples *Examples/Testcase.Metainit.html* to see how it is working! Basically Metainit takes the given html attribute options and converts them into a options object. These options will be passed to the `Enlighter.Util.Helper()` utility function - for inline elements (InlineRenderer) identified by `data-selector-inline` as well as block elements (BlockRenderer) by `data-selector-block`. This will take all the work for you by adding a single line to the head section to use all the amazing EnlighterJS features like Inline-Syntax-Highlighting or CodeGroups! #### Example #### Description: It enables block highlighting for all `pre` elements on the page as well as inline highlighting for all `code` elements. Javascript is set as default language used for highlighting. Each tab is replaced by four spaces to avoid rendering issues. Additionally the "raw code button" is enabled which allows the user to toggle between highlighted and unhighlighted code (e.g. to copy code). ```html ``` #### Attributes #### Following attributes are available (optional) and will be converted to the required options object to trigger `EnlighterJS.Util.Helper`. Take a look into the Metainit.js sources to see how it is working. * **name** (string) **REQUIRED** - This attribute identifies the metatag and has to be set to "EnlighterJS" (case sensitive) * **data-language** (string) - Sets the default language of every codeblock (inline+block) on the page - default: **generic** * **data-theme** (string) - Sets the default theme of every codeblock (inline+block) on the page - default: **enlighter** * **data-indent** (number) - Number of spaces to replace tabs with (-1 means no replacement) - default: **-1** * **data-selector-block** (string) - The CSS selector to match all codeblocks for block-highlighting. Use "NULL" to disable block highlighting - default: **pre** * **data-selector-inline** (string) - The CSS selector to match all codeblocks for inline-highlighting. Use "NULL" to disable inline highlighting - default: **code** * **data-rawcodebutton** (boolean) - Enables the optional "RAW Code Button" which will appear in ever codeblock (Block Renderer) to switch between highlighted and un-highlighted code - default: **false** * **data-windowwbutton** (boolean) - Enables the optional " Button" which * **data-infobutton** (boolean) - Enables the optional " Button" which * **data-linenumbers** (boolean) - Display line-numbers in code-blocks (ol/li list used as container) - default: **true** * **data-hover** (string) - Defines a css-classname which is added to each line. To enable build-in hover effects set it to "hoverEnabled" (default), *null* to disable it or to any custom class - default: **"hoverEnabled"** ### 2. Javacript based Initialization ### EnlighterJS provides 4 ways to get manually initialized: * Use the native `Element.enlight()` method which will automatically creates an EnlighterJS instance of the selected single element * Create a new instance of `EnlighterJS` and provide the single element to highlight * To use Code-Groups you have to use `EnlighterJS.Util.Helper` utility function **Notice:** You can pass any of the [Global Options](#global_options) with each method. Every method will invoke the `EnlighterJS` constructor. #### Option 1 - Native Element extension #### ```js // get element by it's ID and activate highlighting using markdown as language document.id('myCustomCode').enlight({ language: 'ruby', indent: 2 }); // disable highlighting document.id('myCustomCode').enlight(false); // remove highlighting (drop generated HTML from DOM) document.id('myHighlightedCode').enlight('dispose'); ``` #### Option 2 - Use an EnlighterJS instance (OOP Style) #### ```js // create a new EnlighterJS instance var myEnlighter = new EnlighterJS(document.id('myCustomCode'), { language: 'php', showLinenumbers: false }); // enable highlighting myEnlighter.enlight(true); // remove highlighting (drop generated HTML from DOM) myEnlighter.dispose(); ``` #### Option 3 - Use an EnlighterJS.Util.Helper utility function #### ```js // Highlight all code tags (inline code) and use Javascript as default language EnlighterJS.Util.Helper(document.getElements('code'), { language: 'javascript', renderer: 'Inline' }); // 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}); ``` Options ------- Customize EnlighterJS` appearance by using the following configuration options. Try to start with one of the Example pages! ### Global Options ### The following options can be passed to the following methods to customize the rendering behaviour: * `EnlighterJS(codeblockElement, options = {}, container = null)` constructor * `EnlighterJS.Util.Helper(elements, options = {})` utility function * `EnlighterJS.Util.Init(blockSelector, inlineSelector, options= {})` utility function (recommended) #### Option Keys #### * **language** - (string) The default language used if no `data-enlighter-language` attibutes are used - default: **"generic"** * **theme** - (string) The default theme used if no `data-enlighter-theme` attibutes are used - default: **"enlighter"** * **indent** - (integer) Number of spaces to replace tabs with (-1 means no replacement) - default: **-1** * **hover** - (string) Defines a css-classname which is added to each line. To enable build-in hover effects set it to "hoverEnabled" (default), *null* to disable it or to any custom class - default: **"hoverEnabled"** * **oddClassname** - (string) CSS-classname of all odd lines - default: **"odd"** * **evenClassname** - (string) CSS-classname of all even lines - default: **"even"** * **showLinenumbers** - (boolean) Display line-numbers in code-blocks (ol/li list used as container) - default: **true** * **forceTheme** - (boolean) Forces the renderer to use ignore attribute theme setting `data-enlighter-theme` - default: **false** * **renderer** - (string) Defines the renderer used to generate the output. Use `Inline` for Inline-Syntax-Highlighting or `Block` for standard highlighting - default: **Block** * **rawButton** - (boolean) Enables the optional "RAW Code Button" which will appear in ever codeblock (Block Renderer) to switch between highlighted and un-highlighted code - default: **true** * **infoButton** - (boolean) Enables the optional "Info Button" which provides a link to `enlighterjs.andidittrich.de` - default: **true** * **windowButton** - (boolean) Enables the optional "Window Button" which opens a new window with the unhighlighted "raw" code within - default: **true** * **grouping** - (boolean) Enables code-groups (only used by `EnlighterJS.Util.Helper` utility) - default: **true** * **inlineContainerTag** - (string) The html tag-name of the container (inline-syntax-highlighting only) where the generated code is wrapped into - default: **"span"** * **ampersandCleanup** - (boolean) Should the ampersand escape sequence `&` automatically replaced by the ampersand sign during code cleanup ? Useful to resolve double escaped html code - default: **true** * **rawcodeDoubleclick** - (boolean) Toggle RAW/Highlighted code on doubleclick ? - default: **false** * **cryptex** - (object) Special options for use with the [Cryptex WordPress Plugin](https://wordpress.org/plugins/cryptex) #### Example #### ```js var options = { language : 'javascript', theme : 'Eclipse', indent : 2, forceTheme: false, rawButton: false, showLinenumbers: false, renderer: 'Inline' }; // Initialize EnlighterJS - use inline-highlighting only EnlighterJS.Util.Init(null, 'code', options); ``` ### Element Options ### Some options need to be applied directly to the container elements which holds the code to highlight. These "local" options will override all global options which are set. * **data-enlighter-language** (string) - The language of the codeblock - overrides the global default setting | Block+Inline Content option * **data-enlighter-theme** (string) - The theme of the codeblock - overrides the global default setting | Block+Inline Content option * **data-enlighter-group** (string) - The identifier of the codegroup where the codeblock belongs to | Block Content option * **data-enlighter-title** (string) - The title/name of the tab | Block Content option * **data-enlighter-linenumbers** (boolean) - Show/Hide the linenumbers of a codeblock (Values: "true", "false") | Block Content option * **data-enlighter-highlight** (string) - A List of lines to point out, comma seperated (ranges are supported) e.g. "2,3,6-10" | Block Content option * **data-enlighter-lineoffset** (number) - Start value of line-numbering e.g. "5" to start with line 5 - attribute `start` of the ol tag is set | Block Content option #### Example 1 #### ```html
...``` #### Example 2 #### ```html
EnlighterJS also supports alert('Inline Sourcecode highlighting'); (since version 2.0).
this.tokens = tokens || []; options = this.options;
import javax.swing.JOptionPane;
public class OddEven {
/**
* "input" is the number that the user gives to the computer
*/
private int input; // a whole number("int" means integer)
/** Test Snippet */
$mysqli = new mysqli("localhost", "my_user", "my_password", "world");
/* check connection */
if (mysqli_connect_errno()) {
printf("Connect failed: %s\n", mysqli_connect_error());
exit();
}
```
### Initialize Code-Groups ###
The initialization of code-groups differs from the standard. You have to use the `EnlighterJS.Util.Helper` utility function (triggered by Metainit and EnlighterJS.Util.Init) - it does the complete initialization and grouping for you!
* JS-Initialization Chain: EnlighterJS.Util.Init -> **EnlighterJS.Util.Helper** -> EnlighterJS
* Metainit-Initialization Chain: EnlighterJS.Util.Metainit -> **EnlighterJS.Util.Helper** -> EnlighterJS
Finally, use the following JavaScript code inside of a `domready` or `onload` event to create the highlighted elements.
Check out the options section to see the various options you can use.
**Notice:** `grouping` has to set to `true` when using the javascript based initialization
```js
// highlight all pre tags; no inline-highlighting
EnlighterJS.Util.Init('pre', null, {
indent: 4,
language: 'js',
theme: 'enlighter',
grouping: true,
rawButton: true
});
```
Custom Builds
-------------
The EnlighterJS project is using [Apache ANT](http://ant.apache.org/) as build-system.
[UglifyJS2](https://github.com/mishoo/UglifyJS2) and [clean-css](https://github.com/jakubpawlowicz/clean-css) are used to minify the production-ready javascript and css files.
To save bandwidth/traffic or include self-defined languages, you can easily customize your EnlighterJS build by editing the *build.xml* file (found in the root directory) and run Apache ANT (target *build*)
### Cloud/Web based builder ###
You can also use the web-based [EnlighterJS Builder](http://enlighterjs.org/Builder.html) to generate your customized package **without the need of ANT/development environment** - everything is done for you server-site!
### Software Requirements ###
* [Apache ANT 1.9](http://ant.apache.org/)
* [Ant-Contrib](http://sourceforge.net/projects/ant-contrib/files/ant-contrib/)
* [Node.js](https://nodejs.org/)
* [UglifyJS2](https://github.com/mishoo/UglifyJS2)
* [clean-css](https://github.com/jakubpawlowicz/clean-css)
### Include/Exclude Languages and Themes ###
If you want to remove some of the default theme you can edit the *include.themes* property and modify the list of css source files.
For Example: only include the modern themes
```xml