added site files

2025-05-16 18:49:08 +02:00 · 2025-05-16 18:49:08 +02:00 · 329148c253
commit 329148c253
parent a6f70a6c78
253 changed files with 30486 additions and 0 deletions
--- a/EnlighterJS/Docs/Copy
+++ b/EnlighterJS/Docs/Copy
@ -0,0 +1,97 @@
+
+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>