Update README.md

README.md

@@ -8,7 +8,7 @@
 * [Usage](#usage)
 * [UI](#ui)
 * [Examples (demos)](#examples)
-* [Related projects](#relatedprojects)
+* [Related projects](#related-projects)
 * [Notes](#notes)
 * [License](#license)
 ***
@@ -16,15 +16,20 @@
 The project uses [grunt](https://gruntjs.com) for building.
 
 1. Clone git repository:
-`$ git clone https://github.com/CrazyPhD/CDTextEditor.git`
+
+	`$ git clone https://github.com/CrazyPhD/CDTextEditor`
 2. Install all dependencies using `npm`:
-`$ npm install`
+
+	`$ npm install`
 3. Build a project:
 	* Full build process: `$ grunt`
     * Skip lint: `$ grunt build`
 4. Place following strings before the closing `</head>` tag:
-`<script src="dist/cdtexteditor.min.js"></script>`
-`<link rel="stylesheet" href="dist/cdtexteditor.min.css">`
+
+	```HTML
+	<script src="dist/cdtexteditor.min.js"></script>
+	<link rel="stylesheet" href="dist/cdtexteditor.min.css">
+	```
 ***
 ## Usage
 ### Create single editor
@@ -32,32 +37,49 @@ The simplest way to create ***single*** editor on the web-page:
 
 1. Create a `<div>` element with specific id.
 2. Place following code before the closing `</body>` tag:
-`<script>let editor = new CDTextEditor(div_id).setup({"autoPreview": true}); // div_id - id of the selected div. .setup() method is not required.</script>`
+
+	```HTML
+    <script>
+    	let editor = new CDTextEditor(div_id).setup({"autoPreview": true}); 
+    	// div_id - id of the selected div; .setup() method is not required.
+    </script>
+    ```
+
 **Note:** *If you need multiple editors on the same page it is strongly recommended to use [CDTextEditor.create()](#cdtexteditorcreate) method!* 
 
 ### Editor customization
 Use `editor.setup({...})` method to set options for the selected editor. See [examples](#examples).
+
+
 #### readOnly
 Type: `Boolean`
+
 Default: `false`
+
 Make the selected editor read-only.
 
+
 #### fill
 Type: `String`
+
 Fill the selected editor with some text.
 
 #### autoPreview
 Type: `Boolean`
+
 Default: `false`
+
 Make the viewer show current contents of the editor.
 
 #### maxSize
 Type: `Object {w: Number, h: Number}`
+
 Set size limit for the selected editor.
 
 #### predictive
 Type: `String`
-This string is a link to the dictionary of phrases for [predictive text](#predictivetext).
+
+This string is a link to the dictionary of phrases for predictive text.
 
 #### spellchecking
 Type: `Object {url: String, loc: String[]}`
@@ -66,36 +88,44 @@ The `url` string is a link to the directory (it can be presented as link to exte
 
 *Example: option `spellchecking: {url: './dict/', loc: ['en_US', 'en_UK']}` will search files `en_US.dic`, `en_US.aff`, `en_UK.dic` and `en_UK.aff` within directory `./dict/`*
 
+**Note:** the options below require [jQuery](https://jquery.com) and [jQuery UI](https://jqueryui.com) libraries ([about](#jqueryjquery-ui))
 
-
-**Note:** the options below require [jQuery](https://jquery.com) and [jQuery UI](https://jqueryui.com) libraries ([about](#jqueryjqueryui))
-
-#### resizable
+#### resizable [! jQuery/jQuery UI](#jqueryjquery-ui)
 Type: `Boolean`
+
 Default: `false`
+
 Make editor resizable. To set editor size limit, see: [maxSize](#maxsize)
 
-#### draggable
+#### draggable [! jQuery/jQuery UI](#jqueryjquery-ui)
 Type: `Boolean`
+
 Default: `false`
+
 Make editor draggable.
 
-#### flex
+#### flex [! jQuery/jQuery UI](#jqueryjquery-ui)
 Type: `Boolean`
+
 Default: `false`
+
 Make the line between editor and viewer draggable (make viewer resizable).
 
 ### Create multiple editors on the same page
 #### CDTextEditor.create([...])
-This method allows you to create multiple editors on the same page, avoiding unnecessary downloads of dictionaries, jQuery/jQueryUI libraries, etc. (ex.: you need to create three editors with usage of `en_US` dictionary, in that case, usage of [editor.setup({...})](#createsingleeditor) may cause unnecessary loading of dictionary twice)
+This method allows you to create multiple editors on the same page, avoiding unnecessary downloads of dictionaries, [jQuery/jQueryUI](#jqueryjquery-ui) libraries, etc. (ex.: you need to create three editors with usage of `en_US` dictionary, in that case, usage of [editor.setup({...})](#createsingleeditor) may cause unnecessary loading of dictionary twice)
 
 It creates editors asynchronically one by one. To get access to `CDTextEditor` objects you should use global variable `CDTE_EDITORS[id]` where `id` is an unique id of the editor.
+
 **Note:** this method can also be used to create a single editor.
 ***
 ## UI
 Description of elements of UI.
+
 The whole CDTextEditor is presented as container with following elements: Header, Editor, Viewer, Footer.
+
 Minimum size of CDTextEditor container is `[w: 610px, h: 200px]`.
+
 ### Header
 Header contains following buttons:
 * `Load` - on click opens file selector dialog to choose what file should be loaded into the editor.
@@ -103,107 +133,117 @@ Header contains following buttons:
 * `Save as HTML` - on click saves current editor contents as HTML file.
 * `+/- Preview` - on click shows/hides viewer.
 * `Spellcheck` - on click opens menu to choose language for spell checking (from [loaded dictionaries](#spellchecking))
+
 In the right side of Header there is an `Autopreview` checkbox, which allows user to switch autopreview mode. 
 ### Editor
 Simply Editor is an advanced textarea, which takes whole space of the wrapping container by default.
+
 If Viewer is visible, Editor width depends on Viewer width.
 ### Viewer
 Viewer is an area which demonstrates formatted contents of Editor. It's hidden by default. 
+
 To show viewer either push menu button `+ Preview`, or check `Autopreview` checkbox.
+
 **Note:** when `autopreview` option is enabled, Viewer will be appearing whenever user type text in Editor.
+
 **Note:** by default Viewer width is half of wrapping container width. Set [flex](#flex) option to true to change change its width.
+
 If you want to hide Viewer make sure you disabled `autopreview` mode, then either push button `- Preview` or, if `flex` option is true, collapse it by dragging the line between Editor and Viewer.
 ### Footer
 Footer presented as status bar, which shows status of dictionaries loading.
 ***
 ## Examples
 * Page with single editor, using `<body>` as wrapper container. [[Live DEMO #1]](https://crazydoctor.ru/cdtexteditor/single.html)
-CSS: 
-```CSS
-html {
-	height: 100%;
-}
-
-body {
-	margin: 0;
-	padding: 0;
-	min-height: 100%;
-}
-```
-HTML:
-```HTML
-<body id="workbench">
-```
-JS:
-```JS
-let editor = new CDTextEditor("workbench").setup({
-	predictive: './dist/assets/dict/en_phrases.txt',
-	spellchecking: {
-		url: './dist/assets/dict/',
-		loc: ['en_US']
-    }
-});
-```
+
+	CSS: 
+	```CSS
+	html {
+		height: 100%;
+	}
+
+	body {
+		margin: 0;
+		padding: 0;
+		min-height: 100%;
+	}
+	```
+
+	HTML:
+	```HTML
+	<body id="workbench">
+	```
+
+	JS:
+	```JS
+	let editor = new CDTextEditor("workbench").setup({
+		predictive: './dist/assets/dict/en_phrases.txt',
+		spellchecking: {
+			url: './dist/assets/dict/',
+			loc: ['en_US']
+    	}
+	});
+	```
 
 * Page with multiple editors. [[Live DEMO #2]](https://crazydoctor.ru/cdtexteditor/multiple.html)
-HTML:
-```HTML
-<div id="workbench" style="width: 800px; height: 400px;"></div>
-<div id="workbench1" style="width: 100px; height: 100px;"></div>
-<div id="workbench2" style="width: 700px; height: 350px;"></div>
-```
-JS:
-```JS
-CDTextEditor.create([
-    {
-        id: "workbench",
-        options: {
-            predictive: "./dist/assets/dict/en_phrases.txt",
-            flex: true,
-            spellchecking: {
-                url: "./dict/",
-                loc: [
-                    "en_US"
-                ]
-            }
-        }
-    },
-   {
-        id: "workbench1",
-        options: {
-            autoPreview: true,
-            predictive: "./dist/assets/dict/en_phrases.txt",
-            resizable: true,
-            flex: true,
-            maxSize: {
-                w: 900, 
-                h: 500
-            },
-            spellchecking: {
-                url: "./dict/",
-                loc: [
-                    "en_US",
-                    "de_DE"
-                ]
-            }
-        }
-    },
-    {
-        id: "workbench2",
-        options: {
-            draggable: true,
-            spellchecking: {
-                url: "./dict/",
-                loc: [
-                    "de_DE"
-                ]
-            }
-        }
-    }
-]);
-```
+
+	HTML:
+	```HTML
+	<div id="workbench" style="width: 800px; height: 400px;"></div>
+	<div id="workbench1" style="width: 100px; height: 100px;"></div>
+	<div id="workbench2" style="width: 700px; height: 350px;"></div>
+	```
+
+	JS:
+	```JS
+	CDTextEditor.create([
+    	{
+        	id: "workbench",
+        	options: {
+            	predictive: "./dist/assets/dict/en_phrases.txt",
+            	flex: true,
+            	spellchecking: {
+                	url: "./dict/",
+                	loc: ["en_US"]
+            	}
+        	}
+    	},
+   		{
+        	id: "workbench1",
+        	options: {
+            	autoPreview: true,
+            	predictive: "./dist/assets/dict/en_phrases.txt",
+            	resizable: true,
+            	flex: true,
+            	maxSize: {
+                	w: 900, 
+                	h: 500
+            	},
+            	spellchecking: {
+                	url: "./dict/",
+                	loc: [
+                	    "en_US",
+                	    "de_DE"
+                	]
+            	}
+        	}
+    	},
+    	{
+        	id: "workbench2",
+        	options: {
+            	draggable: true,
+            	spellchecking: {
+                	url: "./dict/",
+                	loc: [
+                    	"de_DE"
+                	]
+            	}
+        	}
+    	}
+	]);
+	```
 ***
 ## Related projects
+
 I would like to thank all the people involved in the following projects for their contributions both to the Open Source and to my project in particular:
 * [CodeMirror](https://codemirror.net/) - a browser code editor library.
 * [showdownjs/showdown](https://github.com/showdownjs/showdown/) - a Markdown to HTML converter.
@@ -212,6 +252,7 @@ I would like to thank all the people involved in the following projects for thei
 * [wooorm/dictionaries](https://github.com/wooorm/dictionaries) - a huge collection of Hunspell-style dictionaries.
 * [jQuery](https://jquery.com/) - a JavaScript library designed to simplify HTML DOM tree traversal and manipulation, as well as event handling, CSS animation, and Ajax.
 * [jQueryUI](https://jqueryui.com/) - a set of user interface interactions, effects, widgets, and themes built on top of jQuery. 
+
 Thank you everybody!
 ***
 ## Notes
@@ -221,4 +262,4 @@ Inclusion of them would lead to a significant weighting of built project and to
 However, if you do not have them installed, CDTextEditor will do it for you with minimal investment of time and resources and only when necessary (if enabled any of following options: resizable, draggable, flex).
 
 ### License
-[MIT](https://github.com/CrazyPhD/CDTextEditor/blob/master/license) (c) Oleg Karataev
+[MIT](https://github.com/CrazyPhD/CDTextEditor/blob/master/license) (c) Oleg Karataev