refactored structure; merged Enlighter docs

Author: AndiDittrich

CustomThemes.md

@@ -0,0 +1,2 @@
+Create Custom Themes
+===========================

README.md

@@ -5,16 +5,31 @@ EnlighterJS3 Documentation
 
 **EnlighterJS, an open source syntax highlighter written in pure javascript**
 
-Index
--------------
+EnlighterJS on your Website
+-----------------------------
 
 * [Mode of Operation](Mode_of_Operation.md) - how EnlighterJS works
 * [Integration](Integration.md) - add EnlighterJS to your website
-* [Configuration and Options](Options.md) - configure EnlighterJS
-* [Methods/API](Methods_and_API.md) - advanced use cases
 * [FAQ](FAQ.md) - Frequently Asked Questions
+
+EnlighterJS editing plugins
+-----------------------------
+
+* [TinyMCE](editing/TinyMCE.md)  - Howto add code snippets via TinyMCE WYSIWYG editor
+* [Gutenberg](editing/Gutenberg.md)  - Howto add code snippets via WordPress Gutenberg editor
+
+EnlighterJS CMS Integration
+-----------------------------
+
+* [Enlighter WordPress Plugin](wordpress/) - use EnlighterJS with WordPress - includes full visual editor integration
+
+For Developers
+---------------
+
+* [Developer Guide](development/README.md) - add new themes and languages
+* [Configuration and Options](development/Options.md) - configure EnlighterJS
+* [Methods/API](development/Methods_and_API.md) - advanced use cases
 * [Tweaks + Advanced Settings](Tweaks.md) - change EnlighterJS visual appearance (low level)
-* [Developer Guide](DeveloperGuide.md) - add new themes and languages
 
 Related
 -------------
@@ -30,9 +45,8 @@ EnlighterJS is OpenSource and managed on [GitHub](https://github.com/EnlighterJS
 To simplify the release and quality control process, please follow these remarks:
 
 1. **One Enhancement** _==>_ **One Commit** (don't merge a bunch of changes in a single commit!)
-2. Only commit changes to the `src/` or `examples/` directory. Otherwise your request will be rejected
-3. Discuss larger project changes with the Maintainer **before implementing**
-4. Use GitHub for question, bugreports and discussions
+2. Discuss larger project changes with the Maintainer **before implementing**
+3. Use GitHub for question, bugreports and discussions
 
 License
 ----------------------------

assets/gutenberg.gif

@@ -5,6 +5,8 @@ Index
 ----------------
 
 * [Highlighting-Engine and Symbol](HighlightingEngine_and_Symbols.md)
+* [Configuration and Options](development/Options.md) - configure EnlighterJS
+* [Methods/API](development/Methods_and_API.md) - advanced use cases
 * [Theme Development](#theme-development)
 * [Language Development](#language-development)
 

assets/tinymce_codeblock_settings.gif

@@ -0,0 +1,26 @@
+WordPress Gutenberg Editor
+============================
+
+> The important things first: please use the **Visual Editor Plugin** or **Gutenberg** whenever possible
+> **never ever use shortcodes** in the Visual Editor!
+> 
+> Shortcodes are designed to be used with the **Text Editor (HTML)** only!
+
+
+Insert Code-Snippets
+-----------------------------------------
+
+Enlighter provides a full Gutenberg-Editor-Integration which allows you to edit add/edit code to your posts seemless.
+
+### Example ###
+
+![Insert Code](../assets/gutenberg.gif)
+
+### Steps ###
+
+1. Click on the `plus icon` to insert a new Gutenberg Block
+2. Search for `Enlighter Sourcecode` block
+3. Paste your snippet into the text-area
+4. Select the language of your snippet (javascript in this example)
+5. You can edit the snippet directly in the Visual Editor at any time
+6. Publish your post!

assets/tinymce_codegroup.gif

@@ -0,0 +1,119 @@
+TinyMCE WYSIWYG Editor Tutorial
+=====================================
+
+Insert Code-Snippets
+----------------------------------------
+
+EnlighterJS provides a full TinyMCE editor integration via [EnlighterJS/Plugin.TinyMCE](https://github.com/EnlighterJS/Plugin.TinyMCE). This allows you to add/edit code to your content seemlessly.
+
+The examples on this page are showing the editor plugin added to WordPress via [Enlighter Plugin](https://wordpress.org/plugins/enlighter/) - it also works standalone!
+
+### Example ###
+
+![Insert Code](../assets/tinymce_codeinsert.gif)
+
+[EnlighterJS TinyMCE Live-Demo](https://tinymce.enlighterjs.org/)
+
+### Steps ###
+
+1. Move the Cursor to the position you want to insert the code snippet
+2. Click on the `Enlighter Code Insert` Button on the upper right of the toolbar
+3. Paste your snippet into the text-area
+4. Select the language of your snippet (javascript in this example)
+5. Select "Left-Align-Indentation" - this will strip the unnecessary code indentation (marked in the example)
+6. Click **OK**
+7. You can edit the snippet directly in the Visual Editor at any time
+8. Publish your post!
+
+Use Editor-Formats to highlight existing code
+------------------------------------------------------
+
+Sometime you already have some code within your posts you want to highlight. In this case Enlighter comes with its own **Formats** which allows you to highlight a selected text in the Visual Editor.
+
+### Example ###
+
+![Highlight existing Code](../assets/tinymce_editorformats.gif)
+
+### Steps ###
+
+1. Expand the Editor Toolbar
+2. Select the content you want to highlight
+3. Goto `Formats -> Enlighter Codeblocks` and select the language
+4. Publish your post!
+
+
+Align your code with <kbd>tab</kbd> key
+------------------------------------------------------
+
+Enlighter 3.5 comes with its own tab-alignment addon which allows you to align your code directly within the editor (optional feature).
+
+**Requirement**: Set `Enlighter -> Editing -> Visual Editor -> Tweaks -> Enable Tab Indentation`
+
+* Move Right: Select code + press <kbd>tab</kbd> key
+* Move Left: Select code + press <kbd>shift</kbd>+<kbd>tab</kbd> key
+
+
+![Highlight existing Code](../assets/tinymce_tabindent.gif)
+
+
+Use Inline Code Highlighting
+------------------------------------------------------
+
+Enlighter allows you to highlight codeblocks as well as **inline snippets** out-of-the-box. Inline-Code is often used to highlight small pieces of code diretly within a larger textblock.
+
+### Example ###
+
+![Highlight Inline Code](../assets/tinymce_inline.gif)
+
+### Steps ###
+
+1. Expand the Editor Toolbar
+2. Select the content you want to highlight
+3. Goto `Formats -> Enlighter Inline` and select the language
+4. Publish your post!
+
+
+Change Code Settings / Advanced Code Settings
+------------------------------------------------------
+
+Sometime you may need some advanced features like
+
+* Disable Linenumbers
+* Change Theme of a individual codeblock
+* Set a linenumber offset
+* Highlight special lins
+* Create Codegroups
+
+this settings are available after the code-snippet has been added to the editor by using the `Enlighter Code Settings` Button
+
+### Example ###
+
+![Change Codeblock Settings](../assets/tinymce_codeblock_settings.gif)
+
+### Steps ###
+
+1. Move the Cursor into an existing Enlighter Codeblock (or inline)
+2. The `Enlighter Code Settings` Button will appear on the upper right side of the codeblock **and** on the upper right of the toolbar
+3. Click on the `Enlighter Code Settings` Button
+4. An advanced settings dialog will be opened
+5. Change the Theme
+6. Set a linenumber-offset
+7. Highlight a special line
+8. Click **OK**
+9. Publish your post!
+
+Codegroups
+------------------------------------------------------
+
+In some cases, your code example rely on a several different languages. For example **HTML**, **CSS** and **Javascript**. It can be helpful to group this snippets together.
+
+### Example ###
+
+![Define Codegoups](../assets/tinymce_codegroup.gif)
+
+### Steps ###
+
+1. Add some code snippets to your post
+2. Click on the `Enlighter Code Settings` Button to edit a codeblock
+3. Add a `Codegroup Identifier` to each codeblock you want to group together (has to be **unique** for each group)
+4. Add an optional `Codegroup Title` to each codeblock - its used as the tabname

assets/tinymce_codeinsert.gif

@@ -0,0 +1,20 @@
+Actions and Events
+======================================================
+
+EVENT::enlighter_init
+------------------------------------------------------
+
+**Description:** Triggered after Plugin initialization
+
+#### Example - fetch a list of active themes ####
+
+```php
+$themes = array();
+function do_after_ejs_init(){
+    $themes = Enlighter::getAvailableThemes();
+}
+
+// the Theme-List become available after the plugin is initialized!
+// prior calls will throw an internal error
+add_action('enlighter_init', 'do_after_ejs_init');
+```