diff --git a/Client/WebServer/css/prism.css b/Client/WebServer/css/prism.css
new file mode 100644
index 000000000..53766d7dd
--- /dev/null
+++ b/Client/WebServer/css/prism.css
@@ -0,0 +1,143 @@
+/* PrismJS 1.22.0
+https://prismjs.com/download.html#themes=prism&languages=markup+clike+javascript+json+json5+jsonp */
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+
+code[class*="language-"],
+pre[class*="language-"] {
+	color: black;
+	background: none;
+	text-shadow: 0 1px white;
+	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+	font-size: 1em;
+	text-align: left;
+	white-space: pre;
+	word-spacing: normal;
+	word-break: normal;
+	word-wrap: normal;
+	line-height: 1.5;
+
+	-moz-tab-size: 4;
+	-o-tab-size: 4;
+	tab-size: 4;
+
+	-webkit-hyphens: none;
+	-moz-hyphens: none;
+	-ms-hyphens: none;
+	hyphens: none;
+}
+
+pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
+	text-shadow: none;
+	background: #b3d4fc;
+}
+
+pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
+code[class*="language-"]::selection, code[class*="language-"] ::selection {
+	text-shadow: none;
+	background: #b3d4fc;
+}
+
+@media print {
+	code[class*="language-"],
+	pre[class*="language-"] {
+		text-shadow: none;
+	}
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+	padding: 1em;
+	margin: .5em 0;
+	overflow: auto;
+}
+
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+	background: #f5f2f0;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+	padding: .1em;
+	border-radius: .3em;
+	white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+	color: slategray;
+}
+
+.token.punctuation {
+	color: #999;
+}
+
+.token.namespace {
+	opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+	color: #905;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+	color: #690;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+	color: #9a6e3a;
+	/* This background color was intended by the author of this theme. */
+	background: hsla(0, 0%, 100%, .5);
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+	color: #07a;
+}
+
+.token.function,
+.token.class-name {
+	color: #DD4A68;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+	color: #e90;
+}
+
+.token.important,
+.token.bold {
+	font-weight: bold;
+}
+.token.italic {
+	font-style: italic;
+}
+
+.token.entity {
+	cursor: help;
+}
+
diff --git a/Client/WebServer/externalScripts/prism.js b/Client/WebServer/externalScripts/prism.js
new file mode 100644
index 000000000..3fcd3fb22
--- /dev/null
+++ b/Client/WebServer/externalScripts/prism.js
@@ -0,0 +1,1520 @@
+/* PrismJS 1.22.0
+https://prismjs.com/download.html#themes=prism&languages=markup+clike+javascript+json+json5+jsonp */
+/// <reference lib="WebWorker"/>
+
+var _self = (typeof window !== 'undefined')
+	? window   // if in browser
+	: (
+		(typeof WorkerGlobalScope !== 'undefined' && self instanceof WorkerGlobalScope)
+		? self // if in worker
+		: {}   // if in node js
+	);
+
+/**
+ * Prism: Lightweight, robust, elegant syntax highlighting
+ *
+ * @license MIT <https://opensource.org/licenses/MIT>
+ * @author Lea Verou <https://lea.verou.me>
+ * @namespace
+ * @public
+ */
+var Prism = (function (_self){
+
+// Private helper vars
+var lang = /\blang(?:uage)?-([\w-]+)\b/i;
+var uniqueId = 0;
+
+
+var _ = {
+	/**
+	 * By default, Prism will attempt to highlight all code elements (by calling {@link Prism.highlightAll}) on the
+	 * current page after the page finished loading. This might be a problem if e.g. you wanted to asynchronously load
+	 * additional languages or plugins yourself.
+	 *
+	 * By setting this value to `true`, Prism will not automatically highlight all code elements on the page.
+	 *
+	 * You obviously have to change this value before the automatic highlighting started. To do this, you can add an
+	 * empty Prism object into the global scope before loading the Prism script like this:
+	 *
+	 * ```js
+	 * window.Prism = window.Prism || {};
+	 * Prism.manual = true;
+	 * // add a new <script> to load Prism's script
+	 * ```
+	 *
+	 * @default false
+	 * @type {boolean}
+	 * @memberof Prism
+	 * @public
+	 */
+	manual: _self.Prism && _self.Prism.manual,
+	disableWorkerMessageHandler: _self.Prism && _self.Prism.disableWorkerMessageHandler,
+
+	/**
+	 * A namespace for utility methods.
+	 *
+	 * All function in this namespace that are not explicitly marked as _public_ are for __internal use only__ and may
+	 * change or disappear at any time.
+	 *
+	 * @namespace
+	 * @memberof Prism
+	 */
+	util: {
+		encode: function encode(tokens) {
+			if (tokens instanceof Token) {
+				return new Token(tokens.type, encode(tokens.content), tokens.alias);
+			} else if (Array.isArray(tokens)) {
+				return tokens.map(encode);
+			} else {
+				return tokens.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/\u00a0/g, ' ');
+			}
+		},
+
+		/**
+		 * Returns the name of the type of the given value.
+		 *
+		 * @param {any} o
+		 * @returns {string}
+		 * @example
+		 * type(null)      === 'Null'
+		 * type(undefined) === 'Undefined'
+		 * type(123)       === 'Number'
+		 * type('foo')     === 'String'
+		 * type(true)      === 'Boolean'
+		 * type([1, 2])    === 'Array'
+		 * type({})        === 'Object'
+		 * type(String)    === 'Function'
+		 * type(/abc+/)    === 'RegExp'
+		 */
+		type: function (o) {
+			return Object.prototype.toString.call(o).slice(8, -1);
+		},
+
+		/**
+		 * Returns a unique number for the given object. Later calls will still return the same number.
+		 *
+		 * @param {Object} obj
+		 * @returns {number}
+		 */
+		objId: function (obj) {
+			if (!obj['__id']) {
+				Object.defineProperty(obj, '__id', { value: ++uniqueId });
+			}
+			return obj['__id'];
+		},
+
+		/**
+		 * Creates a deep clone of the given object.
+		 *
+		 * The main intended use of this function is to clone language definitions.
+		 *
+		 * @param {T} o
+		 * @param {Record<number, any>} [visited]
+		 * @returns {T}
+		 * @template T
+		 */
+		clone: function deepClone(o, visited) {
+			visited = visited || {};
+
+			var clone, id;
+			switch (_.util.type(o)) {
+				case 'Object':
+					id = _.util.objId(o);
+					if (visited[id]) {
+						return visited[id];
+					}
+					clone = /** @type {Record<string, any>} */ ({});
+					visited[id] = clone;
+
+					for (var key in o) {
+						if (o.hasOwnProperty(key)) {
+							clone[key] = deepClone(o[key], visited);
+						}
+					}
+
+					return /** @type {any} */ (clone);
+
+				case 'Array':
+					id = _.util.objId(o);
+					if (visited[id]) {
+						return visited[id];
+					}
+					clone = [];
+					visited[id] = clone;
+
+					(/** @type {Array} */(/** @type {any} */(o))).forEach(function (v, i) {
+						clone[i] = deepClone(v, visited);
+					});
+
+					return /** @type {any} */ (clone);
+
+				default:
+					return o;
+			}
+		},
+
+		/**
+		 * Returns the Prism language of the given element set by a `language-xxxx` or `lang-xxxx` class.
+		 *
+		 * If no language is set for the element or the element is `null` or `undefined`, `none` will be returned.
+		 *
+		 * @param {Element} element
+		 * @returns {string}
+		 */
+		getLanguage: function (element) {
+			while (element && !lang.test(element.className)) {
+				element = element.parentElement;
+			}
+			if (element) {
+				return (element.className.match(lang) || [, 'none'])[1].toLowerCase();
+			}
+			return 'none';
+		},
+
+		/**
+		 * Returns the script element that is currently executing.
+		 *
+		 * This does __not__ work for line script element.
+		 *
+		 * @returns {HTMLScriptElement | null}
+		 */
+		currentScript: function () {
+			if (typeof document === 'undefined') {
+				return null;
+			}
+			if ('currentScript' in document && 1 < 2 /* hack to trip TS' flow analysis */) {
+				return /** @type {any} */ (document.currentScript);
+			}
+
+			// IE11 workaround
+			// we'll get the src of the current script by parsing IE11's error stack trace
+			// this will not work for inline scripts
+
+			try {
+				throw new Error();
+			} catch (err) {
+				// Get file src url from stack. Specifically works with the format of stack traces in IE.
+				// A stack will look like this:
+				//
+				// Error
+				//    at _.util.currentScript (http://localhost/components/prism-core.js:119:5)
+				//    at Global code (http://localhost/components/prism-core.js:606:1)
+
+				var src = (/at [^(\r\n]*\((.*):.+:.+\)$/i.exec(err.stack) || [])[1];
+				if (src) {
+					var scripts = document.getElementsByTagName('script');
+					for (var i in scripts) {
+						if (scripts[i].src == src) {
+							return scripts[i];
+						}
+					}
+				}
+				return null;
+			}
+		},
+
+		/**
+		 * Returns whether a given class is active for `element`.
+		 *
+		 * The class can be activated if `element` or one of its ancestors has the given class and it can be deactivated
+		 * if `element` or one of its ancestors has the negated version of the given class. The _negated version_ of the
+		 * given class is just the given class with a `no-` prefix.
+		 *
+		 * Whether the class is active is determined by the closest ancestor of `element` (where `element` itself is
+		 * closest ancestor) that has the given class or the negated version of it. If neither `element` nor any of its
+		 * ancestors have the given class or the negated version of it, then the default activation will be returned.
+		 *
+		 * In the paradoxical situation where the closest ancestor contains __both__ the given class and the negated
+		 * version of it, the class is considered active.
+		 *
+		 * @param {Element} element
+		 * @param {string} className
+		 * @param {boolean} [defaultActivation=false]
+		 * @returns {boolean}
+		 */
+		isActive: function (element, className, defaultActivation) {
+			var no = 'no-' + className;
+
+			while (element) {
+				var classList = element.classList;
+				if (classList.contains(className)) {
+					return true;
+				}
+				if (classList.contains(no)) {
+					return false;
+				}
+				element = element.parentElement;
+			}
+			return !!defaultActivation;
+		}
+	},
+
+	/**
+	 * This namespace contains all currently loaded languages and the some helper functions to create and modify languages.
+	 *
+	 * @namespace
+	 * @memberof Prism
+	 * @public
+	 */
+	languages: {
+		/**
+		 * Creates a deep copy of the language with the given id and appends the given tokens.
+		 *
+		 * If a token in `redef` also appears in the copied language, then the existing token in the copied language
+		 * will be overwritten at its original position.
+		 *
+		 * ## Best practices
+		 *
+		 * Since the position of overwriting tokens (token in `redef` that overwrite tokens in the copied language)
+		 * doesn't matter, they can technically be in any order. However, this can be confusing to others that trying to
+		 * understand the language definition because, normally, the order of tokens matters in Prism grammars.
+		 *
+		 * Therefore, it is encouraged to order overwriting tokens according to the positions of the overwritten tokens.
+		 * Furthermore, all non-overwriting tokens should be placed after the overwriting ones.
+		 *
+		 * @param {string} id The id of the language to extend. This has to be a key in `Prism.languages`.
+		 * @param {Grammar} redef The new tokens to append.
+		 * @returns {Grammar} The new language created.
+		 * @public
+		 * @example
+		 * Prism.languages['css-with-colors'] = Prism.languages.extend('css', {
+		 *     // Prism.languages.css already has a 'comment' token, so this token will overwrite CSS' 'comment' token
+		 *     // at its original position
+		 *     'comment': { ... },
+		 *     // CSS doesn't have a 'color' token, so this token will be appended
+		 *     'color': /\b(?:red|green|blue)\b/
+		 * });
+		 */
+		extend: function (id, redef) {
+			var lang = _.util.clone(_.languages[id]);
+
+			for (var key in redef) {
+				lang[key] = redef[key];
+			}
+
+			return lang;
+		},
+
+		/**
+		 * Inserts tokens _before_ another token in a language definition or any other grammar.
+		 *
+		 * ## Usage
+		 *
+		 * This helper method makes it easy to modify existing languages. For example, the CSS language definition
+		 * not only defines CSS highlighting for CSS documents, but also needs to define highlighting for CSS embedded
+		 * in HTML through `<style>` elements. To do this, it needs to modify `Prism.languages.markup` and add the
+		 * appropriate tokens. However, `Prism.languages.markup` is a regular JavaScript object literal, so if you do
+		 * this:
+		 *
+		 * ```js
+		 * Prism.languages.markup.style = {
+		 *     // token
+		 * };
+		 * ```
+		 *
+		 * then the `style` token will be added (and processed) at the end. `insertBefore` allows you to insert tokens
+		 * before existing tokens. For the CSS example above, you would use it like this:
+		 *
+		 * ```js
+		 * Prism.languages.insertBefore('markup', 'cdata', {
+		 *     'style': {
+		 *         // token
+		 *     }
+		 * });
+		 * ```
+		 *
+		 * ## Special cases
+		 *
+		 * If the grammars of `inside` and `insert` have tokens with the same name, the tokens in `inside`'s grammar
+		 * will be ignored.
+		 *
+		 * This behavior can be used to insert tokens after `before`:
+		 *
+		 * ```js
+		 * Prism.languages.insertBefore('markup', 'comment', {
+		 *     'comment': Prism.languages.markup.comment,
+		 *     // tokens after 'comment'
+		 * });
+		 * ```
+		 *
+		 * ## Limitations
+		 *
+		 * The main problem `insertBefore` has to solve is iteration order. Since ES2015, the iteration order for object
+		 * properties is guaranteed to be the insertion order (except for integer keys) but some browsers behave
+		 * differently when keys are deleted and re-inserted. So `insertBefore` can't be implemented by temporarily
+		 * deleting properties which is necessary to insert at arbitrary positions.
+		 *
+		 * To solve this problem, `insertBefore` doesn't actually insert the given tokens into the target object.
+		 * Instead, it will create a new object and replace all references to the target object with the new one. This
+		 * can be done without temporarily deleting properties, so the iteration order is well-defined.
+		 *
+		 * However, only references that can be reached from `Prism.languages` or `insert` will be replaced. I.e. if
+		 * you hold the target object in a variable, then the value of the variable will not change.
+		 *
+		 * ```js
+		 * var oldMarkup = Prism.languages.markup;
+		 * var newMarkup = Prism.languages.insertBefore('markup', 'comment', { ... });
+		 *
+		 * assert(oldMarkup !== Prism.languages.markup);
+		 * assert(newMarkup === Prism.languages.markup);
+		 * ```
+		 *
+		 * @param {string} inside The property of `root` (e.g. a language id in `Prism.languages`) that contains the
+		 * object to be modified.
+		 * @param {string} before The key to insert before.
+		 * @param {Grammar} insert An object containing the key-value pairs to be inserted.
+		 * @param {Object<string, any>} [root] The object containing `inside`, i.e. the object that contains the
+		 * object to be modified.
+		 *
+		 * Defaults to `Prism.languages`.
+		 * @returns {Grammar} The new grammar object.
+		 * @public
+		 */
+		insertBefore: function (inside, before, insert, root) {
+			root = root || /** @type {any} */ (_.languages);
+			var grammar = root[inside];
+			/** @type {Grammar} */
+			var ret = {};
+
+			for (var token in grammar) {
+				if (grammar.hasOwnProperty(token)) {
+
+					if (token == before) {
+						for (var newToken in insert) {
+							if (insert.hasOwnProperty(newToken)) {
+								ret[newToken] = insert[newToken];
+							}
+						}
+					}
+
+					// Do not insert token which also occur in insert. See #1525
+					if (!insert.hasOwnProperty(token)) {
+						ret[token] = grammar[token];
+					}
+				}
+			}
+
+			var old = root[inside];
+			root[inside] = ret;
+
+			// Update references in other language definitions
+			_.languages.DFS(_.languages, function(key, value) {
+				if (value === old && key != inside) {
+					this[key] = ret;
+				}
+			});
+
+			return ret;
+		},
+
+		// Traverse a language definition with Depth First Search
+		DFS: function DFS(o, callback, type, visited) {
+			visited = visited || {};
+
+			var objId = _.util.objId;
+
+			for (var i in o) {
+				if (o.hasOwnProperty(i)) {
+					callback.call(o, i, o[i], type || i);
+
+					var property = o[i],
+					    propertyType = _.util.type(property);
+
+					if (propertyType === 'Object' && !visited[objId(property)]) {
+						visited[objId(property)] = true;
+						DFS(property, callback, null, visited);
+					}
+					else if (propertyType === 'Array' && !visited[objId(property)]) {
+						visited[objId(property)] = true;
+						DFS(property, callback, i, visited);
+					}
+				}
+			}
+		}
+	},
+
+	plugins: {},
+
+	/**
+	 * This is the most high-level function in Prism’s API.
+	 * It fetches all the elements that have a `.language-xxxx` class and then calls {@link Prism.highlightElement} on
+	 * each one of them.
+	 *
+	 * This is equivalent to `Prism.highlightAllUnder(document, async, callback)`.
+	 *
+	 * @param {boolean} [async=false] Same as in {@link Prism.highlightAllUnder}.
+	 * @param {HighlightCallback} [callback] Same as in {@link Prism.highlightAllUnder}.
+	 * @memberof Prism
+	 * @public
+	 */
+	highlightAll: function(async, callback) {
+		_.highlightAllUnder(document, async, callback);
+	},
+
+	/**
+	 * Fetches all the descendants of `container` that have a `.language-xxxx` class and then calls
+	 * {@link Prism.highlightElement} on each one of them.
+	 *
+	 * The following hooks will be run:
+	 * 1. `before-highlightall`
+	 * 2. `before-all-elements-highlight`
+	 * 3. All hooks of {@link Prism.highlightElement} for each element.
+	 *
+	 * @param {ParentNode} container The root element, whose descendants that have a `.language-xxxx` class will be highlighted.
+	 * @param {boolean} [async=false] Whether each element is to be highlighted asynchronously using Web Workers.
+	 * @param {HighlightCallback} [callback] An optional callback to be invoked on each element after its highlighting is done.
+	 * @memberof Prism
+	 * @public
+	 */
+	highlightAllUnder: function(container, async, callback) {
+		var env = {
+			callback: callback,
+			container: container,
+			selector: 'code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code'
+		};
+
+		_.hooks.run('before-highlightall', env);
+
+		env.elements = Array.prototype.slice.apply(env.container.querySelectorAll(env.selector));
+
+		_.hooks.run('before-all-elements-highlight', env);
+
+		for (var i = 0, element; element = env.elements[i++];) {
+			_.highlightElement(element, async === true, env.callback);
+		}
+	},
+
+	/**
+	 * Highlights the code inside a single element.
+	 *
+	 * The following hooks will be run:
+	 * 1. `before-sanity-check`
+	 * 2. `before-highlight`
+	 * 3. All hooks of {@link Prism.highlight}. These hooks will be run by an asynchronous worker if `async` is `true`.
+	 * 4. `before-insert`
+	 * 5. `after-highlight`
+	 * 6. `complete`
+	 *
+	 * Some the above hooks will be skipped if the element doesn't contain any text or there is no grammar loaded for
+	 * the element's language.
+	 *
+	 * @param {Element} element The element containing the code.
+	 * It must have a class of `language-xxxx` to be processed, where `xxxx` is a valid language identifier.
+	 * @param {boolean} [async=false] Whether the element is to be highlighted asynchronously using Web Workers
+	 * to improve performance and avoid blocking the UI when highlighting very large chunks of code. This option is
+	 * [disabled by default](https://prismjs.com/faq.html#why-is-asynchronous-highlighting-disabled-by-default).
+	 *
+	 * Note: All language definitions required to highlight the code must be included in the main `prism.js` file for
+	 * asynchronous highlighting to work. You can build your own bundle on the
+	 * [Download page](https://prismjs.com/download.html).
+	 * @param {HighlightCallback} [callback] An optional callback to be invoked after the highlighting is done.
+	 * Mostly useful when `async` is `true`, since in that case, the highlighting is done asynchronously.
+	 * @memberof Prism
+	 * @public
+	 */
+	highlightElement: function(element, async, callback) {
+		// Find language
+		var language = _.util.getLanguage(element);
+		var grammar = _.languages[language];
+
+		// Set language on the element, if not present
+		element.className = element.className.replace(lang, '').replace(/\s+/g, ' ') + ' language-' + language;
+
+		// Set language on the parent, for styling
+		var parent = element.parentElement;
+		if (parent && parent.nodeName.toLowerCase() === 'pre') {
+			parent.className = parent.className.replace(lang, '').replace(/\s+/g, ' ') + ' language-' + language;
+		}
+
+		var code = element.textContent;
+
+		var env = {
+			element: element,
+			language: language,
+			grammar: grammar,
+			code: code
+		};
+
+		function insertHighlightedCode(highlightedCode) {
+			env.highlightedCode = highlightedCode;
+
+			_.hooks.run('before-insert', env);
+
+			env.element.innerHTML = env.highlightedCode;
+
+			_.hooks.run('after-highlight', env);
+			_.hooks.run('complete', env);
+			callback && callback.call(env.element);
+		}
+
+		_.hooks.run('before-sanity-check', env);
+
+		if (!env.code) {
+			_.hooks.run('complete', env);
+			callback && callback.call(env.element);
+			return;
+		}
+
+		_.hooks.run('before-highlight', env);
+
+		if (!env.grammar) {
+			insertHighlightedCode(_.util.encode(env.code));
+			return;
+		}
+
+		if (async && _self.Worker) {
+			var worker = new Worker(_.filename);
+
+			worker.onmessage = function(evt) {
+				insertHighlightedCode(evt.data);
+			};
+
+			worker.postMessage(JSON.stringify({
+				language: env.language,
+				code: env.code,
+				immediateClose: true
+			}));
+		}
+		else {
+			insertHighlightedCode(_.highlight(env.code, env.grammar, env.language));
+		}
+	},
+
+	/**
+	 * Low-level function, only use if you know what you’re doing. It accepts a string of text as input
+	 * and the language definitions to use, and returns a string with the HTML produced.
+	 *
+	 * The following hooks will be run:
+	 * 1. `before-tokenize`
+	 * 2. `after-tokenize`
+	 * 3. `wrap`: On each {@link Token}.
+	 *
+	 * @param {string} text A string with the code to be highlighted.
+	 * @param {Grammar} grammar An object containing the tokens to use.
+	 *
+	 * Usually a language definition like `Prism.languages.markup`.
+	 * @param {string} language The name of the language definition passed to `grammar`.
+	 * @returns {string} The highlighted HTML.
+	 * @memberof Prism
+	 * @public
+	 * @example
+	 * Prism.highlight('var foo = true;', Prism.languages.javascript, 'javascript');
+	 */
+	highlight: function (text, grammar, language) {
+		var env = {
+			code: text,
+			grammar: grammar,
+			language: language
+		};
+		_.hooks.run('before-tokenize', env);
+		env.tokens = _.tokenize(env.code, env.grammar);
+		_.hooks.run('after-tokenize', env);
+		return Token.stringify(_.util.encode(env.tokens), env.language);
+	},
+
+	/**
+	 * This is the heart of Prism, and the most low-level function you can use. It accepts a string of text as input
+	 * and the language definitions to use, and returns an array with the tokenized code.
+	 *
+	 * When the language definition includes nested tokens, the function is called recursively on each of these tokens.
+	 *
+	 * This method could be useful in other contexts as well, as a very crude parser.
+	 *
+	 * @param {string} text A string with the code to be highlighted.
+	 * @param {Grammar} grammar An object containing the tokens to use.
+	 *
+	 * Usually a language definition like `Prism.languages.markup`.
+	 * @returns {TokenStream} An array of strings and tokens, a token stream.
+	 * @memberof Prism
+	 * @public
+	 * @example
+	 * let code = `var foo = 0;`;
+	 * let tokens = Prism.tokenize(code, Prism.languages.javascript);
+	 * tokens.forEach(token => {
+	 *     if (token instanceof Prism.Token && token.type === 'number') {
+	 *         console.log(`Found numeric literal: ${token.content}`);
+	 *     }
+	 * });
+	 */
+	tokenize: function(text, grammar) {
+		var rest = grammar.rest;
+		if (rest) {
+			for (var token in rest) {
+				grammar[token] = rest[token];
+			}
+
+			delete grammar.rest;
+		}
+
+		var tokenList = new LinkedList();
+		addAfter(tokenList, tokenList.head, text);
+
+		matchGrammar(text, tokenList, grammar, tokenList.head, 0);
+
+		return toArray(tokenList);
+	},
+
+	/**
+	 * @namespace
+	 * @memberof Prism
+	 * @public
+	 */
+	hooks: {
+		all: {},
+
+		/**
+		 * Adds the given callback to the list of callbacks for the given hook.
+		 *
+		 * The callback will be invoked when the hook it is registered for is run.
+		 * Hooks are usually directly run by a highlight function but you can also run hooks yourself.
+		 *
+		 * One callback function can be registered to multiple hooks and the same hook multiple times.
+		 *
+		 * @param {string} name The name of the hook.
+		 * @param {HookCallback} callback The callback function which is given environment variables.
+		 * @public
+		 */
+		add: function (name, callback) {
+			var hooks = _.hooks.all;
+
+			hooks[name] = hooks[name] || [];
+
+			hooks[name].push(callback);
+		},
+
+		/**
+		 * Runs a hook invoking all registered callbacks with the given environment variables.
+		 *
+		 * Callbacks will be invoked synchronously and in the order in which they were registered.
+		 *
+		 * @param {string} name The name of the hook.
+		 * @param {Object<string, any>} env The environment variables of the hook passed to all callbacks registered.
+		 * @public
+		 */
+		run: function (name, env) {
+			var callbacks = _.hooks.all[name];
+
+			if (!callbacks || !callbacks.length) {
+				return;
+			}
+
+			for (var i=0, callback; callback = callbacks[i++];) {
+				callback(env);
+			}
+		}
+	},
+
+	Token: Token
+};
+_self.Prism = _;
+
+
+// Typescript note:
+// The following can be used to import the Token type in JSDoc:
+//
+//   @typedef {InstanceType<import("./prism-core")["Token"]>} Token
+
+/**
+ * Creates a new token.
+ *
+ * @param {string} type See {@link Token#type type}
+ * @param {string | TokenStream} content See {@link Token#content content}
+ * @param {string|string[]} [alias] The alias(es) of the token.
+ * @param {string} [matchedStr=""] A copy of the full string this token was created from.
+ * @class
+ * @global
+ * @public
+ */
+function Token(type, content, alias, matchedStr) {
+	/**
+	 * The type of the token.
+	 *
+	 * This is usually the key of a pattern in a {@link Grammar}.
+	 *
+	 * @type {string}
+	 * @see GrammarToken
+	 * @public
+	 */
+	this.type = type;
+	/**
+	 * The strings or tokens contained by this token.
+	 *
+	 * This will be a token stream if the pattern matched also defined an `inside` grammar.
+	 *
+	 * @type {string | TokenStream}
+	 * @public
+	 */
+	this.content = content;
+	/**
+	 * The alias(es) of the token.
+	 *
+	 * @type {string|string[]}
+	 * @see GrammarToken
+	 * @public
+	 */
+	this.alias = alias;
+	// Copy of the full string this token was created from
+	this.length = (matchedStr || '').length | 0;
+}
+
+/**
+ * A token stream is an array of strings and {@link Token Token} objects.
+ *
+ * Token streams have to fulfill a few properties that are assumed by most functions (mostly internal ones) that process
+ * them.
+ *
+ * 1. No adjacent strings.
+ * 2. No empty strings.
+ *
+ *    The only exception here is the token stream that only contains the empty string and nothing else.
+ *
+ * @typedef {Array<string | Token>} TokenStream
+ * @global
+ * @public
+ */
+
+/**
+ * Converts the given token or token stream to an HTML representation.
+ *
+ * The following hooks will be run:
+ * 1. `wrap`: On each {@link Token}.
+ *
+ * @param {string | Token | TokenStream} o The token or token stream to be converted.
+ * @param {string} language The name of current language.
+ * @returns {string} The HTML representation of the token or token stream.
+ * @memberof Token
+ * @static
+ */
+Token.stringify = function stringify(o, language) {
+	if (typeof o == 'string') {
+		return o;
+	}
+	if (Array.isArray(o)) {
+		var s = '';
+		o.forEach(function (e) {
+			s += stringify(e, language);
+		});
+		return s;
+	}
+
+	var env = {
+		type: o.type,
+		content: stringify(o.content, language),
+		tag: 'span',
+		classes: ['token', o.type],
+		attributes: {},
+		language: language
+	};
+
+	var aliases = o.alias;
+	if (aliases) {
+		if (Array.isArray(aliases)) {
+			Array.prototype.push.apply(env.classes, aliases);
+		} else {
+			env.classes.push(aliases);
+		}
+	}
+
+	_.hooks.run('wrap', env);
+
+	var attributes = '';
+	for (var name in env.attributes) {
+		attributes += ' ' + name + '="' + (env.attributes[name] || '').replace(/"/g, '&quot;') + '"';
+	}
+
+	return '<' + env.tag + ' class="' + env.classes.join(' ') + '"' + attributes + '>' + env.content + '</' + env.tag + '>';
+};
+
+/**
+ * @param {RegExp} pattern
+ * @param {number} pos
+ * @param {string} text
+ * @param {boolean} lookbehind
+ * @returns {RegExpExecArray | null}
+ */
+function matchPattern(pattern, pos, text, lookbehind) {
+	pattern.lastIndex = pos;
+	var match = pattern.exec(text);
+	if (match && lookbehind && match[1]) {
+		// change the match to remove the text matched by the Prism lookbehind group
+		var lookbehindLength = match[1].length;
+		match.index += lookbehindLength;
+		match[0] = match[0].slice(lookbehindLength);
+	}
+	return match;
+}
+
+/**
+ * @param {string} text
+ * @param {LinkedList<string | Token>} tokenList
+ * @param {any} grammar
+ * @param {LinkedListNode<string | Token>} startNode
+ * @param {number} startPos
+ * @param {RematchOptions} [rematch]
+ * @returns {void}
+ * @private
+ *
+ * @typedef RematchOptions
+ * @property {string} cause
+ * @property {number} reach
+ */
+function matchGrammar(text, tokenList, grammar, startNode, startPos, rematch) {
+	for (var token in grammar) {
+		if (!grammar.hasOwnProperty(token) || !grammar[token]) {
+			continue;
+		}
+
+		var patterns = grammar[token];
+		patterns = Array.isArray(patterns) ? patterns : [patterns];
+
+		for (var j = 0; j < patterns.length; ++j) {
+			if (rematch && rematch.cause == token + ',' + j) {
+				return;
+			}
+
+			var patternObj = patterns[j],
+				inside = patternObj.inside,
+				lookbehind = !!patternObj.lookbehind,
+				greedy = !!patternObj.greedy,
+				alias = patternObj.alias;
+
+			if (greedy && !patternObj.pattern.global) {
+				// Without the global flag, lastIndex won't work
+				var flags = patternObj.pattern.toString().match(/[imsuy]*$/)[0];
+				patternObj.pattern = RegExp(patternObj.pattern.source, flags + 'g');
+			}
+
+			/** @type {RegExp} */
+			var pattern = patternObj.pattern || patternObj;
+
+			for ( // iterate the token list and keep track of the current token/string position
+				var currentNode = startNode.next, pos = startPos;
+				currentNode !== tokenList.tail;
+				pos += currentNode.value.length, currentNode = currentNode.next
+			) {
+
+				if (rematch && pos >= rematch.reach) {
+					break;
+				}
+
+				var str = currentNode.value;
+
+				if (tokenList.length > text.length) {
+					// Something went terribly wrong, ABORT, ABORT!
+					return;
+				}
+
+				if (str instanceof Token) {
+					continue;
+				}
+
+				var removeCount = 1; // this is the to parameter of removeBetween
+				var match;
+
+				if (greedy) {
+					match = matchPattern(pattern, pos, text, lookbehind);
+					if (!match) {
+						break;
+					}
+
+					var from = match.index;
+					var to = match.index + match[0].length;
+					var p = pos;
+
+					// find the node that contains the match
+					p += currentNode.value.length;
+					while (from >= p) {
+						currentNode = currentNode.next;
+						p += currentNode.value.length;
+					}
+					// adjust pos (and p)
+					p -= currentNode.value.length;
+					pos = p;
+
+					// the current node is a Token, then the match starts inside another Token, which is invalid
+					if (currentNode.value instanceof Token) {
+						continue;
+					}
+
+					// find the last node which is affected by this match
+					for (
+						var k = currentNode;
+						k !== tokenList.tail && (p < to || typeof k.value === 'string');
+						k = k.next
+					) {
+						removeCount++;
+						p += k.value.length;
+					}
+					removeCount--;
+
+					// replace with the new match
+					str = text.slice(pos, p);
+					match.index -= pos;
+				} else {
+					match = matchPattern(pattern, 0, str, lookbehind);
+					if (!match) {
+						continue;
+					}
+				}
+
+				var from = match.index,
+					matchStr = match[0],
+					before = str.slice(0, from),
+					after = str.slice(from + matchStr.length);
+
+				var reach = pos + str.length;
+				if (rematch && reach > rematch.reach) {
+					rematch.reach = reach;
+				}
+
+				var removeFrom = currentNode.prev;
+
+				if (before) {
+					removeFrom = addAfter(tokenList, removeFrom, before);
+					pos += before.length;
+				}
+
+				removeRange(tokenList, removeFrom, removeCount);
+
+				var wrapped = new Token(token, inside ? _.tokenize(matchStr, inside) : matchStr, alias, matchStr);
+				currentNode = addAfter(tokenList, removeFrom, wrapped);
+
+				if (after) {
+					addAfter(tokenList, currentNode, after);
+				}
+
+				if (removeCount > 1) {
+					// at least one Token object was removed, so we have to do some rematching
+					// this can only happen if the current pattern is greedy
+					matchGrammar(text, tokenList, grammar, currentNode.prev, pos, {
+						cause: token + ',' + j,
+						reach: reach
+					});
+				}
+			}
+		}
+	}
+}
+
+/**
+ * @typedef LinkedListNode
+ * @property {T} value
+ * @property {LinkedListNode<T> | null} prev The previous node.
+ * @property {LinkedListNode<T> | null} next The next node.
+ * @template T
+ * @private
+ */
+
+/**
+ * @template T
+ * @private
+ */
+function LinkedList() {
+	/** @type {LinkedListNode<T>} */
+	var head = { value: null, prev: null, next: null };
+	/** @type {LinkedListNode<T>} */
+	var tail = { value: null, prev: head, next: null };
+	head.next = tail;
+
+	/** @type {LinkedListNode<T>} */
+	this.head = head;
+	/** @type {LinkedListNode<T>} */
+	this.tail = tail;
+	this.length = 0;
+}
+
+/**
+ * Adds a new node with the given value to the list.
+ * @param {LinkedList<T>} list
+ * @param {LinkedListNode<T>} node
+ * @param {T} value
+ * @returns {LinkedListNode<T>} The added node.
+ * @template T
+ */
+function addAfter(list, node, value) {
+	// assumes that node != list.tail && values.length >= 0
+	var next = node.next;
+
+	var newNode = { value: value, prev: node, next: next };
+	node.next = newNode;
+	next.prev = newNode;
+	list.length++;
+
+	return newNode;
+}
+/**
+ * Removes `count` nodes after the given node. The given node will not be removed.
+ * @param {LinkedList<T>} list
+ * @param {LinkedListNode<T>} node
+ * @param {number} count
+ * @template T
+ */
+function removeRange(list, node, count) {
+	var next = node.next;
+	for (var i = 0; i < count && next !== list.tail; i++) {
+		next = next.next;
+	}
+	node.next = next;
+	next.prev = node;
+	list.length -= i;
+}
+/**
+ * @param {LinkedList<T>} list
+ * @returns {T[]}
+ * @template T
+ */
+function toArray(list) {
+	var array = [];
+	var node = list.head.next;
+	while (node !== list.tail) {
+		array.push(node.value);
+		node = node.next;
+	}
+	return array;
+}
+
+
+if (!_self.document) {
+	if (!_self.addEventListener) {
+		// in Node.js
+		return _;
+	}
+
+	if (!_.disableWorkerMessageHandler) {
+		// In worker
+		_self.addEventListener('message', function (evt) {
+			var message = JSON.parse(evt.data),
+				lang = message.language,
+				code = message.code,
+				immediateClose = message.immediateClose;
+
+			_self.postMessage(_.highlight(code, _.languages[lang], lang));
+			if (immediateClose) {
+				_self.close();
+			}
+		}, false);
+	}
+
+	return _;
+}
+
+// Get current script and highlight
+var script = _.util.currentScript();
+
+if (script) {
+	_.filename = script.src;
+
+	if (script.hasAttribute('data-manual')) {
+		_.manual = true;
+	}
+}
+
+function highlightAutomaticallyCallback() {
+	if (!_.manual) {
+		_.highlightAll();
+	}
+}
+
+if (!_.manual) {
+	// If the document state is "loading", then we'll use DOMContentLoaded.
+	// If the document state is "interactive" and the prism.js script is deferred, then we'll also use the
+	// DOMContentLoaded event because there might be some plugins or languages which have also been deferred and they
+	// might take longer one animation frame to execute which can create a race condition where only some plugins have
+	// been loaded when Prism.highlightAll() is executed, depending on how fast resources are loaded.
+	// See https://github.com/PrismJS/prism/issues/2102
+	var readyState = document.readyState;
+	if (readyState === 'loading' || readyState === 'interactive' && script && script.defer) {
+		document.addEventListener('DOMContentLoaded', highlightAutomaticallyCallback);
+	} else {
+		if (window.requestAnimationFrame) {
+			window.requestAnimationFrame(highlightAutomaticallyCallback);
+		} else {
+			window.setTimeout(highlightAutomaticallyCallback, 16);
+		}
+	}
+}
+
+return _;
+
+})(_self);
+
+if (typeof module !== 'undefined' && module.exports) {
+	module.exports = Prism;
+}
+
+// hack for components to work correctly in node.js
+if (typeof global !== 'undefined') {
+	global.Prism = Prism;
+}
+
+// some additional documentation/types
+
+/**
+ * The expansion of a simple `RegExp` literal to support additional properties.
+ *
+ * @typedef GrammarToken
+ * @property {RegExp} pattern The regular expression of the token.
+ * @property {boolean} [lookbehind=false] If `true`, then the first capturing group of `pattern` will (effectively)
+ * behave as a lookbehind group meaning that the captured text will not be part of the matched text of the new token.
+ * @property {boolean} [greedy=false] Whether the token is greedy.
+ * @property {string|string[]} [alias] An optional alias or list of aliases.
+ * @property {Grammar} [inside] The nested grammar of this token.
+ *
+ * The `inside` grammar will be used to tokenize the text value of each token of this kind.
+ *
+ * This can be used to make nested and even recursive language definitions.
+ *
+ * Note: This can cause infinite recursion. Be careful when you embed different languages or even the same language into
+ * each another.
+ * @global
+ * @public
+*/
+
+/**
+ * @typedef Grammar
+ * @type {Object<string, RegExp | GrammarToken | Array<RegExp | GrammarToken>>}
+ * @property {Grammar} [rest] An optional grammar object that will be appended to this grammar.
+ * @global
+ * @public
+ */
+
+/**
+ * A function which will invoked after an element was successfully highlighted.
+ *
+ * @callback HighlightCallback
+ * @param {Element} element The element successfully highlighted.
+ * @returns {void}
+ * @global
+ * @public
+*/
+
+/**
+ * @callback HookCallback
+ * @param {Object<string, any>} env The environment variables of the hook.
+ * @returns {void}
+ * @global
+ * @public
+ */
+;
+Prism.languages.markup = {
+	'comment': /<!--[\s\S]*?-->/,
+	'prolog': /<\?[\s\S]+?\?>/,
+	'doctype': {
+		// https://www.w3.org/TR/xml/#NT-doctypedecl
+		pattern: /<!DOCTYPE(?:[^>"'[\]]|"[^"]*"|'[^']*')+(?:\[(?:[^<"'\]]|"[^"]*"|'[^']*'|<(?!!--)|<!--(?:[^-]|-(?!->))*-->)*\]\s*)?>/i,
+		greedy: true,
+		inside: {
+			'internal-subset': {
+				pattern: /(\[)[\s\S]+(?=\]>$)/,
+				lookbehind: true,
+				greedy: true,
+				inside: null // see below
+			},
+			'string': {
+				pattern: /"[^"]*"|'[^']*'/,
+				greedy: true
+			},
+			'punctuation': /^<!|>$|[[\]]/,
+			'doctype-tag': /^DOCTYPE/,
+			'name': /[^\s<>'"]+/
+		}
+	},
+	'cdata': /<!\[CDATA\[[\s\S]*?]]>/i,
+	'tag': {
+		pattern: /<\/?(?!\d)[^\s>\/=$<%]+(?:\s(?:\s*[^\s>\/=]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))|(?=[\s/>])))+)?\s*\/?>/,
+		greedy: true,
+		inside: {
+			'tag': {
+				pattern: /^<\/?[^\s>\/]+/,
+				inside: {
+					'punctuation': /^<\/?/,
+					'namespace': /^[^\s>\/:]+:/
+				}
+			},
+			'attr-value': {
+				pattern: /=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+)/,
+				inside: {
+					'punctuation': [
+						{
+							pattern: /^=/,
+							alias: 'attr-equals'
+						},
+						/"|'/
+					]
+				}
+			},
+			'punctuation': /\/?>/,
+			'attr-name': {
+				pattern: /[^\s>\/]+/,
+				inside: {
+					'namespace': /^[^\s>\/:]+:/
+				}
+			}
+
+		}
+	},
+	'entity': [
+		{
+			pattern: /&[\da-z]{1,8};/i,
+			alias: 'named-entity'
+		},
+		/&#x?[\da-f]{1,8};/i
+	]
+};
+
+Prism.languages.markup['tag'].inside['attr-value'].inside['entity'] =
+	Prism.languages.markup['entity'];
+Prism.languages.markup['doctype'].inside['internal-subset'].inside = Prism.languages.markup;
+
+// Plugin to make entity title show the real entity, idea by Roman Komarov
+Prism.hooks.add('wrap', function (env) {
+
+	if (env.type === 'entity') {
+		env.attributes['title'] = env.content.replace(/&amp;/, '&');
+	}
+});
+
+Object.defineProperty(Prism.languages.markup.tag, 'addInlined', {
+	/**
+	 * Adds an inlined language to markup.
+	 *
+	 * An example of an inlined language is CSS with `<style>` tags.
+	 *
+	 * @param {string} tagName The name of the tag that contains the inlined language. This name will be treated as
+	 * case insensitive.
+	 * @param {string} lang The language key.
+	 * @example
+	 * addInlined('style', 'css');
+	 */
+	value: function addInlined(tagName, lang) {
+		var includedCdataInside = {};
+		includedCdataInside['language-' + lang] = {
+			pattern: /(^<!\[CDATA\[)[\s\S]+?(?=\]\]>$)/i,
+			lookbehind: true,
+			inside: Prism.languages[lang]
+		};
+		includedCdataInside['cdata'] = /^<!\[CDATA\[|\]\]>$/i;
+
+		var inside = {
+			'included-cdata': {
+				pattern: /<!\[CDATA\[[\s\S]*?\]\]>/i,
+				inside: includedCdataInside
+			}
+		};
+		inside['language-' + lang] = {
+			pattern: /[\s\S]+/,
+			inside: Prism.languages[lang]
+		};
+
+		var def = {};
+		def[tagName] = {
+			pattern: RegExp(/(<__[\s\S]*?>)(?:<!\[CDATA\[(?:[^\]]|\](?!\]>))*\]\]>|(?!<!\[CDATA\[)[\s\S])*?(?=<\/__>)/.source.replace(/__/g, function () { return tagName; }), 'i'),
+			lookbehind: true,
+			greedy: true,
+			inside: inside
+		};
+
+		Prism.languages.insertBefore('markup', 'cdata', def);
+	}
+});
+
+Prism.languages.html = Prism.languages.markup;
+Prism.languages.mathml = Prism.languages.markup;
+Prism.languages.svg = Prism.languages.markup;
+
+Prism.languages.xml = Prism.languages.extend('markup', {});
+Prism.languages.ssml = Prism.languages.xml;
+Prism.languages.atom = Prism.languages.xml;
+Prism.languages.rss = Prism.languages.xml;
+
+Prism.languages.clike = {
+	'comment': [
+		{
+			pattern: /(^|[^\\])\/\*[\s\S]*?(?:\*\/|$)/,
+			lookbehind: true
+		},
+		{
+			pattern: /(^|[^\\:])\/\/.*/,
+			lookbehind: true,
+			greedy: true
+		}
+	],
+	'string': {
+		pattern: /(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,
+		greedy: true
+	},
+	'class-name': {
+		pattern: /(\b(?:class|interface|extends|implements|trait|instanceof|new)\s+|\bcatch\s+\()[\w.\\]+/i,
+		lookbehind: true,
+		inside: {
+			'punctuation': /[.\\]/
+		}
+	},
+	'keyword': /\b(?:if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/,
+	'boolean': /\b(?:true|false)\b/,
+	'function': /\w+(?=\()/,
+	'number': /\b0x[\da-f]+\b|(?:\b\d+\.?\d*|\B\.\d+)(?:e[+-]?\d+)?/i,
+	'operator': /[<>]=?|[!=]=?=?|--?|\+\+?|&&?|\|\|?|[?*/~^%]/,
+	'punctuation': /[{}[\];(),.:]/
+};
+
+Prism.languages.javascript = Prism.languages.extend('clike', {
+	'class-name': [
+		Prism.languages.clike['class-name'],
+		{
+			pattern: /(^|[^$\w\xA0-\uFFFF])[_$A-Z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\.(?:prototype|constructor))/,
+			lookbehind: true
+		}
+	],
+	'keyword': [
+		{
+			pattern: /((?:^|})\s*)(?:catch|finally)\b/,
+			lookbehind: true
+		},
+		{
+			pattern: /(^|[^.]|\.\.\.\s*)\b(?:as|async(?=\s*(?:function\b|\(|[$\w\xA0-\uFFFF]|$))|await|break|case|class|const|continue|debugger|default|delete|do|else|enum|export|extends|for|from|function|(?:get|set)(?=\s*[\[$\w\xA0-\uFFFF])|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)\b/,
+			lookbehind: true
+		},
+	],
+	'number': /\b(?:(?:0[xX](?:[\dA-Fa-f](?:_[\dA-Fa-f])?)+|0[bB](?:[01](?:_[01])?)+|0[oO](?:[0-7](?:_[0-7])?)+)n?|(?:\d(?:_\d)?)+n|NaN|Infinity)\b|(?:\b(?:\d(?:_\d)?)+\.?(?:\d(?:_\d)?)*|\B\.(?:\d(?:_\d)?)+)(?:[Ee][+-]?(?:\d(?:_\d)?)+)?/,
+	// Allow for all non-ASCII characters (See http://stackoverflow.com/a/2008444)
+	'function': /#?[_$a-zA-Z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*(?:\.\s*(?:apply|bind|call)\s*)?\()/,
+	'operator': /--|\+\+|\*\*=?|=>|&&=?|\|\|=?|[!=]==|<<=?|>>>?=?|[-+*/%&|^!=<>]=?|\.{3}|\?\?=?|\?\.?|[~:]/
+});
+
+Prism.languages.javascript['class-name'][0].pattern = /(\b(?:class|interface|extends|implements|instanceof|new)\s+)[\w.\\]+/;
+
+Prism.languages.insertBefore('javascript', 'keyword', {
+	'regex': {
+		pattern: /((?:^|[^$\w\xA0-\uFFFF."'\])\s]|\b(?:return|yield))\s*)\/(?:\[(?:[^\]\\\r\n]|\\.)*]|\\.|[^/\\\[\r\n])+\/[gimyus]{0,6}(?=(?:\s|\/\*(?:[^*]|\*(?!\/))*\*\/)*(?:$|[\r\n,.;:})\]]|\/\/))/,
+		lookbehind: true,
+		greedy: true,
+		inside: {
+			'regex-source': {
+				pattern: /^(\/)[\s\S]+(?=\/[a-z]*$)/,
+				lookbehind: true,
+				alias: 'language-regex',
+				inside: Prism.languages.regex
+			},
+			'regex-flags': /[a-z]+$/,
+			'regex-delimiter': /^\/|\/$/
+		}
+	},
+	// This must be declared before keyword because we use "function" inside the look-forward
+	'function-variable': {
+		pattern: /#?[_$a-zA-Z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*[=:]\s*(?:async\s*)?(?:\bfunction\b|(?:\((?:[^()]|\([^()]*\))*\)|[_$a-zA-Z\xA0-\uFFFF][$\w\xA0-\uFFFF]*)\s*=>))/,
+		alias: 'function'
+	},
+	'parameter': [
+		{
+			pattern: /(function(?:\s+[_$A-Za-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*)?\s*\(\s*)(?!\s)(?:[^()]|\([^()]*\))+?(?=\s*\))/,
+			lookbehind: true,
+			inside: Prism.languages.javascript
+		},
+		{
+			pattern: /[_$a-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*=>)/i,
+			inside: Prism.languages.javascript
+		},
+		{
+			pattern: /(\(\s*)(?!\s)(?:[^()]|\([^()]*\))+?(?=\s*\)\s*=>)/,
+			lookbehind: true,
+			inside: Prism.languages.javascript
+		},
+		{
+			pattern: /((?:\b|\s|^)(?!(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)(?![$\w\xA0-\uFFFF]))(?:[_$A-Za-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*\s*)\(\s*|\]\s*\(\s*)(?!\s)(?:[^()]|\([^()]*\))+?(?=\s*\)\s*\{)/,
+			lookbehind: true,
+			inside: Prism.languages.javascript
+		}
+	],
+	'constant': /\b[A-Z](?:[A-Z_]|\dx?)*\b/
+});
+
+Prism.languages.insertBefore('javascript', 'string', {
+	'template-string': {
+		pattern: /`(?:\\[\s\S]|\${(?:[^{}]|{(?:[^{}]|{[^}]*})*})+}|(?!\${)[^\\`])*`/,
+		greedy: true,
+		inside: {
+			'template-punctuation': {
+				pattern: /^`|`$/,
+				alias: 'string'
+			},
+			'interpolation': {
+				pattern: /((?:^|[^\\])(?:\\{2})*)\${(?:[^{}]|{(?:[^{}]|{[^}]*})*})+}/,
+				lookbehind: true,
+				inside: {
+					'interpolation-punctuation': {
+						pattern: /^\${|}$/,
+						alias: 'punctuation'
+					},
+					rest: Prism.languages.javascript
+				}
+			},
+			'string': /[\s\S]+/
+		}
+	}
+});
+
+if (Prism.languages.markup) {
+	Prism.languages.markup.tag.addInlined('script', 'javascript');
+}
+
+Prism.languages.js = Prism.languages.javascript;
+
+// https://www.json.org/json-en.html
+Prism.languages.json = {
+	'property': {
+		pattern: /"(?:\\.|[^\\"\r\n])*"(?=\s*:)/,
+		greedy: true
+	},
+	'string': {
+		pattern: /"(?:\\.|[^\\"\r\n])*"(?!\s*:)/,
+		greedy: true
+	},
+	'comment': {
+		pattern: /\/\/.*|\/\*[\s\S]*?(?:\*\/|$)/,
+		greedy: true
+	},
+	'number': /-?\b\d+(?:\.\d+)?(?:e[+-]?\d+)?\b/i,
+	'punctuation': /[{}[\],]/,
+	'operator': /:/,
+	'boolean': /\b(?:true|false)\b/,
+	'null': {
+		pattern: /\bnull\b/,
+		alias: 'keyword'
+	}
+};
+
+Prism.languages.webmanifest = Prism.languages.json;
+
+(function (Prism) {
+
+	var string = /("|')(?:\\(?:\r\n?|\n|.)|(?!\1)[^\\\r\n])*\1/
+
+	Prism.languages.json5 = Prism.languages.extend('json', {
+		'property': [
+			{
+				pattern: RegExp(string.source + '(?=\\s*:)'),
+				greedy: true
+			},
+			{
+				pattern: /[_$a-zA-Z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*:)/,
+				alias: 'unquoted'
+			}
+		],
+		'string': {
+			pattern: string,
+			greedy: true
+		},
+		'number': /[+-]?\b(?:NaN|Infinity|0x[a-fA-F\d]+)\b|[+-]?(?:\b\d+\.?\d*|\B\.\d+)(?:[eE][+-]?\d+\b)?/
+	});
+
+}(Prism));
+
+Prism.languages.jsonp = Prism.languages.extend('json', {
+	'punctuation': /[{}[\]();,.]/
+});
+
+Prism.languages.insertBefore('jsonp', 'punctuation', {
+	'function': /[_$a-zA-Z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*\()/
+});
+
diff --git a/Client/WebServer/index.html b/Client/WebServer/index.html
index 01cd24de6..afa4dfb6d 100644
--- a/Client/WebServer/index.html
+++ b/Client/WebServer/index.html
@@ -10,10 +10,12 @@
     <link rel="stylesheet" href="docs.css" type="text/css" charset="utf-8" />
     <link rel="stylesheet" href="context-menu.css" type="text/css" charset="utf-8" />
     <link rel="stylesheet" href="font-awasome.css" type="text/css" />
+    <link rel="stylesheet" href="prism.css" type="text/css" />
     <link rel="shortcut icon" type="image/png/ico" href="Images/favicon.ico" />
     <script type="text/javascript" src="WebServer/require.js"></script>
     <script type="text/javascript" src="AppPreLoader.js"></script>
     <script src="externalScripts/CCapture.all.min.js"></script>
+    <script src="externalScripts/prism.js"></script>
 
     <!-- Documentation Style Sheets -->
     <!-- -->
@@ -116,8 +118,8 @@
         <li class="menu-item" onClick="window.contextMenu.toImportant()">Important Style</li>
         <li class="menu-item" onClick="window.contextMenu.toSuccess()">Success Style</li>
         <li class="menu-item" onClick="window.contextMenu.toList()">List Style</li>
-        <li class="menu-item" onClick="window.contextMenu.toJsCode()">JS Code Style</li>
-        <li class="menu-item" onClick="window.contextMenu.toJsonCode()">JSON Code Style</li>
+        <li class="menu-item" onClick="window.contextMenu.toJavascript()">JS Code Style</li>
+        <li class="menu-item" onClick="window.contextMenu.toJson()">JSON Code Style</li>
     </ul>
 
 </body>
diff --git a/Client/httpInterface.js b/Client/httpInterface.js
index 6191fb906..128345d78 100644
--- a/Client/httpInterface.js
+++ b/Client/httpInterface.js
@@ -791,6 +791,13 @@ exports.newHttpInterface = function newHttpInterface(WEB_SERVER, DATA_FILE_SERVE
                     sendStyleSheet('font-awasome.css')
                 }
                 break
+
+            case 'prism.css':
+                {
+                    sendStyleSheet('prism.css')
+                }
+                break
+
             case 'ExecuteTerminalCommand':
                 {
                     let command = unescape(requestParameters[2])
diff --git a/Projects/Superalgos/Schemas/DocSchema.json b/Projects/Superalgos/Schemas/DocSchema.json
index 6692ea77a..0fdf947c6 100644
--- a/Projects/Superalgos/Schemas/DocSchema.json
+++ b/Projects/Superalgos/Schemas/DocSchema.json
@@ -30,14 +30,6 @@
             {
                 "style": "Text",
                 "text": "Select <i>Configure</i> on the menu to access the configuration."
-            },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-json\">"
-            },
-            {
-                "style": "Text",
-                "text": "</code\">"
             }
         ]
     },
@@ -63,14 +55,6 @@
             {
                 "style": "Text",
                 "text": "Select <i>Configure</i> on the menu to access the configuration."
-            },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-json\">"
-            },
-            {
-                "style": "Text",
-                "text": "</code\">"
             }
         ]
     },
@@ -93,14 +77,6 @@
             {
                 "style": "Text",
                 "text": "Select <i>Configure</i> on the menu to access the configuration."
-            },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-json\">"
-            },
-            {
-                "style": "Text",
-                "text": "</code\">"
             }
         ]
     },
@@ -123,14 +99,6 @@
             {
                 "style": "Text",
                 "text": "Select <i>Configure</i> on the menu to access the configuration."
-            },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-json\">"
-            },
-            {
-                "style": "Text",
-                "text": "</code\">"
             }
         ]
     },
@@ -177,10 +145,6 @@
                 "style": "Text",
                 "text": "Select <i>Configure Plotter Module</i> on the menu to access the configuration."
             },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-json\">"
-            },
             {
                 "style": "Text",
                 "text": "{"
@@ -202,16 +166,12 @@
                 "text": "}"
             },
             {
-                "style": "Text",
-                "text": "</code\">"
+                "style": "List",
+                "text": "codeName is the name used in the code to refer to the module."
             },
             {
                 "style": "List",
-                "text": "<code class=\"language-none\">codeName</code> is the name used in the code to refer to the module."
-            },
-            {
-                "style": "List",
-                "text": "<code class=\"language-none\">isLegacy</code> is <code class=\"language-none\">true<code class=\"language-none\"> for plotters modules developed entirely in JavaScript, and is </code>false</code> or doesn't show in the configuration for plotters built with the tools featured in the data mine hierarchy."
+                "text": "isLegacy is true for plotters modules developed entirely in JavaScript, and is false or doesn't show in the configuration for plotters built with the tools featured in the data mine hierarchy."
             },
             {
                 "style": "Text",
@@ -223,27 +183,27 @@
             },
             {
                 "style": "Text",
-                "text": "<tr><td> <code class=\"language-none\">default</code> </td><td> <img src=\"Projects/Superalgos/Icons/default-banner.png\"></img> </td></tr>"
+                "text": "<tr><td> default </td><td> <img src=\"Projects/Superalgos/Icons/default-banner.png\"></img> </td></tr>"
             },
             {
                 "style": "Text",
-                "text": "<tr><td> <code class=\"language-none\">histogram</code> </td><td> <img src=\"Projects/Superalgos/Icons/histogram-banner.png\"></img> </td></tr>"
+                "text": "<tr><td> histogram </td><td> <img src=\"Projects/Superalgos/Icons/histogram-banner.png\"></img> </td></tr>"
             },
             {
                 "style": "Text",
-                "text": "<tr><td> <code class=\"language-none\">band</code> </td><td> <img src=\"Projects/Superalgos/Icons/bands-banner.png\"></img> </td></tr>"
+                "text": "<tr><td> band </td><td> <img src=\"Projects/Superalgos/Icons/bands-banner.png\"></img> </td></tr>"
             },
             {
                 "style": "Text",
-                "text": "<tr><td> <code class=\"language-none\">moving-average</code> </td><td> <img src=\"Projects/Superalgos/Icons/moving-average-banner.png\"></img> </td></tr>"
+                "text": "<tr><td> moving-average </td><td> <img src=\"Projects/Superalgos/Icons/moving-average-banner.png\"></img> </td></tr>"
             },
             {
                 "style": "Text",
-                "text": "<tr><td> <code class=\"language-none\">oscillator</code> </td><td> <img src=\"Projects/Superalgos/Icons/oscillator-banner.png\"></img> </td></tr>"
+                "text": "<tr><td> oscillator </td><td> <img src=\"Projects/Superalgos/Icons/oscillator-banner.png\"></img> </td></tr>"
             },
             {
                 "style": "Text",
-                "text": "<tr><td> <code class=\"language-none\">trend</code> </td><td> <img src=\"Projects/Superalgos/Icons/trends-banner.png\"></img> </td></tr>"
+                "text": "<tr><td> trend </td><td> <img src=\"Projects/Superalgos/Icons/trends-banner.png\"></img> </td></tr>"
             },
             {
                 "style": "Text",
@@ -251,15 +211,15 @@
             },
             {
                 "style": "Text",
-                "text": "1. name the image in the following format: <code class=\"language-none\">image-name.png</code>;"
+                "text": "1. name the image in the following format: image-name.png;"
             },
             {
                 "style": "Text",
-                "text": "1. place images in the <code class=\"language-none\">WebServer\\Images\\Icons</code> folder;"
+                "text": "1. place images in the WebServer\\Images\\Icons folder;"
             },
             {
                 "style": "Text",
-                "text": "1. in the configuration of the module, use the name as is (e.g.: <code class=\"language-none\">\"icon\": \"image-name\"</code>)"
+                "text": "1. in the configuration of the module, use the name as is (e.g.: \"icon\": \"image-name\")"
             }
         ]
     },
@@ -315,7 +275,7 @@
             },
             {
                 "style": "Text",
-                "text": " 1. Identifying points defined by <code class=\"language-none\">[x,y]</code> coordinates"
+                "text": " 1. Identifying points defined by [x,y] coordinates"
             },
             {
                 "style": "Text",
@@ -389,10 +349,6 @@
                 "style": "Text",
                 "text": "Select <i>Configure Panel Data</i> on the menu to access the configuration."
             },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-json\">"
-            },
             {
                 "style": "Text",
                 "text": "{"
@@ -405,17 +361,9 @@
                 "style": "Text",
                 "text": "}"
             },
-            {
-                "style": "Text",
-                "text": "</code\">"
-            },
             {
                 "style": "List",
-                "text": "<code class=\"language-none\">valueDecimals</code> sets the number of decimals to be shown on the corresponding data field."
-            },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-json\">"
+                "text": "valueDecimals sets the number of decimals to be shown on the corresponding data field."
             },
             {
                 "style": "Text",
@@ -441,13 +389,9 @@
                 "style": "Text",
                 "text": "}"
             },
-            {
-                "style": "Text",
-                "text": "</code\">"
-            },
             {
                 "style": "List",
-                "text": "<code class=\"language-none\">labelPosition</code> and <code class=\"language-none\">valuePosition</code> represent the vertical distance of the corresponding fields to the top margin of the panel."
+                "text": "labelPosition and valuePosition represent the vertical distance of the corresponding fields to the top margin of the panel."
             }
         ]
     },
@@ -501,7 +445,7 @@
             },
             {
                 "style": "Text",
-                "text": "The definition of a point consists of the name of the point and the corresponding values for the <code class=\"language-none\">x</code> and <code class=\"language-none\">y</code> coordinates. To create such definitions, point and point formulas are used."
+                "text": "The definition of a point consists of the name of the point and the corresponding values for the x and y coordinates. To create such definitions, point and point formulas are used."
             },
             {
                 "style": "Title",
@@ -523,7 +467,7 @@
             },
             {
                 "style": "Text",
-                "text": "These coordinate points are used to define polygons. Values for <code class=\"language-none\">[x,y]</code>coordinates are entered with a point formula."
+                "text": "These coordinate points are used to define polygons. Values for [x,y]coordinates are entered with a point formula."
             },
             {
                 "style": "Text",
@@ -549,7 +493,7 @@
             },
             {
                 "style": "Text",
-                "text": "To represent some form of variation of the price or a price derivative over time, a typical point formula consists of the following two coordinates: <code class=\"language-none\">x = datetime</code> and <code class=\"language-none\">y = rate</code>."
+                "text": "To represent some form of variation of the price or a price derivative over time, a typical point formula consists of the following two coordinates: x = datetime and y = rate."
             },
             {
                 "style": "Text",
@@ -559,10 +503,6 @@
                 "style": "Text",
                 "text": "<b>Point <i>SMA 20 Begin</i></b>"
             },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-js\">"
-            },
             {
                 "style": "Text",
                 "text": "x = record.begin"
@@ -573,11 +513,7 @@
             },
             {
                 "style": "Text",
-                "text": "</code\">"
-            },
-            {
-                "style": "Text",
-                "text": "The example above shows the definition of the first of two points necessary to draw the segment of the 20-periods SMA curve for any particular period or candle. In this case, <code class=\"language-none\">x = record.begin</code> is the starting datetime of the period and <code class=\"language-none\">y = record.previous.sma20</code> is the rate of the 20-periods SMA of the previous period."
+                "text": "The example above shows the definition of the first of two points necessary to draw the segment of the 20-periods SMA curve for any particular period or candle. In this case, x = record.begin is the starting datetime of the period and y = record.previous.sma20 is the rate of the 20-periods SMA of the previous period."
             },
             {
                 "style": "Note",
@@ -591,10 +527,6 @@
                 "style": "Text",
                 "text": "<b>Point <i>SMA 20 End</i></b>"
             },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-js\">"
-            },
             {
                 "style": "Text",
                 "text": "x = record.end"
@@ -603,10 +535,6 @@
                 "style": "Text",
                 "text": "y = record.sma20"
             },
-            {
-                "style": "Text",
-                "text": "</code\">"
-            },
             {
                 "style": "Text",
                 "text": "The above system works very well for plotting all sorts of information over the candles, on the charts."
@@ -623,10 +551,6 @@
                 "style": "Text",
                 "text": "<b>Point <i>RSI Begin</i></b>"
             },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-js\">"
-            },
             {
                 "style": "Text",
                 "text": "x = record.begin"
@@ -635,18 +559,10 @@
                 "style": "Text",
                 "text": "y = record.previous.value"
             },
-            {
-                "style": "Text",
-                "text": "</code\">"
-            },
             {
                 "style": "Text",
                 "text": "<b>Point <i>RSI End</i></b>"
             },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-js\">"
-            },
             {
                 "style": "Text",
                 "text": "x = record.end"
@@ -655,10 +571,6 @@
                 "style": "Text",
                 "text": "y = record.value"
             },
-            {
-                "style": "Text",
-                "text": "</code\">"
-            },
             {
                 "style": "Text",
                 "text": "Points do not necessarily need to refer to values on the dataset produced by the corresponding data product. For example, absolute values for the <i>y-axis</i> may be used to describe fixed graphical elements, for instance, a horizontal line, or a box."
@@ -667,10 +579,6 @@
                 "style": "Text",
                 "text": "<b>Point <i>Begin 20</i></b>"
             },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-js\">"
-            },
             {
                 "style": "Text",
                 "text": "x = record.begin"
@@ -679,18 +587,10 @@
                 "style": "Text",
                 "text": "y = 20"
             },
-            {
-                "style": "Text",
-                "text": "</code\">"
-            },
             {
                 "style": "Text",
                 "text": "<b>Point <i>End 20</i></b>"
             },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-js\">"
-            },
             {
                 "style": "Text",
                 "text": "x = record.end"
@@ -699,18 +599,10 @@
                 "style": "Text",
                 "text": "y = 20"
             },
-            {
-                "style": "Text",
-                "text": "</code\">"
-            },
             {
                 "style": "Text",
                 "text": "<b>Point <i>Begin 30</i></b>"
             },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-js\">"
-            },
             {
                 "style": "Text",
                 "text": "x = record.begin"
@@ -719,18 +611,10 @@
                 "style": "Text",
                 "text": "y = 30"
             },
-            {
-                "style": "Text",
-                "text": "</code\">"
-            },
             {
                 "style": "Text",
                 "text": "<b>Point <i>End 30</i></b>"
             },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-js\">"
-            },
             {
                 "style": "Text",
                 "text": "x = record.end"
@@ -739,10 +623,6 @@
                 "style": "Text",
                 "text": "y = 30"
             },
-            {
-                "style": "Text",
-                "text": "</code\">"
-            },
             {
                 "style": "Text",
                 "text": "The above four points are used to paint the background of the 20 to 30 value range of the RSI chart. The first two points are also used to draw the dotted line signaling the 20-value mark, and the last two are used for the dotted line indicating the 30-value mark."
@@ -771,7 +651,7 @@
             },
             {
                 "style": "Text",
-                "text": "The foremost requirement for images is that they are in the <code class=\"language-none\">png</code> format, 24 bits, with transparency, a low case extension, and are square."
+                "text": "The foremost requirement for images is that they are in the png format, 24 bits, with transparency, a low case extension, and are square."
             },
             {
                 "style": "Text",
@@ -779,7 +659,7 @@
             },
             {
                 "style": "Text",
-                "text": "Images must the stored in the following path: <code class=\"language-none\">\\BackendServers\\WebServer\\Images\\Icons\\style-01</code>"
+                "text": "Images must the stored in the following path: \\BackendServers\\WebServer\\Images\\Icons\\style-01"
             },
             {
                 "style": "Note",
@@ -801,10 +681,6 @@
                 "style": "Text",
                 "text": "Select <i>Configure</i> on the menu to access the configuration."
             },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-json\">"
-            },
             {
                 "style": "Text",
                 "text": "{"
@@ -822,16 +698,12 @@
                 "text": "}"
             },
             {
-                "style": "Text",
-                "text": "</code\">"
+                "style": "List",
+                "text": "codeName is the name of the image, without the .png extension."
             },
             {
                 "style": "List",
-                "text": "<code class=\"language-none\">codeName</code> is the name of the image, without the <code class=\"language-none\">.png</code> extension."
-            },
-            {
-                "style": "List",
-                "text": "<code class=\"language-none\">size</code> is the size at which the image shall be rendered, in pixels."
+                "text": "size is the size at which the image shall be rendered, in pixels."
             }
         ]
     },
@@ -845,7 +717,7 @@
             },
             {
                 "style": "Text",
-                "text": "The node is optional. When the node is not present in the definition of the image or when the condition validates <code class=\"language-none\">true</code>, the image is rendered on screen. When the condition validates <code class=\"language-none\">false</code> the image is not rendered. As such, the node allows dynamically switching the rendering of the corresponding image on and off ."
+                "text": "The node is optional. When the node is not present in the definition of the image or when the condition validates true, the image is rendered on screen. When the condition validates false the image is not rendered. As such, the node allows dynamically switching the rendering of the corresponding image on and off ."
             },
             {
                 "style": "Title",
@@ -889,10 +761,6 @@
                 "style": "Text",
                 "text": "Select <i>Configure</i> on the menu to access the configuration."
             },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-json\">"
-            },
             {
                 "style": "Text",
                 "text": "{"
@@ -910,16 +778,12 @@
                 "text": "}"
             },
             {
-                "style": "Text",
-                "text": "</code\">"
+                "style": "List",
+                "text": "offsetX is an offset in the X axis, in pixels, applied to displace the image in relation to the coordinate point defined by the reference of the node. Negative values displace the image to the left and positive values to the right."
             },
             {
                 "style": "List",
-                "text": "<code class=\"language-none\">offsetX</code> is an offset in the X axis, in pixels, applied to displace the image in relation to the coordinate point defined by the reference of the node. Negative values displace the image to the left and positive values to the right."
-            },
-            {
-                "style": "List",
-                "text": "<code class=\"language-none\">offsetY</code> is an offset in the Y axis. Negative values displace the image downwards and positive values displace the image upwards."
+                "text": "offsetY is an offset in the Y axis. Negative values displace the image downwards and positive values displace the image upwards."
             }
         ]
     },
@@ -973,10 +837,6 @@
                 "style": "Text",
                 "text": "Select <i>Configure</i> on the menu to access the configuration."
             },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-json\">"
-            },
             {
                 "style": "Text",
                 "text": "{"
@@ -999,19 +859,15 @@
             },
             {
                 "style": "Text",
-                "text": "</code\">"
-            },
-            {
-                "style": "Text",
-                "text": "<i> <code class=\"language-none\">paletteColor</code> is one of the predefined colors available, as described in the configuration of the </i>Style* node."
+                "text": "<i> paletteColor is one of the predefined colors available, as described in the configuration of the </i>Style* node."
             },
             {
                 "style": "List",
-                "text": "<code class=\"language-none\">opacity</code> is probably self-explanatory, and may range from 0 for a fully transparent object to 1 for a solid object."
+                "text": "opacity is probably self-explanatory, and may range from 0 for a fully transparent object to 1 for a solid object."
             },
             {
                 "style": "List",
-                "text": "<code class=\"language-none\">fontSize</code> is self explanatory too; values above zero produce the expected results."
+                "text": "fontSize is self explanatory too; values above zero produce the expected results."
             }
         ]
     },
@@ -1025,7 +881,7 @@
             },
             {
                 "style": "Text",
-                "text": "The node is optional. When the node is not present in the definition of the text node or when the condition validates <code class=\"language-none\">true</code>, the text is rendered on screen. When the condition validates <code class=\"language-none\">false</code>, text is not rendered. As such, the node allows dynamically switching the rendering of the corresponding text on and off ."
+                "text": "The node is optional. When the node is not present in the definition of the text node or when the condition validates true, the text is rendered on screen. When the condition validates false, text is not rendered. As such, the node allows dynamically switching the rendering of the corresponding text on and off ."
             },
             {
                 "style": "Title",
@@ -1069,10 +925,6 @@
                 "style": "Text",
                 "text": "Select <i>Configure</i> on the menu to access the configuration."
             },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-json\">"
-            },
             {
                 "style": "Text",
                 "text": "{"
@@ -1090,16 +942,12 @@
                 "text": "}"
             },
             {
-                "style": "Text",
-                "text": "</code\">"
+                "style": "List",
+                "text": "offsetX is an offset in the X axis, in pixels, applied to displace the text in relation to the coordinate point defined by the reference of the node. Negative values displace the text to the left and positive values to the right."
             },
             {
                 "style": "List",
-                "text": "<code class=\"language-none\">offsetX</code> is an offset in the X axis, in pixels, applied to displace the text in relation to the coordinate point defined by the reference of the node. Negative values displace the text to the left and positive values to the right."
-            },
-            {
-                "style": "List",
-                "text": "<code class=\"language-none\">offsetY</code> is an offset in the Y axis. Negative values displace the text downwards and positive values displace the image upwards."
+                "text": "offsetY is an offset in the Y axis. Negative values displace the text downwards and positive values displace the image upwards."
             }
         ]
     },
@@ -1161,7 +1009,7 @@
             },
             {
                 "style": "Text",
-                "text": "The node is optional. When the node is not present in the definition of the polygon or when the condition validates <code class=\"language-none\">true</code>, the polygon is rendered on screen. When the condition validates <code class=\"language-none\">false</code> the polygon is not rendered. As such, the node allows dynamically switching the rendering of the corresponding polygon on and off."
+                "text": "The node is optional. When the node is not present in the definition of the polygon or when the condition validates true, the polygon is rendered on screen. When the condition validates false the polygon is not rendered. As such, the node allows dynamically switching the rendering of the corresponding polygon on and off."
             },
             {
                 "style": "Title",
@@ -1277,29 +1125,17 @@
                 "style": "Text",
                 "text": "To continue the example of the Percentage Bandwidth plotter, the following is the condition that determines the newly added styles:"
             },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-js\">"
-            },
             {
                 "style": "Text",
                 "text": "record.previous.movingAverage > record.movingAverage"
             },
-            {
-                "style": "Text",
-                "text": "</code\">"
-            },
             {
                 "style": "Text",
                 "text": "As hinted earlier, when the condition is met, the default style is modified by a second style that may be created on the menu of the style condition node."
             },
             {
                 "style": "Text",
-                "text": "The definition of secondary styles is slightly different from that of the default style, as&mdash;in such cases&mdash;the <code class=\"language-none\">atMousePosition</code> property may no longer be defined:"
-            },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-js\">"
+                "text": "The definition of secondary styles is slightly different from that of the default style, as&mdash;in such cases&mdash;the atMousePosition property may no longer be defined:"
             },
             {
                 "style": "Text",
@@ -1324,10 +1160,6 @@
             {
                 "style": "Text",
                 "text": "}"
-            },
-            {
-                "style": "Text",
-                "text": "</code\">"
             }
         ]
     },
@@ -1367,10 +1199,6 @@
                 "style": "Text",
                 "text": "A typical definition for a polygon <i>body style</i> looks like this:"
             },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-json\">"
-            },
             {
                 "style": "Text",
                 "text": "{"
@@ -1411,18 +1239,10 @@
                 "style": "Text",
                 "text": "}"
             },
-            {
-                "style": "Text",
-                "text": "</code\">"
-            },
             {
                 "style": "Text",
                 "text": "A typical definition for a polygon <i>border style</i> has a couple more properties:"
             },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-json\">"
-            },
             {
                 "style": "Text",
                 "text": "{"
@@ -1479,10 +1299,6 @@
                 "style": "Text",
                 "text": "}"
             },
-            {
-                "style": "Text",
-                "text": "</code\">"
-            },
             {
                 "style": "Text",
                 "text": "The first section of the definition refers, as explicitly stated, to the default state of the style."
@@ -1493,7 +1309,7 @@
             },
             {
                 "style": "List",
-                "text": "<code class=\"language-none\">opacity</code> is probably self-explanatory: it may range from <code class=\"language-none\">0<code class=\"language-none\"> for a fully transparent object to </code>1</code> for a solid object."
+                "text": "opacity is probably self-explanatory: it may range from 0 for a fully transparent object to 1 for a solid object."
             },
             {
                 "style": "Text",
@@ -1505,71 +1321,71 @@
             },
             {
                 "style": "Text",
-                "text": "<tr><td> <code class=\"language-none\">DARK</code> </td><td> 48, 48, 54 </td><td> <span style=\"display: block; background: RGB(48, 48, 54); border: 1px solid black;\">&nbsp;</span> </td></tr>"
+                "text": "<tr><td> DARK </td><td> 48, 48, 54 </td><td> <span style=\"display: block; background: RGB(48, 48, 54); border: 1px solid black;\">&nbsp;</span> </td></tr>"
             },
             {
                 "style": "Text",
-                "text": "<tr><td> <code class=\"language-none\">LIGHT</code> </td><td> 234, 226, 222 </td><td> <span style=\"display: block; background: RGB(234, 226, 222); border: 1px black; border: 1px solid black;\">&nbsp;</span> </td></tr>"
+                "text": "<tr><td> LIGHT </td><td> 234, 226, 222 </td><td> <span style=\"display: block; background: RGB(234, 226, 222); border: 1px black; border: 1px solid black;\">&nbsp;</span> </td></tr>"
             },
             {
                 "style": "Text",
-                "text": "<tr><td> <code class=\"language-none\">GREY</code> </td><td> 150, 150, 150 </td><td> <span style=\"display: block; background: RGB(150, 150, 150); border: 1px solid black;\">&nbsp;</span> </td></tr>"
+                "text": "<tr><td> GREY </td><td> 150, 150, 150 </td><td> <span style=\"display: block; background: RGB(150, 150, 150); border: 1px solid black;\">&nbsp;</span> </td></tr>"
             },
             {
                 "style": "Text",
-                "text": "<tr><td> <code class=\"language-none\">LIGHT_GREY</code> </td><td> 247, 247, 247 </td><td> <span style=\"display: block; background: RGB(247, 247, 247); border: 1px solid black;\">&nbsp;</span> </td></tr>"
+                "text": "<tr><td> LIGHT_GREY </td><td> 247, 247, 247 </td><td> <span style=\"display: block; background: RGB(247, 247, 247); border: 1px solid black;\">&nbsp;</span> </td></tr>"
             },
             {
                 "style": "Text",
-                "text": "<tr><td> <code class=\"language-none\">WHITE</code> </td><td> 255, 255, 255 </td><td> <span style=\"display: block; background: RGB(255, 255, 255); border: 1px solid black;\">&nbsp;</span> </td></tr>"
+                "text": "<tr><td> WHITE </td><td> 255, 255, 255 </td><td> <span style=\"display: block; background: RGB(255, 255, 255); border: 1px solid black;\">&nbsp;</span> </td></tr>"
             },
             {
                 "style": "Text",
-                "text": "<tr><td> <code class=\"language-none\">BLACK</code> </td><td> 0, 0, 0 </td><td> <span style=\"display: block; background: RGB(0, 0, 0); border: 1px solid black;\">&nbsp;</span> </td></tr>"
+                "text": "<tr><td> BLACK </td><td> 0, 0, 0 </td><td> <span style=\"display: block; background: RGB(0, 0, 0); border: 1px solid black;\">&nbsp;</span> </td></tr>"
             },
             {
                 "style": "Text",
-                "text": "<tr><td> <code class=\"language-none\">GOLDEN_ORANGE</code> </td><td> 240, 162, 2 </td><td> <span style=\"display: block; background: RGB(240, 162, 2); border: 1px solid black;\">&nbsp;</span> </td></tr>"
+                "text": "<tr><td> GOLDEN_ORANGE </td><td> 240, 162, 2 </td><td> <span style=\"display: block; background: RGB(240, 162, 2); border: 1px solid black;\">&nbsp;</span> </td></tr>"
             },
             {
                 "style": "Text",
-                "text": "<tr><td> <code class=\"language-none\">RUSTED_RED</code> </td><td> 204, 88, 53 </td><td> <span style=\"display: block; background: RGB(204, 88, 53); border: 1px solid black;\">&nbsp;</span> </td></tr>"
+                "text": "<tr><td> RUSTED_RED </td><td> 204, 88, 53 </td><td> <span style=\"display: block; background: RGB(204, 88, 53); border: 1px solid black;\">&nbsp;</span> </td></tr>"
             },
             {
                 "style": "Text",
-                "text": "<tr><td> <code class=\"language-none\">GREEN</code> </td><td> 188, 214, 67 </td><td> <span style=\"display: block; background: RGB(188, 214, 67); border: 1px solid black;\">&nbsp;</span> </td></tr>"
+                "text": "<tr><td> GREEN </td><td> 188, 214, 67 </td><td> <span style=\"display: block; background: RGB(188, 214, 67); border: 1px solid black;\">&nbsp;</span> </td></tr>"
             },
             {
                 "style": "Text",
-                "text": "<tr><td> <code class=\"language-none\">RED</code> </td><td> 223, 70, 60 </td><td> <span style=\"display: block; background: RGB(223, 70, 60); border: 1px solid black;\">&nbsp;</span> </td></tr>"
+                "text": "<tr><td> RED </td><td> 223, 70, 60 </td><td> <span style=\"display: block; background: RGB(223, 70, 60); border: 1px solid black;\">&nbsp;</span> </td></tr>"
             },
             {
                 "style": "Text",
-                "text": "<tr><td> <code class=\"language-none\">PATINATED_TURQUOISE</code> </td><td> 27, 153, 139 </td><td> <span style=\"display: block; background: RGB(27, 153, 139); border: 1px solid black;\">&nbsp;</span> </td></tr>"
+                "text": "<tr><td> PATINATED_TURQUOISE </td><td> 27, 153, 139 </td><td> <span style=\"display: block; background: RGB(27, 153, 139); border: 1px solid black;\">&nbsp;</span> </td></tr>"
             },
             {
                 "style": "Text",
-                "text": "<tr><td> <code class=\"language-none\">TITANIUM_YELLOW</code> </td><td> 244, 228, 9 </td><td> <span style=\"display: block; background: RGB(244, 228, 9); border: 1px solid black;\">&nbsp;</span> </td></tr>"
+                "text": "<tr><td> TITANIUM_YELLOW </td><td> 244, 228, 9 </td><td> <span style=\"display: block; background: RGB(244, 228, 9); border: 1px solid black;\">&nbsp;</span> </td></tr>"
             },
             {
                 "style": "Text",
-                "text": "<tr><td> <code class=\"language-none\">MANGANESE_PURPLE</code> </td><td> 91,80, 122 </td><td> <span style=\"display: block; background: RGB(91,80, 122); border: 1px solid black;\">&nbsp;</span> </td></tr>"
+                "text": "<tr><td> MANGANESE_PURPLE </td><td> 91,80, 122 </td><td> <span style=\"display: block; background: RGB(91,80, 122); border: 1px solid black;\">&nbsp;</span> </td></tr>"
             },
             {
                 "style": "Text",
-                "text": "<tr><td> <code class=\"language-none\">TURQUOISE</code> </td><td> 74, 207, 217 </td><td> <span style=\"display: block; background: RGB(74, 207, 217); border: 1px solid black;\">&nbsp;</span> </td></tr>"
+                "text": "<tr><td> TURQUOISE </td><td> 74, 207, 217 </td><td> <span style=\"display: block; background: RGB(74, 207, 217); border: 1px solid black;\">&nbsp;</span> </td></tr>"
             },
             {
                 "style": "Text",
-                "text": "<tr><td> <code class=\"language-none\">DARK_TURQUOISE</code> </td><td> 2, 149, 170 </td><td> <span style=\"display: block; background: RGB(2, 149, 170); border: 1px solid black;\">&nbsp;</span> </td></tr>"
+                "text": "<tr><td> DARK_TURQUOISE </td><td> 2, 149, 170 </td><td> <span style=\"display: block; background: RGB(2, 149, 170); border: 1px solid black;\">&nbsp;</span> </td></tr>"
             },
             {
                 "style": "Text",
-                "text": "</table>* <code class=\"language-none\">lineWidth</code> is the width of the border line, which should be greater than 0."
+                "text": "</table>* lineWidth is the width of the border line, which should be greater than 0."
             },
             {
                 "style": "List",
-                "text": "<code class=\"language-none\">lineDash</code> is used to turn the border into a dashed-line; the first value corresponds to the length of the dash while the second value defines the length of the space."
+                "text": "lineDash is used to turn the border into a dashed-line; the first value corresponds to the length of the dash while the second value defines the length of the space."
             }
         ]
     },
@@ -1663,11 +1479,11 @@
             },
             {
                 "style": "List",
-                "text": "Condition A: <code class=\"language-none\">chart.at01hs.candle.close > chart.at01hs.bollingerBand.MovingAverage</code> &#8594; This means that the latest candle at the 1 hour chart closed above the Bollinger Bands moving average."
+                "text": "Condition A: chart.at01hs.candle.close > chart.at01hs.bollingerBand.MovingAverage &#8594; This means that the latest candle at the 1 hour chart closed above the Bollinger Bands moving average."
             },
             {
                 "style": "List",
-                "text": "Condition B: <code class=\"language-none\">chart.at01hs.candle.previous.max > chart.at01hs.bollingerBand.previous.MovingAverage</code> &#8594; This means that the maximum value of the candle before the last one, was higher than the Bollinger Bands moving average."
+                "text": "Condition B: chart.at01hs.candle.previous.max > chart.at01hs.bollingerBand.previous.MovingAverage &#8594; This means that the maximum value of the candle before the last one, was higher than the Bollinger Bands moving average."
             },
             {
                 "style": "Text",
@@ -1719,10 +1535,6 @@
                 "style": "Text",
                 "text": "Select <i>Configure Super Scripts</i> on the menu to access the configuration."
             },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-none\">"
-            },
             {
                 "style": "Text",
                 "text": "{"
@@ -1735,13 +1547,9 @@
                 "style": "Text",
                 "text": "}"
             },
-            {
-                "style": "Text",
-                "text": "</code>"
-            },
             {
                 "style": "List",
-                "text": "<code class=\"language-none\">codeName</code> is the name of the hierarchy as is used in the system's code."
+                "text": "codeName is the name of the hierarchy as is used in the system's code."
             }
         ]
     },
@@ -1947,10 +1755,6 @@
                 "style": "Text",
                 "text": "Select <i>Configure</i> on the menu to access the configuration."
             },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-json\">"
-            },
             {
                 "style": "Text",
                 "text": "{"
@@ -1972,20 +1776,16 @@
                 "text": "}"
             },
             {
-                "style": "Text",
-                "text": "</code\">"
+                "style": "List",
+                "text": "host is the machine or hardware represented by the network node. The default parameter is localhost, but if you intend to access the backend services of this node from a remote computer, then you must change localhost for the IP Address of the machine on which the node is running, for example, to 147.0.0.1."
             },
             {
                 "style": "List",
-                "text": "<code class=\"language-none\">host</code> is the machine or hardware represented by the network node. The default parameter is <code class=\"language-none\">localhost<code class=\"language-none\">, but if you intend to access the backend services of this node from a remote computer, then you must change </code>localhost</code> for the IP Address of the machine on which the node is running, for example, to <code class=\"language-none\">147.0.0.1</code>."
+                "text": "webPort is the port used by the Web Server, at this stage 34248."
             },
             {
                 "style": "List",
-                "text": "<code class=\"language-none\">webPort</code> is the port used by the Web Server, at this stage <code class=\"language-none\">34248</code>."
-            },
-            {
-                "style": "List",
-                "text": "<code class=\"language-none\">webSocketsPort</code> is the port used by the system to communicate over the local area network, by default set at <code class=\"language-none\">18041</code>."
+                "text": "webSocketsPort is the port used by the system to communicate over the local area network, by default set at 18041."
             }
         ]
     },
@@ -2235,10 +2035,6 @@
                 "style": "Text",
                 "text": "Select <i>Configure Session</i> on the menu to access the configuration."
             },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-json\">"
-            },
             {
                 "style": "Text",
                 "text": "{"
@@ -2251,13 +2047,9 @@
                 "style": "Text",
                 "text": "}"
             },
-            {
-                "style": "Text",
-                "text": "</code\">"
-            },
             {
                 "style": "List",
-                "text": "<code class=\"language-none\">folderName</code> allows you to set a significant name to the folder in which the data products&mdash;and logs&mdash;generated by the session are stored. If left blank, the system names the folders with the session id. This may be handy when you intend to consult the raw data generated by the session, as, otherwise, the folder would be hard to identify."
+                "text": "folderName allows you to set a significant name to the folder in which the data products&mdash;and logs&mdash;generated by the session are stored. If left blank, the system names the folders with the session id. This may be handy when you intend to consult the raw data generated by the session, as, otherwise, the folder would be hard to identify."
             },
             {
                 "style": "Title",
@@ -2649,7 +2441,7 @@
             },
             {
                 "style": "Text",
-                "text": "Possible values are <code class=\"language-none\">Above</code> and <code class=\"language-none\">Below</code>."
+                "text": "Possible values are Above and Below."
             },
             {
                 "style": "Text",
@@ -2675,7 +2467,7 @@
             },
             {
                 "style": "Text",
-                "text": "Possible values are <code class=\"language-none\">Above</code> and <code class=\"language-none\">Below</code>."
+                "text": "Possible values are Above and Below."
             },
             {
                 "style": "Text",
@@ -2935,15 +2727,11 @@
             },
             {
                 "style": "List",
-                "text": "<code class=\"language-none\">base asset profit loss = base asset end balance - base asset begin balance</code>"
+                "text": "base asset profit loss = base asset end balance - base asset begin balance"
             },
             {
                 "style": "List",
-                "text": "<code class=\"language-none\">quoted asset profit loss = quoted asset end balance - quoted asset begin balance</code>"
-            },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-none\">"
+                "text": "quoted asset profit loss = quoted asset end balance - quoted asset begin balance"
             },
             {
                 "style": "Text",
@@ -2973,18 +2761,10 @@
                 "style": "Text",
                 "text": "    sessionParameters.sessionQuotedAsset.config.initialBalance"
             },
-            {
-                "style": "Text",
-                "text": "</code>"
-            },
             {
                 "style": "Text",
                 "text": "<i>In the case of the position base asset and position quoted asset:</i>"
             },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-none\">"
-            },
             {
                 "style": "Text",
                 "text": "tradingEngine.current.position.positionBaseAsset.profitLoss.value ="
@@ -3013,10 +2793,6 @@
                 "style": "Text",
                 "text": "    tradingEngine.current.position.positionQuotedAsset.beginBalance"
             },
-            {
-                "style": "Text",
-                "text": "</code>"
-            },
             {
                 "style": "Text",
                 "text": "In the context of the episode statistics or the position statistics, the calculation is done consolidating the profits of both assets."
@@ -3029,10 +2805,6 @@
                 "style": "Text",
                 "text": "<i>In the context of the episode statistics:</i>"
             },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-none\">"
-            },
             {
                 "style": "Text",
                 "text": "tradingEngine.current.episode.episodeStatistics.profitLoss.value ="
@@ -3049,18 +2821,10 @@
                 "style": "Text",
                 "text": "    tradingEngine.current.episode.episodeQuotedAsset.profitLoss.value"
             },
-            {
-                "style": "Text",
-                "text": "</code>"
-            },
             {
                 "style": "Text",
                 "text": "<i>In the context of the position statistics:</i>"
             },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-none\">"
-            },
             {
                 "style": "Text",
                 "text": "tradingEngine.current.position.positionStatistics.profitLoss.value ="
@@ -3077,10 +2841,6 @@
                 "style": "Text",
                 "text": "    tradingEngine.current.episode.episodeQuotedAsset.profitLoss.value"
             },
-            {
-                "style": "Text",
-                "text": "</code>"
-            },
             {
                 "style": "Title",
                 "text": "Adding a Profit Loss node"
@@ -3101,7 +2861,7 @@
             },
             {
                 "style": "Text",
-                "text": "Hit ratio results from multiplying the number of hits by 100 and dividing it by the number of positions: <code class=\"language-none\">hit ratio = hits * 100 / positions</code>."
+                "text": "Hit ratio results from multiplying the number of hits by 100 and dividing it by the number of positions: hit ratio = hits * 100 / positions."
             },
             {
                 "style": "Title",
@@ -3187,7 +2947,7 @@
             },
             {
                 "style": "Text",
-                "text": "<code class=\"language-none\">percentage filled = size filled * 100 / size</code>"
+                "text": "percentage filled = size filled * 100 / size"
             },
             {
                 "style": "Title",
@@ -3277,7 +3037,7 @@
             },
             {
                 "style": "Text",
-                "text": "<code class=\"language-none\">annualized rate of return = (((investment + profits) / investments) ^ (365 / days)) - 1</code>"
+                "text": "annualized rate of return = (((investment + profits) / investments) ^ (365 / days)) - 1"
             },
             {
                 "style": "Text",
@@ -3287,10 +3047,6 @@
                 "style": "Text",
                 "text": "<i>The formulas:</i>"
             },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-none\">"
-            },
             {
                 "style": "Text",
                 "text": "tradingEngine.current.episode.episodeBaseAsset.annualizedRateOfReturn.value ="
@@ -3331,18 +3087,10 @@
                 "style": "Text",
                 "text": "(365 / tradingEngine.current.episode.episodeStatistics.days.value)) - 1"
             },
-            {
-                "style": "Text",
-                "text": "</code>"
-            },
             {
                 "style": "Text",
                 "text": "<i>The JavaScript code:</i>"
             },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-js\">"
-            },
             {
                 "style": "Text",
                 "text": "tradingEngine.current.episode.episodeBaseAsset.annualizedRateOfReturn.value ="
@@ -3407,10 +3155,6 @@
                 "style": "Text",
                 "text": "        ) - 1"
             },
-            {
-                "style": "Text",
-                "text": "</code\">"
-            },
             {
                 "style": "Text",
                 "text": "In the context of the episode statistics, the calculation is done using the consolidated balance, as explained in the profit loss definition."
@@ -3423,10 +3167,6 @@
                 "style": "Text",
                 "text": "<i>The JavaScript code:</i>"
             },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-js\">"
-            },
             {
                 "style": "Text",
                 "text": "tradingEngine.current.episode.episodeStatistics.annualizedRateOfReturn.value ="
@@ -3503,10 +3243,6 @@
                 "style": "Text",
                 "text": "        ) - 1"
             },
-            {
-                "style": "Text",
-                "text": "</code\">"
-            },
             {
                 "style": "Title",
                 "text": "Adding a Annualized Rate Of Return node"
@@ -3991,15 +3727,15 @@
             },
             {
                 "style": "List",
-                "text": "<code class=\"language-none\">Not Open</code>: the object is not open at the current candle."
+                "text": "Not Open: the object is not open at the current candle."
             },
             {
                 "style": "List",
-                "text": "<code class=\"language-none\">Open</code>: the object is open at the current candle."
+                "text": "Open: the object is open at the current candle."
             },
             {
                 "style": "List",
-                "text": "<code class=\"language-none\">Closed</code>: the object closes at the current candle."
+                "text": "Closed: the object closes at the current candle."
             },
             {
                 "style": "Title",
@@ -4165,15 +3901,15 @@
             },
             {
                 "style": "Text",
-                "text": "Possible values for lock are <code class=\"language-none\">open</code> and <code class=\"language-none\">closed</code>."
+                "text": "Possible values for lock are open and closed."
             },
             {
                 "style": "Text",
-                "text": "The moment an order is closed, the system checks the <code class=\"language-none\">spawnMultipleOrders</code> parameter at the order's configuration in the trading system. If the value is <code class=\"language-none\">false<code class=\"language-none\">, the system sets the lock to </code>closed</code> so that the data structure may not be used again during the same position."
+                "text": "The moment an order is closed, the system checks the spawnMultipleOrders parameter at the order's configuration in the trading system. If the value is false, the system sets the lock to closed so that the data structure may not be used again during the same position."
             },
             {
                 "style": "Text",
-                "text": "At the moment of opening an order, the system checks the <code class=\"language-none\">spawnMultipleOrders</code> parameter at the order's configuration in the trading system. If the value is <code class=\"language-none\">false<code class=\"language-none\">, the system checks the value of the lock. If the value is </code>open</code>, then it may create the order; if it is <code class=\"language-none\">closed</code> then the order may not be created."
+                "text": "At the moment of opening an order, the system checks the spawnMultipleOrders parameter at the order's configuration in the trading system. If the value is false, the system checks the value of the lock. If the value is open, then it may create the order; if it is closed then the order may not be created."
             },
             {
                 "style": "Title",
@@ -4500,11 +4236,11 @@
             },
             {
                 "style": "List",
-                "text": "<b>The configuration of the execution algorithm</b>: The parameter <code class=\"language-none\">percentageOfStageTargetSize</code> determines what fraction of the target size the algorithm will attempt to execute."
+                "text": "<b>The configuration of the execution algorithm</b>: The parameter percentageOfStageTargetSize determines what fraction of the target size the algorithm will attempt to execute."
             },
             {
                 "style": "List",
-                "text": "<b>The configuration of the order</b>: The parameter <code class=\"language-none\">percentageOfAlgorithmSize</code> determines what fraction of the size handled by the algorithm the order shall be constrained to."
+                "text": "<b>The configuration of the order</b>: The parameter percentageOfAlgorithmSize determines what fraction of the size handled by the algorithm the order shall be constrained to."
             },
             {
                 "style": "Title",
@@ -4639,7 +4375,7 @@
             },
             {
                 "style": "Text",
-                "text": "<code class=\"language-none\">No Exit</code> is the default value until a new value is assigned before the object is closed. Other possible values vary with the context."
+                "text": "No Exit is the default value until a new value is assigned before the object is closed. Other possible values vary with the context."
             },
             {
                 "style": "Text",
@@ -4647,23 +4383,23 @@
             },
             {
                 "style": "List",
-                "text": "<code class=\"language-none\">Last Candle Reached</code>: the object was closed because the last candle was reached."
+                "text": "Last Candle Reached: the object was closed because the last candle was reached."
             },
             {
                 "style": "List",
-                "text": "<code class=\"language-none\">Position Closed</code>: the position was closed."
+                "text": "Position Closed: the position was closed."
             },
             {
                 "style": "List",
-                "text": "<code class=\"language-none\">Take Profit</code>: the take profit target was hit."
+                "text": "Take Profit: the take profit target was hit."
             },
             {
                 "style": "List",
-                "text": "<code class=\"language-none\">Stop Loss</code>: the stop loss target was hit."
+                "text": "Stop Loss: the stop loss target was hit."
             },
             {
                 "style": "List",
-                "text": "<code class=\"language-none\">Closing Stage</code>: the current stage started closing because the Close Stage is opening."
+                "text": "Closing Stage: the current stage started closing because the Close Stage is opening."
             },
             {
                 "style": "Title",
@@ -4751,7 +4487,7 @@
             },
             {
                 "style": "Text",
-                "text": "The two possible values for the cycle node are <code class=\"language-none\">First</code> and <code class=\"language-none\">Second</code>."
+                "text": "The two possible values for the cycle node are First and Second."
             },
             {
                 "style": "Title",
@@ -4768,14 +4504,6 @@
             {
                 "style": "Text",
                 "text": "Select <i>Configure</i> on the menu to access the configuration."
-            },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-json\">"
-            },
-            {
-                "style": "Text",
-                "text": "</code\">"
             }
         ]
     },
@@ -5026,10 +4754,6 @@
                 "style": "Text",
                 "text": "Select <i>Configure Base Asset</i> on the menu to access the configuration."
             },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-json\">"
-            },
             {
                 "style": "Text",
                 "text": "{"
@@ -5051,20 +4775,16 @@
                 "text": "}"
             },
             {
-                "style": "Text",
-                "text": "</code\">"
+                "style": "List",
+                "text": "initialBalance is the amount of capital you wish to allocate to the trading system."
             },
             {
                 "style": "List",
-                "text": "<code class=\"language-none\">initialBalance</code> is the amount of capital you wish to allocate to the trading system."
+                "text": "minimumBalance is the threshold of accummulated losses that switches off the session; when your overall balance (balanceAssetA + balanceAssetB) drops to this value, all trading stops; think of the minimumBalance as a general safety switch."
             },
             {
                 "style": "List",
-                "text": "<code class=\"language-none\">minimumBalance</code> is the threshold of accummulated losses that switches off the session; when your overall balance (balanceAssetA + balanceAssetB) drops to this value, all trading stops; think of the <code class=\"language-none\">minimumBalance</code> as a general safety switch."
-            },
-            {
-                "style": "List",
-                "text": "<code class=\"language-none\">maximumBalance</code> is a similar concept as with the <code class=\"language-none\">minimumBalance<code class=\"language-none\"> but on the high side of the </code>initialBalance</code>."
+                "text": "maximumBalance is a similar concept as with the minimumBalance but on the high side of the initialBalance."
             }
         ]
     },
@@ -5182,10 +4902,6 @@
                 "style": "Text",
                 "text": "<H4>On Backtesting Sessions</H4>"
             },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-json\">"
-            },
             {
                 "style": "Text",
                 "text": "{"
@@ -5202,22 +4918,14 @@
                 "style": "Text",
                 "text": "}"
             },
-            {
-                "style": "Text",
-                "text": "</code\">"
-            },
             {
                 "style": "List",
-                "text": "<code class=\"language-none\">initialDatetime</code> is the datetime the session starts at."
+                "text": "initialDatetime is the datetime the session starts at."
             },
             {
                 "style": "Text",
                 "text": "<H4>On Paper Trading, Forward Testing and Live Trading Sessions</H4>"
             },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-json\">"
-            },
             {
                 "style": "Text",
                 "text": "{"
@@ -5240,11 +4948,7 @@
             },
             {
                 "style": "Text",
-                "text": "</code\">"
-            },
-            {
-                "style": "Text",
-                "text": "<i> <code class=\"language-none\">finalDatetime</code> is the datetime the session finishes at. If you don't set a </i>finalDatetime* at the level of the testing session or the trading system, then the session runs for one year."
+                "text": "<i> finalDatetime is the datetime the session finishes at. If you don't set a </i>finalDatetime* at the level of the testing session or the trading system, then the session runs for one year."
             },
             {
                 "style": "Text",
@@ -5256,11 +4960,11 @@
             },
             {
                 "style": "List",
-                "text": "<code class=\"language-none\">initialDatetime</code>, in combination with the <code class=\"language-none\">allowStartingFromThePast<code class=\"language-none\"> parameter, is a hack to allow a live session to start from a date in the past. If there is a valid </code>initialDatetime</code> and <code class=\"language-none\">allowStartingFromThePast</code> is <code class=\"language-none\">true<code class=\"language-none\">, then the live session effectively starts from the specified date in the past. If </code>allowStartingFromThePast</code> is <code class=\"language-none\">false</code> the <code class=\"language-none\">initialDatetime</code> is ignored and the session starts from the present time."
+                "text": "initialDatetime, in combination with the allowStartingFromThePast parameter, is a hack to allow a live session to start from a date in the past. If there is a valid initialDatetime and allowStartingFromThePast is true, then the live session effectively starts from the specified date in the past. If allowStartingFromThePast is false the initialDatetime is ignored and the session starts from the present time."
             },
             {
                 "style": "List",
-                "text": "<code class=\"language-none\">allowStartingFromThePast</code> may be <code class=\"language-none\">true<code class=\"language-none\"> or </code>false</code>."
+                "text": "allowStartingFromThePast may be true or false."
             }
         ]
     },
@@ -5274,7 +4978,7 @@
             },
             {
                 "style": "Text",
-                "text": "In the context of backtesting sessions, what time frame you decide to run the session depends on the trading system being tested. If the trading system makes decisions based on the 1-hour candle and above, then <code class=\"language-none\">01-hs</code> may be the best choice. However, if decisions are influenced by sub-hour candles then you should match the time frame accordingly."
+                "text": "In the context of backtesting sessions, what time frame you decide to run the session depends on the trading system being tested. If the trading system makes decisions based on the 1-hour candle and above, then 01-hs may be the best choice. However, if decisions are influenced by sub-hour candles then you should match the time frame accordingly."
             },
             {
                 "style": "Text",
@@ -5282,7 +4986,7 @@
             },
             {
                 "style": "Text",
-                "text": "In the context of live sessions, that is, paper trading, forward testing, and live trading, you should run the session on the <code class=\"language-none\">01-min</code> time frame so that the trading bot reacts fast when the price tags the take profit or stop loss targets. Remember that stop and take profit orders are not placed at the exchange after the take position event, that is, once you enter the position. Instead, the trading bot checks the current price upon each execution cycle and determines whether targets have been hit or not. If targets are hit, only then orders are placed. That is why running live trading sessions at the <code class=\"language-none\">01-min</code> time frame is recommended. Learn more about the management of take profit and stop loss targets."
+                "text": "In the context of live sessions, that is, paper trading, forward testing, and live trading, you should run the session on the 01-min time frame so that the trading bot reacts fast when the price tags the take profit or stop loss targets. Remember that stop and take profit orders are not placed at the exchange after the take position event, that is, once you enter the position. Instead, the trading bot checks the current price upon each execution cycle and determines whether targets have been hit or not. If targets are hit, only then orders are placed. That is why running live trading sessions at the 01-min time frame is recommended. Learn more about the management of take profit and stop loss targets."
             },
             {
                 "style": "Text",
@@ -5310,7 +5014,7 @@
             },
             {
                 "style": "Text",
-                "text": "Let's say it's <code class=\"language-none\">2020-06-11T11:39:30:00.000Z</code>, that is, 11 hours, 39 minutes and 30 seconds of June 11th, 2020."
+                "text": "Let's say it's 2020-06-11T11:39:30:00.000Z, that is, 11 hours, 39 minutes and 30 seconds of June 11th, 2020."
             },
             {
                 "style": "List",
@@ -5358,7 +5062,7 @@
             },
             {
                 "style": "Text",
-                "text": "This means that running the session (for this particular trading system) at the 30-minute time frame has higher probabilities of conditions evaluating 30-minute candles to be <code class=\"language-none\">true</code> during the session."
+                "text": "This means that running the session (for this particular trading system) at the 30-minute time frame has higher probabilities of conditions evaluating 30-minute candles to be true during the session."
             },
             {
                 "style": "Success",
@@ -5392,10 +5096,6 @@
                 "style": "Text",
                 "text": "Select <i>Configure Time Frame</i> on the menu to access the configuration."
             },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-js\">"
-            },
             {
                 "style": "Text",
                 "text": "{"
@@ -5408,17 +5108,9 @@
                 "style": "Text",
                 "text": "}"
             },
-            {
-                "style": "Text",
-                "text": "</code\">"
-            },
             {
                 "style": "List",
-                "text": "<code class=\"language-none\">value</code> is the setting for the time frame. You may use any of the values below."
-            },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-json\">"
+                "text": "value is the setting for the time frame. You may use any of the values below."
             },
             {
                 "style": "Text",
@@ -5460,18 +5152,10 @@
                 "style": "Text",
                 "text": "45-min"
             },
-            {
-                "style": "Text",
-                "text": "</code\">"
-            },
             {
                 "style": "Text",
                 "text": "Available options at larger time frames are:"
             },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-json\">"
-            },
             {
                 "style": "Text",
                 "text": "01-hs"
@@ -5503,10 +5187,6 @@
             {
                 "style": "Text",
                 "text": "24-hs"
-            },
-            {
-                "style": "Text",
-                "text": "</code\">"
             }
         ]
     },
@@ -5542,10 +5222,6 @@
                 "style": "Text",
                 "text": "Select <i>Configure</i> on the menu to access the configuration."
             },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-json\">"
-            },
             {
                 "style": "Text",
                 "text": "{"
@@ -5568,19 +5244,15 @@
             },
             {
                 "style": "Text",
-                "text": "</code\">"
+                "text": "<i> positionRate is the slippage value applied to the rate of all market orders throughout the position, expressed as a percentage (</i>i.e.:* 0.1 means 0.1%)."
             },
             {
                 "style": "Text",
-                "text": "<i> <code class=\"language-none\">positionRate</code> is the slippage value applied to the rate of all market orders throughout the position, expressed as a percentage (</i>i.e.:* 0.1 means 0.1%)."
-            },
-            {
-                "style": "Text",
-                "text": "<i> <code class=\"language-none\">stopLoss</code> is the slippage value applied to the stop loss target defined by the formulas of each stop loss phase in the manage stage of the trading system, expressed as a percentage (</i>i.e.:<i> 0.2 means 0.2%). The slippage value is applied to the value resulting from the corresponding stop loss formula, and the actual stop loss target is the resulting number. For example, if the stop loss formula results in <code class=\"language-none\">1000<code class=\"language-none\"> and the </code>stopLoss</code> slippage value is <code class=\"language-none\">0.2</code>, then the resulting stop loss target is  <code class=\"language-none\">1000<code class=\"language-none\"> <b>&plusmn;</b> </code>1000 </i> 0.2 / 100</code>. Read below for an explanation on when the slippage is added or subtracted."
+                "text": "<i> stopLoss is the slippage value applied to the stop loss target defined by the formulas of each stop loss phase in the manage stage of the trading system, expressed as a percentage (</i>i.e.:<i> 0.2 means 0.2%). The slippage value is applied to the value resulting from the corresponding stop loss formula, and the actual stop loss target is the resulting number. For example, if the stop loss formula results in 1000 and the stopLoss slippage value is 0.2, then the resulting stop loss target is  1000 <b>&plusmn;</b> 1000 </i> 0.2 / 100. Read below for an explanation on when the slippage is added or subtracted."
             },
             {
                 "style": "List",
-                "text": "<code class=\"language-none\">takeProfit</code> works similarly as the <code class=\"language-none\">stopLoss</code> setting, but affecting the take profit target instead of the stop loss target."
+                "text": "takeProfit works similarly as the stopLoss setting, but affecting the take profit target instead of the stop loss target."
             },
             {
                 "style": "Text",
@@ -5636,10 +5308,6 @@
                 "style": "Text",
                 "text": "Select <i>Configure Fee Structure</i> on the menu to access the configuration."
             },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-json\">"
-            },
             {
                 "style": "Text",
                 "text": "{"
@@ -5657,16 +5325,12 @@
                 "text": "}"
             },
             {
-                "style": "Text",
-                "text": "</code\">"
+                "style": "List",
+                "text": "maker is the setting for the fee the exchange charges when an order adds liquidity to the market, such as with limit orders."
             },
             {
                 "style": "List",
-                "text": "<code class=\"language-none\">maker</code> is the setting for the fee the exchange charges when an order adds liquidity to the market, such as with limit orders."
-            },
-            {
-                "style": "List",
-                "text": "<code class=\"language-none\">taker</code> is the setting for the fee the exchange charges when an order takes liquidity from the market, such as with market or instant orders."
+                "text": "taker is the setting for the fee the exchange charges when an order takes liquidity from the market, such as with market or instant orders."
             },
             {
                 "style": "Note",
@@ -5706,10 +5370,6 @@
                 "style": "Text",
                 "text": "Select <i>Configure Slippage</i> on the menu to access the configuration."
             },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-json\">"
-            },
             {
                 "style": "Text",
                 "text": "{"
@@ -5727,16 +5387,12 @@
                 "text": "}"
             },
             {
-                "style": "Text",
-                "text": "</code\">"
+                "style": "List",
+                "text": "strategy determines whether to take a snapshot at the trigger on event or not; possible values are true or false."
             },
             {
                 "style": "List",
-                "text": "<code class=\"language-none\">strategy</code> determines whether to take a snapshot at the trigger on event or not; possible values are <code class=\"language-none\">true<code class=\"language-none\"> or </code>false</code>."
-            },
-            {
-                "style": "List",
-                "text": "<code class=\"language-none\">position</code> determines whether to take a snapshot at the take position event or not; possible values are <code class=\"language-none\">true<code class=\"language-none\"> or </code>false</code>."
+                "text": "position determines whether to take a snapshot at the take position event or not; possible values are true or false."
             }
         ]
     },
@@ -5768,10 +5424,6 @@
                 "style": "Text",
                 "text": "Select <i>Configure Slippage</i> on the menu to access the configuration."
             },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-json\">"
-            },
             {
                 "style": "Text",
                 "text": "{"
@@ -5789,16 +5441,12 @@
                 "text": "}"
             },
             {
-                "style": "Text",
-                "text": "</code\">"
+                "style": "List",
+                "text": "date determines whether the date is shown in the progress notice below the trading process instance node; possible values are true or false."
             },
             {
                 "style": "List",
-                "text": "<code class=\"language-none\">date</code> determines whether the date is shown in the progress notice below the trading process instance node; possible values are <code class=\"language-none\">true<code class=\"language-none\"> or </code>false</code>."
-            },
-            {
-                "style": "List",
-                "text": "<code class=\"language-none\">candleIndex</code> determines whether the index of the candle is shown in the progress notice below the trading process instance node; possible values are <code class=\"language-none\">true<code class=\"language-none\"> or </code>false</code>."
+                "text": "candleIndex determines whether the index of the candle is shown in the progress notice below the trading process instance node; possible values are true or false."
             }
         ]
     },
@@ -5815,7 +5463,7 @@
             },
             {
                 "style": "Text",
-                "text": "Parameters defined in the configuration file of these node become available to trading systems using the following path: <code class=\"language-none\">sessionParameters.userDefinedParameters.config.parameterName</code>."
+                "text": "Parameters defined in the configuration file of these node become available to trading systems using the following path: sessionParameters.userDefinedParameters.config.parameterName."
             },
             {
                 "style": "Text",
@@ -5837,10 +5485,6 @@
                 "style": "Text",
                 "text": "Select <i>Configure Slippage</i> on the menu to access the configuration."
             },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-json\">"
-            },
             {
                 "style": "Text",
                 "text": "{"
@@ -5857,13 +5501,9 @@
                 "style": "Text",
                 "text": "}"
             },
-            {
-                "style": "Text",
-                "text": "</code\">"
-            },
             {
                 "style": "List",
-                "text": "<code class=\"language-none\">param1Name</code> is an example of a name. You may change the names of the parameters as required. Values including text strings go between quotation marks, while numeric values, without. You may define as many parameters as you wish; simply separate them with a comma to keep a valid JSON format for the configuration file."
+                "text": "param1Name is an example of a name. You may change the names of the parameters as required. Values including text strings go between quotation marks, while numeric values, without. You may define as many parameters as you wish; simply separate them with a comma to keep a valid JSON format for the configuration file."
             }
         ]
     },
@@ -5881,7 +5521,7 @@
             },
             {
                 "style": "Text",
-                "text": "When a time frames filter is set up, a <code class=\"language-none\">Time.Frames.json</code> file is created by the indicator process in the corresponding output folder. This file is read by others&mdash;such as the charting system&mdash;to get the information regarding which time frames are available and which are not, to avoid reporting errors."
+                "text": "When a time frames filter is set up, a Time.Frames.json file is created by the indicator process in the corresponding output folder. This file is read by others&mdash;such as the charting system&mdash;to get the information regarding which time frames are available and which are not, to avoid reporting errors."
             },
             {
                 "style": "Important",
@@ -5907,10 +5547,6 @@
                 "style": "Text",
                 "text": "Select <i>Configure</i> on the menu to access the configuration."
             },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-json\">"
-            },
             {
                 "style": "Text",
                 "text": "{"
@@ -5929,15 +5565,11 @@
             },
             {
                 "style": "Text",
-                "text": "</code\">"
+                "text": "<i> dailyTimeFrames features the time frames corresponding to the </i>daily files* type of data structure; in practical terms, the time frames below one hour."
             },
             {
                 "style": "Text",
-                "text": "<i> <code class=\"language-none\">dailyTimeFrames</code> features the time frames corresponding to the </i>daily files* type of data structure; in practical terms, the time frames below one hour."
-            },
-            {
-                "style": "Text",
-                "text": "<i> <code class=\"language-none\">marketTimeFrames</code> features the time frames corresponding to the </i>market files* type of data structure; in practical terms, the time frames of one hour and above."
+                "text": "<i> marketTimeFrames features the time frames corresponding to the </i>market files* type of data structure; in practical terms, the time frames of one hour and above."
             },
             {
                 "style": "Text",
@@ -5977,10 +5609,6 @@
                 "style": "Text",
                 "text": "Select <i>Configure Session</i> on the menu to access the configuration."
             },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-json\">"
-            },
             {
                 "style": "Text",
                 "text": "{"
@@ -5993,13 +5621,9 @@
                 "style": "Text",
                 "text": "}"
             },
-            {
-                "style": "Text",
-                "text": "</code\">"
-            },
             {
                 "style": "List",
-                "text": "<code class=\"language-none\">folderName</code> allows you to set a significant name to the folder in which the data products&mdash;and logs&mdash;generated by the session are stored. If left blank, the system names the folders with the session id. This may be handy when you intend to consult the raw data generated by the session, as, otherwise, the folder would be hard to identify."
+                "text": "folderName allows you to set a significant name to the folder in which the data products&mdash;and logs&mdash;generated by the session are stored. If left blank, the system names the folders with the session id. This may be handy when you intend to consult the raw data generated by the session, as, otherwise, the folder would be hard to identify."
             },
             {
                 "style": "Title",
@@ -6051,10 +5675,6 @@
                 "style": "Text",
                 "text": "Select <i>Configure Session</i> on the menu to access the configuration."
             },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-json\">"
-            },
             {
                 "style": "Text",
                 "text": "{"
@@ -6072,16 +5692,12 @@
                 "text": "}"
             },
             {
-                "style": "Text",
-                "text": "</code\">"
+                "style": "List",
+                "text": "folderName allows you to set a significant name to the folder in which the data products&mdash;and logs&mdash;generated by the session are stored. If left blank, the system names the folders with the session id. This may be handy when you intend to consult the raw data generated by the session, as, otherwise, the folder would be hard to identify."
             },
             {
                 "style": "List",
-                "text": "<code class=\"language-none\">folderName</code> allows you to set a significant name to the folder in which the data products&mdash;and logs&mdash;generated by the session are stored. If left blank, the system names the folders with the session id. This may be handy when you intend to consult the raw data generated by the session, as, otherwise, the folder would be hard to identify."
-            },
-            {
-                "style": "List",
-                "text": "<code class=\"language-none\">balancePercentage</code> is a number defining the percentage of the initialBalance specified in the base aset configuration that will be used for trading. For instance, <code class=\"language-none\">\"balancePercentage\": 1<code class=\"language-none\"> means that 1% of your balance will be made available. Just like the </code>initialBalance</code> is scaled down, the <code class=\"language-none\">minimumBalance</code> and <code class=\"language-none\">maximumBalance</code> are also scaled down accordingly (see base asset)."
+                "text": "balancePercentage is a number defining the percentage of the initialBalance specified in the base aset configuration that will be used for trading. For instance, \"balancePercentage\": 1 means that 1% of your balance will be made available. Just like the initialBalance is scaled down, the minimumBalance and maximumBalance are also scaled down accordingly (see base asset)."
             },
             {
                 "style": "Text",
@@ -6187,10 +5803,6 @@
                 "style": "Text",
                 "text": "Select <i>Configure Session</i> on the menu to access the configuration."
             },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-json\">"
-            },
             {
                 "style": "Text",
                 "text": "{"
@@ -6203,13 +5815,9 @@
                 "style": "Text",
                 "text": "}"
             },
-            {
-                "style": "Text",
-                "text": "</code\">"
-            },
             {
                 "style": "List",
-                "text": "<code class=\"language-none\">folderName</code> allows you to set a significant name to the folder in which the data products&mdash;and logs&mdash;generated by the session are stored. If left blank, the system names the folders with the session id. This may be handy when you intend to consult the raw data generated by the session, as, otherwise, the folder would be hard to identify."
+                "text": "folderName allows you to set a significant name to the folder in which the data products&mdash;and logs&mdash;generated by the session are stored. If left blank, the system names the folders with the session id. This may be handy when you intend to consult the raw data generated by the session, as, otherwise, the folder would be hard to identify."
             },
             {
                 "style": "Title",
@@ -6260,10 +5868,6 @@
                 "style": "Text",
                 "text": "Select <i>Configure Sensor Bot Instance</i> on the menu to access the configuration."
             },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-json\">"
-            },
             {
                 "style": "Text",
                 "text": "  {"
@@ -6278,11 +5882,7 @@
             },
             {
                 "style": "Text",
-                "text": "</code\">"
-            },
-            {
-                "style": "Text",
-                "text": "<i> <code class=\"language-none\">startDate</code> is the </i>desired starting date* of the data product the sensor bot instance builds, in the <code class=\"language-none\">YYYY-MM-DD<code class=\"language-none\"> format. The sensor bot instance queries its data source for data starting on the configured </code>startDate</code>."
+                "text": "<i> startDate is the </i>desired starting date* of the data product the sensor bot instance builds, in the YYYY-MM-DD format. The sensor bot instance queries its data source for data starting on the configured startDate."
             },
             {
                 "style": "Text",
@@ -6290,7 +5890,7 @@
             },
             {
                 "style": "Text",
-                "text": "  * In the case the <code class=\"language-none\">startDate</code> is changed after the sensor bot has started building a data product, either for an earlier or later date, the sensor re-evaluates the feasibility of starting at the new date. The actual date may or may not change; regardless, the sensor bot discards the existing data product and starts over from the newly discovered date. In other words, if the <code class=\"language-none\">startDate</code> is changed, the sensor bot starts over."
+                "text": "  * In the case the startDate is changed after the sensor bot has started building a data product, either for an earlier or later date, the sensor re-evaluates the feasibility of starting at the new date. The actual date may or may not change; regardless, the sensor bot discards the existing data product and starts over from the newly discovered date. In other words, if the startDate is changed, the sensor bot starts over."
             },
             {
                 "style": "Text",
@@ -6372,10 +5972,6 @@
                 "style": "Text",
                 "text": "Select <i>Configure Data Mine</i> on the menu to access the configuration."
             },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-json\">"
-            },
             {
                 "style": "Text",
                 "text": "{"
@@ -6388,13 +5984,9 @@
                 "style": "Text",
                 "text": "}"
             },
-            {
-                "style": "Text",
-                "text": "</code\">"
-            },
             {
                 "style": "List",
-                "text": "<code class=\"language-none\">codeName</code> is the name of the data mine as used within the code of the system."
+                "text": "codeName is the name of the data mine as used within the code of the system."
             }
         ]
     },
@@ -6433,14 +6025,6 @@
             {
                 "style": "Text",
                 "text": "Select <i>Configure</i> on the menu to access the configuration."
-            },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-json\">"
-            },
-            {
-                "style": "Text",
-                "text": "</code\">"
             }
         ]
     },
@@ -6475,10 +6059,6 @@
                 "style": "Text",
                 "text": "Select <i>Configure Bot</i> on the menu to access the configuration."
             },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-json\">"
-            },
             {
                 "style": "Text",
                 "text": "{"
@@ -6495,13 +6075,9 @@
                 "style": "Text",
                 "text": "}"
             },
-            {
-                "style": "Text",
-                "text": "</code\">"
-            },
             {
                 "style": "List",
-                "text": "<code class=\"language-none\">codeName</code> is the name of the bot as used within the code of the system."
+                "text": "codeName is the name of the bot as used within the code of the system."
             }
         ]
     },
@@ -6549,10 +6125,6 @@
                 "style": "Text",
                 "text": "<b>Multi-Period-Market:</b>"
             },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-json\">"
-            },
             {
                 "style": "Text",
                 "text": "  {"
@@ -6585,18 +6157,10 @@
                 "style": "Text",
                 "text": "  }"
             },
-            {
-                "style": "Text",
-                "text": "</code\">"
-            },
             {
                 "style": "Text",
                 "text": "<b>Multi-Period-Daily:</b>"
             },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-json\">"
-            },
             {
                 "style": "Text",
                 "text": "  {"
@@ -6629,13 +6193,9 @@
                 "style": "Text",
                 "text": "  }"
             },
-            {
-                "style": "Text",
-                "text": "</code\">"
-            },
             {
                 "style": "List",
-                "text": "<code class=\"language-none\">codeName</code> is the name of the process as used within the code of the system."
+                "text": "codeName is the name of the process as used within the code of the system."
             }
         ]
     },
@@ -6727,10 +6287,6 @@
                 "style": "Text",
                 "text": "Select <i>Configure Status Dependency</i> on the menu to access the configuration."
             },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-json\">"
-            },
             {
                 "style": "Text",
                 "text": "{"
@@ -6743,13 +6299,9 @@
                 "style": "Text",
                 "text": "}"
             },
-            {
-                "style": "Text",
-                "text": "</code\">"
-            },
             {
                 "style": "List",
-                "text": "<code class=\"language-none\">mainUtility</code> determines the type of status dependency, with possible values being <code class=\"language-none\">Self Reference<code class=\"language-none\">, </code>Market Starting Point</code>, or <code class=\"language-none\">Market Ending Point</code>."
+                "text": "mainUtility determines the type of status dependency, with possible values being Self Reference, Market Starting Point, or Market Ending Point."
             }
         ]
     },
@@ -6878,14 +6430,6 @@
             {
                 "style": "Text",
                 "text": "Select <i>Configure</i> on the menu to access the configuration."
-            },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-json\">"
-            },
-            {
-                "style": "Text",
-                "text": "</code\">"
             }
         ]
     },
@@ -6947,10 +6491,6 @@
                 "style": "Text",
                 "text": "Select <i>Configure Product</i> on the menu to access the configuration."
             },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-json\">"
-            },
             {
                 "style": "Text",
                 "text": "{"
@@ -6972,16 +6512,12 @@
                 "text": "}"
             },
             {
-                "style": "Text",
-                "text": "</code\">"
+                "style": "List",
+                "text": "codeName is the name of the product as it is used within the bot's code."
             },
             {
                 "style": "List",
-                "text": "<code class=\"language-none\">codeName</code> is the name of the product as it is used within the bot's code."
-            },
-            {
-                "style": "List",
-                "text": "<code class=\"language-none\">pluralVariableName</code> is the plural form of the variable."
+                "text": "pluralVariableName is the plural form of the variable."
             }
         ]
     },
@@ -7017,10 +6553,6 @@
                 "style": "Text",
                 "text": "<b>Multi-Period-Market:</b>"
             },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-json\">"
-            },
             {
                 "style": "Text",
                 "text": "{"
@@ -7065,18 +6597,10 @@
                 "style": "Text",
                 "text": "}"
             },
-            {
-                "style": "Text",
-                "text": "</code\">"
-            },
             {
                 "style": "Text",
                 "text": "<b>Multi-Period-Daily:</b>"
             },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-json\">"
-            },
             {
                 "style": "Text",
                 "text": "{"
@@ -7138,32 +6662,28 @@
                 "text": "}"
             },
             {
-                "style": "Text",
-                "text": "</code\">"
+                "style": "List",
+                "text": "codeName is the name of the dataset as used within the code."
             },
             {
                 "style": "List",
-                "text": "<code class=\"language-none\">codeName</code> is the name of the dataset as used within the code."
+                "text": "type refers to the type of dataset; possible values are Market Files and Daily Files."
             },
             {
                 "style": "List",
-                "text": "<code class=\"language-none\">type</code> refers to the type of dataset; possible values are <code class=\"language-none\">Market Files<code class=\"language-none\"> and </code>Daily Files</code>."
+                "text": "validTimeFrames refers to the time frames handled by the dataset."
             },
             {
                 "style": "List",
-                "text": "<code class=\"language-none\">validTimeFrames</code> refers to the time frames handled by the dataset."
+                "text": "filePath sets the path on which files are stored; the proper name of the data mine, the bot and the product need to be entered."
             },
             {
                 "style": "List",
-                "text": "<code class=\"language-none\">filePath</code> sets the path on which files are stored; the proper name of the data mine, the bot and the product need to be entered."
+                "text": "fileName sets the name of the files that constitute the dataset."
             },
             {
                 "style": "List",
-                "text": "<code class=\"language-none\">fileName</code> sets the name of the files that constitute the dataset."
-            },
-            {
-                "style": "List",
-                "text": "<code class=\"language-none\">timeFrames</code> sets the name and path of the file indicating which time frames shall be filtered when the users sets a time frames filter."
+                "text": "timeFrames sets the name and path of the file indicating which time frames shall be filtered when the users sets a time frames filter."
             }
         ]
     },
@@ -7199,10 +6719,6 @@
                 "style": "Text",
                 "text": "Select <i>Configure Bot</i> on the menu to access the configuration."
             },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-json\">"
-            },
             {
                 "style": "Text",
                 "text": "{"
@@ -7215,13 +6731,9 @@
                 "style": "Text",
                 "text": "}"
             },
-            {
-                "style": "Text",
-                "text": "</code\">"
-            },
             {
                 "style": "List",
-                "text": "<code class=\"language-none\">codeName</code> is the name of the bot as used within the code of the system."
+                "text": "codeName is the name of the bot as used within the code of the system."
             }
         ]
     },
@@ -7399,10 +6911,6 @@
                 "style": "Text",
                 "text": "Select <i>Configure Property</i> on the menu to access the configuration."
             },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-js\">"
-            },
             {
                 "style": "Text",
                 "text": "{"
@@ -7423,17 +6931,13 @@
                 "style": "Text",
                 "text": "}"
             },
-            {
-                "style": "Text",
-                "text": "</code\">"
-            },
             {
                 "style": "List",
-                "text": "<code class=\"language-none\">codeName</code> is the name of the record as it is used in the bot's code."
+                "text": "codeName is the name of the record as it is used in the bot's code."
             },
             {
                 "style": "Text",
-                "text": "<i> <code class=\"language-none\">isCalculated</code> determines if the field is stored in the dataset or if, instead, is calculated at a later stage. A value </i>true* means that the record is not stored. In the case <code class=\"language-none\">isCaculated</code> is not defined in the configuration, it is assumed to be false."
+                "text": "<i> isCalculated determines if the field is stored in the dataset or if, instead, is calculated at a later stage. A value </i>true* means that the record is not stored. In the case isCaculated is not defined in the configuration, it is assumed to be false."
             },
             {
                 "style": "Text",
@@ -7455,15 +6959,151 @@
             },
             {
                 "style": "Text",
-                "text": "In the context of the trading engine, formulas are used to create user defined statistics."
+                "text": "In the context of a trading system, formulas are used to determine the values for several properties, such as the target rate, target size, managed stop loss, managed take profit, and so on."
             },
             {
                 "style": "Text",
-                "text": "Formulas may use indicators and object properties made available by the trading engine. They must evaluate to a number."
+                "text": "Formulas may use indicators and trading engine properties. The main difference between writing a formula and writing a condition is that while conditions must evaluate to true or false, formulas must evaluate to a number."
+            },
+            {
+                "style": "Text",
+                "text": "<b>A simple math example:</b>"
+            },
+            {
+                "style": "Text",
+                "text": "This simple formula may be used to define an initial take profit target 3% above the rate at which the position was taken."
+            },
+            {
+                "style": "Text",
+                "text": "tradingEngine.current.position.entryTargetRate.value * 1.03"
             },
             {
                 "style": "Note",
-                "text": "To learn how to write formulas, see syntax overview."
+                "text": "You may use any variable made available by the trading engine, as explained on the accessing runtime data page."
+            },
+            {
+                "style": "Text",
+                "text": "<b>A simple JavaScript example:</b>"
+            },
+            {
+                "style": "Text",
+                "text": "A bit of very basic JavaScript, introducing conditional statements, allows more intelligence. For example, in this case, we ask if the proposed formula results in a number greater than the current stop loss value; if it does, then the proposed formula is used; if not, then the current stop loss value is left as is."
+            },
+            {
+                "style": "Text",
+                "text": "This is&mdash;basically&mdash;a trailing stop loss 2% below the moving average that may go higher if the moving average goes up, but it may never come down&mdash;thanks to the use of the IF ELSE clause."
+            },
+            {
+                "style": "Text",
+                "text": "if (chart.at01hs.bollingerBand.movingAverage * 0.98 > tradingEngine.current.position.stopLoss.value)"
+            },
+            {
+                "style": "Text",
+                "text": "   {chart.at01hs.bollingerBand.movingAverage * 0.98}"
+            },
+            {
+                "style": "Text",
+                "text": "   else"
+            },
+            {
+                "style": "Text",
+                "text": "   {tradingEngine.current.position.stopLoss.value}"
+            },
+            {
+                "style": "Text",
+                "text": "<b>For developers:</b>"
+            },
+            {
+                "style": "Text",
+                "text": "To build more complex logic within a formula, create a function that implements the logic and returns a numerical value, and then call the function:"
+            },
+            {
+                "style": "Text",
+                "text": "function orderRate() {"
+            },
+            {
+                "style": "Text",
+                "text": "    const ORDER_STEP_NUMBER = 1    // Secuential step number, starting with 1 from the closest to the price."
+            },
+            {
+                "style": "Text",
+                "text": "    const BUY_SELL_SIGN = -1       // 1 for buy orders, -1 for sell orders."
+            },
+            {
+                "style": "Text",
+                "text": "    const STEP_SEPARATION = 0.15   // % of separation of stair steps between them."
+            },
+            {
+                "style": "Text",
+                "text": "    const BASE_FACTOR = 0.2        // % above or below bollinger band without bias."
+            },
+            {
+                "style": "Text",
+                "text": "    const BIAS_FACTOR = 0.3        // % to move the whole stair of orders up or down depending on the bias."
+            },
+            {
+                "style": "Text",
+                "text": "    const BAND_RATE = chart.at01min.bollingerBand.lowerBand    //  Upper Bollinger Band for sell orders, and Lower for buy orders."
+            },
+            {
+                "style": "Text",
+                "text": "    let inbalance = tradingEngine.current.episode.episodeBaseAsset.beginBalance.value - tradingEngine.current.episode.episodeBaseAsset.balance.value"
+            },
+            {
+                "style": "Text",
+                "text": "    let BIAS_SIGN"
+            },
+            {
+                "style": "Text",
+                "text": "    if (inbalance === 0) {"
+            },
+            {
+                "style": "Text",
+                "text": "        BIAS_SIGN = 0"
+            },
+            {
+                "style": "Text",
+                "text": "    }"
+            },
+            {
+                "style": "Text",
+                "text": "    if (inbalance < 0) {"
+            },
+            {
+                "style": "Text",
+                "text": "        BIAS_SIGN = + 1"
+            },
+            {
+                "style": "Text",
+                "text": "    }"
+            },
+            {
+                "style": "Text",
+                "text": "    if (inbalance > 0) {"
+            },
+            {
+                "style": "Text",
+                "text": "        BIAS_SIGN = - 1"
+            },
+            {
+                "style": "Text",
+                "text": "    }"
+            },
+            {
+                "style": "Text",
+                "text": "    let rate = BAND_RATE + BUY_SELL_SIGN <i> BAND_RATE </i> (BASE_FACTOR + ORDER_STEP_NUMBER <i> STEP_SEPARATION + BIAS_SIGN </i> BIAS_FACTOR) / 100"
+            },
+            {
+                "style": "Text",
+                "text": "    return rate"
+            },
+            {
+                "style": "Text",
+                "text": "}"
+            },
+            {
+                "style": "Text",
+                "text": "orderRate()"
             },
             {
                 "style": "Title",
@@ -7471,7 +7111,7 @@
             },
             {
                 "style": "Text",
-                "text": "To add the formula node, select <i>Add Missing Items</i> on the parent node menu."
+                "text": "To add a formula, select <i>Add Formula</i> on the corresponding parent node menu."
             }
         ]
     },
@@ -7524,10 +7164,6 @@
                 "style": "Text",
                 "text": "This is an example of a procedure loop code snippet, in particular, the code that initializes the array used in the calculation of the Popular SMAs product of the Simple Moving Average (SMA) indicator."
             },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-js\">"
-            },
             {
                 "style": "Text",
                 "text": "/<i> Initialization Code. </i>/"
@@ -7536,10 +7172,6 @@
                 "style": "Text",
                 "text": "variable.last200 = []"
             },
-            {
-                "style": "Text",
-                "text": "</code\">"
-            },
             {
                 "style": "Title",
                 "text": "Adding a Procedure Initialization node"
@@ -7633,14 +7265,6 @@
             {
                 "style": "Text",
                 "text": "Select <i>Configure</i> on the menu to access the configuration."
-            },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-json\">"
-            },
-            {
-                "style": "Text",
-                "text": "</code\">"
             }
         ]
     },
@@ -7691,10 +7315,6 @@
                 "style": "Text",
                 "text": "Select <i>Configure Plotter</i> on the menu to access the configuration."
             },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-json\">"
-            },
             {
                 "style": "Text",
                 "text": "{"
@@ -7707,13 +7327,9 @@
                 "style": "Text",
                 "text": "}"
             },
-            {
-                "style": "Text",
-                "text": "</code\">"
-            },
             {
                 "style": "List",
-                "text": "<code class=\"language-none\">codeName</code> is the name of the plotter as it is used within the bot's code."
+                "text": "codeName is the name of the plotter as it is used within the bot's code."
             }
         ]
     },
@@ -8127,7 +7743,7 @@
             },
             {
                 "style": "Text",
-                "text": "To switch from one phase to the next phase in the sequence, the next phase event is used. When the situation described in the next phase event validates <code class=\"language-none\">true</code>, the switch occurs and the next phase becomes the active phase."
+                "text": "To switch from one phase to the next phase in the sequence, the next phase event is used. When the situation described in the next phase event validates true, the switch occurs and the next phase becomes the active phase."
             },
             {
                 "style": "Text",
@@ -8219,7 +7835,7 @@
             },
             {
                 "style": "Note",
-                "text": "A move-to-phase event must reference a phase node. When the situation in the move-to-phase event evaluates <code class=\"language-none\">true</code> the management shifts to the referenced phase."
+                "text": "A move-to-phase event must reference a phase node. When the situation in the move-to-phase event evaluates true the management shifts to the referenced phase."
             },
             {
                 "style": "Title",
@@ -8313,53 +7929,29 @@
                 "style": "Text",
                 "text": "If you are trading the whole balance assigned to the trading system on each position, then your target size will look like this:"
             },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-none\">"
-            },
             {
                 "style": "Text",
                 "text": "tradingEngine.current.episode.episodeBaseAsset.balance.value"
             },
-            {
-                "style": "Text",
-                "text": "</code>"
-            },
             {
                 "style": "Text",
                 "text": "... or..."
             },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-none\">"
-            },
             {
                 "style": "Text",
                 "text": "tradingEngine.current.episode.episodeQuotedAsset.balance.value"
             },
-            {
-                "style": "Text",
-                "text": "</code>"
-            },
             {
                 "style": "Text",
                 "text": "If you are not trading the entire balance on each position, then you may define the target size as a percentage of the balances, or in any other way you may see fit. For such cases, the following formula may be  of use for the close stage target size:"
             },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-none\">"
-            },
             {
                 "style": "Text",
                 "text": "tradingEngine.current.strategyOpenStage.stageBaseAsset.sizeFilled.value - tradingEngine.current.strategyOpenStage.stageBaseAsset.feesPaid.value"
             },
             {
                 "style": "Text",
-                "text": "</code>"
-            },
-            {
-                "style": "Text",
-                "text": "Of course, you may need to adjust the above to use <code class=\"language-none\">stageBaseAsset</code> or <code class=\"language-none\">stageQuotedAsset</code>, as required. In short, the formula returns the amount of the asset obtained by the transactions triggered during the open stage, minus the fees (and slippage, which is already subtracted from the size filled)."
+                "text": "Of course, you may need to adjust the above to use stageBaseAsset or stageQuotedAsset, as required. In short, the formula returns the amount of the asset obtained by the transactions triggered during the open stage, minus the fees (and slippage, which is already subtracted from the size filled)."
             },
             {
                 "style": "Title",
@@ -8443,7 +8035,7 @@
             },
             {
                 "style": "Text",
-                "text": "For example, <code class=\"language-none\">tradingEngine.current.position.entryTargetRate.value</code> or <code class=\"language-none\">tradingEngine.current.position.exitTargetRate.value</code>."
+                "text": "For example, tradingEngine.current.position.entryTargetRate.value or tradingEngine.current.position.exitTargetRate.value."
             },
             {
                 "style": "Text",
@@ -8459,11 +8051,11 @@
             },
             {
                 "style": "Text",
-                "text": "The horizontal segment marks the target rate defined at the open stage. If you are using market orders to take the position, then using <code class=\"language-none\">tradingEngine.current.episode.candle.close.value</code> may offer a good representation of the rate of market orders. If you are using limit orders, then you may decide at which rate you wish to take the position, and the horizontal segment of the triangle will match the chosen rate."
+                "text": "The horizontal segment marks the target rate defined at the open stage. If you are using market orders to take the position, then using tradingEngine.current.episode.candle.close.value may offer a good representation of the rate of market orders. If you are using limit orders, then you may decide at which rate you wish to take the position, and the horizontal segment of the triangle will match the chosen rate."
             },
             {
                 "style": "Text",
-                "text": "The third vertex of the triangle points to a <code class=\"language-none\">[datetime, rate]</code> coordinate. The <code class=\"language-none\">datetime<code class=\"language-none\"> is given by the candle on which the manage stage closes, that is, the candle at which the stop loss or take profit targets are hit. The </code>rate</code> portion of the coordinate is given by the target rate defined in the close stage."
+                "text": "The third vertex of the triangle points to a [datetime, rate] coordinate. The datetime is given by the candle on which the manage stage closes, that is, the candle at which the stop loss or take profit targets are hit. The rate portion of the coordinate is given by the target rate defined in the close stage."
             },
             {
                 "style": "Text",
@@ -8491,16 +8083,12 @@
             },
             {
                 "style": "Text",
-                "text": "The difference in rate between the moment in time the target is hit and the time the 1-hour candle closes may be significant. As a result, if the close stage target rate is defined as <code class=\"language-none\">tradingEngine.current.episode.candle.close.value</code>, the resulting simulation may show significant slippage, and diverge from what the trade would look like if running on the 1-minute time frame, like you would when trading live."
+                "text": "The difference in rate between the moment in time the target is hit and the time the 1-hour candle closes may be significant. As a result, if the close stage target rate is defined as tradingEngine.current.episode.candle.close.value, the resulting simulation may show significant slippage, and diverge from what the trade would look like if running on the 1-minute time frame, like you would when trading live."
             },
             {
                 "style": "Text",
                 "text": "To solve the above issue, you may use a more ellaborate formula for the target rate in the close stage:"
             },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-js\">"
-            },
             {
                 "style": "Text",
                 "text": "targetRate()"
@@ -8569,10 +8157,6 @@
                 "style": "Text",
                 "text": "}"
             },
-            {
-                "style": "Text",
-                "text": "</code\">"
-            },
             {
                 "style": "Text",
                 "text": "This formula discriminates among three possible outcomes:"
@@ -8711,10 +8295,6 @@
                 "style": "Text",
                 "text": "To configure the execution algorithm node, select <i>Configure</i> on the menu."
             },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-json\">"
-            },
             {
                 "style": "Text",
                 "text": "{"
@@ -8727,13 +8307,9 @@
                 "style": "Text",
                 "text": "}"
             },
-            {
-                "style": "Text",
-                "text": "</code\">"
-            },
             {
                 "style": "List",
-                "text": "<code class=\"language-none\">percentageOfStageTargetSize</code> is the definition of how much of the target size of the whole stage will be handled by the one specific execution algorithm, expressed as a percentage of the total target size. Posible values are real numbers between <code class=\"language-none\">0<code class=\"language-none\"> and </code>100</code>, including the extremes. If you set the value to <code class=\"language-none\">0</code>, the algorithm will not be executed."
+                "text": "percentageOfStageTargetSize is the definition of how much of the target size of the whole stage will be handled by the one specific execution algorithm, expressed as a percentage of the total target size. Posible values are real numbers between 0 and 100, including the extremes. If you set the value to 0, the algorithm will not be executed."
             }
         ]
     },
@@ -8775,16 +8351,12 @@
             },
             {
                 "style": "Text",
-                "text": "<code class=\"language-none\">algorithmSize = targetSize * percentageOfStageTargetSize / 100</code>"
+                "text": "algorithmSize = targetSize * percentageOfStageTargetSize / 100"
             },
             {
                 "style": "Text",
                 "text": "<i>The actual code:</i>"
             },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-js\">"
-            },
             {
                 "style": "Text",
                 "text": "let algorithmSizeInBaseAsset = tradingEngineStage.stageBaseAsset.targetSize.value * executionAlgorithm.config.percentageOfStageTargetSize / 100"
@@ -8793,10 +8365,6 @@
                 "style": "Text",
                 "text": "let algorithmSizeInQuotedAsset = tradingEngineStage.stageQuotedAsset.targetSize.value * executionAlgorithm.config.percentageOfStageTargetSize / 100"
             },
-            {
-                "style": "Text",
-                "text": "</code\">"
-            },
             {
                 "style": "Text",
                 "text": "Similarly, the size of an order is defined as a percentage of the size that the particular algorithm is allowed to execute <i>(see the configuration)</i>."
@@ -8807,24 +8375,16 @@
             },
             {
                 "style": "Text",
-                "text": "<code class=\"language-none\">orderSize = algorithmSize * percentageOfAlgorithmSize / 100</code>"
+                "text": "orderSize = algorithmSize * percentageOfAlgorithmSize / 100"
             },
             {
                 "style": "Text",
                 "text": "<i>The actual code:</i>"
             },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-js\">"
-            },
             {
                 "style": "Text",
                 "text": "tradingEngineOrder.orderBaseAsset.size.value = algorithmSizeInBaseAsset * tradingSystemOrder.config.percentageOfAlgorithmSize / 100"
             },
-            {
-                "style": "Text",
-                "text": "</code\">"
-            },
             {
                 "style": "Text",
                 "text": "Because each execution algorithm may define multiple orders, the typical scenario is that all orders defined within an algorithm add up to 100% of the size allocated to the algorithm."
@@ -8857,10 +8417,6 @@
                 "style": "Text",
                 "text": "<i>The simplified logic for non-coders:</i>"
             },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-js\">"
-            },
             {
                 "style": "Text",
                 "text": "if   ( targetSize + sizePlaced > targetSize )"
@@ -8869,18 +8425,10 @@
                 "style": "Text",
                 "text": "     { orderSize = targetSize - sizePlaced }"
             },
-            {
-                "style": "Text",
-                "text": "</code\">"
-            },
             {
                 "style": "Text",
                 "text": "<i>The actual code:</i>"
             },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-js\">"
-            },
             {
                 "style": "Text",
                 "text": "if ("
@@ -8905,10 +8453,6 @@
                 "style": "Text",
                 "text": "   }"
             },
-            {
-                "style": "Text",
-                "text": "</code\">"
-            },
             {
                 "style": "Note",
                 "text": "See the order's configuration to learn how to set up the order size."
@@ -8977,10 +8521,6 @@
                 "style": "Text",
                 "text": "To configure the market buy order node, select <i>Configure</i> on the menu."
             },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-json\">"
-            },
             {
                 "style": "Text",
                 "text": "{"
@@ -8998,16 +8538,12 @@
                 "text": "}"
             },
             {
-                "style": "Text",
-                "text": "</code\">"
+                "style": "List",
+                "text": "percentageOfAlgorithmSize is the definition of how much of the size handled by the algorithm shall be allocated to this particular order. Posible values are real numbers between 0 and 100, including the extremes. If you set the value to 0, the order will not be executed."
             },
             {
                 "style": "List",
-                "text": "<code class=\"language-none\">percentageOfAlgorithmSize</code> is the definition of how much of the size handled by the algorithm shall be allocated to this particular order. Posible values are real numbers between <code class=\"language-none\">0<code class=\"language-none\"> and </code>100</code>, including the extremes. If you set the value to <code class=\"language-none\">0</code>, the order will not be executed."
-            },
-            {
-                "style": "List",
-                "text": "<code class=\"language-none\">spawnMultipleOrders</code> is the parameter that indicates whether additional spawned orders are allowed (<code class=\"language-none\">true<code class=\"language-none\">) or not (</code>false</code>)."
+                "text": "spawnMultipleOrders is the parameter that indicates whether additional spawned orders are allowed (true) or not (false)."
             }
         ]
     },
@@ -9039,10 +8575,6 @@
                 "style": "Text",
                 "text": "To configure the market sell order node, select <i>Configure</i> on the menu."
             },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-json\">"
-            },
             {
                 "style": "Text",
                 "text": "{"
@@ -9060,16 +8592,12 @@
                 "text": "}"
             },
             {
-                "style": "Text",
-                "text": "</code\">"
+                "style": "List",
+                "text": "percentageOfAlgorithmSize is the definition of how much of the size handled by the algorithm shall be allocated to this particular order. Posible values are real numbers between 0 and 100, including the extremes. If you set the value to 0, the order will not be executed."
             },
             {
                 "style": "List",
-                "text": "<code class=\"language-none\">percentageOfAlgorithmSize</code> is the definition of how much of the size handled by the algorithm shall be allocated to this particular order. Posible values are real numbers between <code class=\"language-none\">0<code class=\"language-none\"> and </code>100</code>, including the extremes. If you set the value to <code class=\"language-none\">0</code>, the order will not be executed."
-            },
-            {
-                "style": "List",
-                "text": "<code class=\"language-none\">spawnMultipleOrders</code> is the parameter that indicates whether additional spawned orders are allowed (<code class=\"language-none\">true<code class=\"language-none\">) or not (</code>false</code>)."
+                "text": "spawnMultipleOrders is the parameter that indicates whether additional spawned orders are allowed (true) or not (false)."
             }
         ]
     },
@@ -9125,10 +8653,6 @@
                 "style": "Text",
                 "text": "To configure the limit buy order node, select <i>Configure</i> on the menu."
             },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-json\">"
-            },
             {
                 "style": "Text",
                 "text": "{"
@@ -9146,16 +8670,12 @@
                 "text": "}"
             },
             {
-                "style": "Text",
-                "text": "</code\">"
+                "style": "List",
+                "text": "percentageOfAlgorithmSize is the definition of how much of the size handled by the algorithm shall be allocated to this particular order. Posible values are real numbers between 0 and 100, including the extremes. If you set the value to 0, the order will not be executed."
             },
             {
                 "style": "List",
-                "text": "<code class=\"language-none\">percentageOfAlgorithmSize</code> is the definition of how much of the size handled by the algorithm shall be allocated to this particular order. Posible values are real numbers between <code class=\"language-none\">0<code class=\"language-none\"> and </code>100</code>, including the extremes. If you set the value to <code class=\"language-none\">0</code>, the order will not be executed."
-            },
-            {
-                "style": "List",
-                "text": "<code class=\"language-none\">spawnMultipleOrders</code> is the parameter that indicates whether additional spawned orders are allowed (<code class=\"language-none\">true<code class=\"language-none\">) or not (</code>false</code>)."
+                "text": "spawnMultipleOrders is the parameter that indicates whether additional spawned orders are allowed (true) or not (false)."
             }
         ]
     },
@@ -9187,10 +8707,6 @@
                 "style": "Text",
                 "text": "To configure the limit sell order node, select <i>Configure</i> on the menu."
             },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-json\">"
-            },
             {
                 "style": "Text",
                 "text": "{"
@@ -9208,16 +8724,12 @@
                 "text": "}"
             },
             {
-                "style": "Text",
-                "text": "</code\">"
+                "style": "List",
+                "text": "percentageOfAlgorithmSize is the definition of how much of the size handled by the algorithm shall be allocated to this particular order. Posible values are real numbers between 0 and 100, including the extremes. If you set the value to 0, the order will not be executed."
             },
             {
                 "style": "List",
-                "text": "<code class=\"language-none\">percentageOfAlgorithmSize</code> is the definition of how much of the size handled by the algorithm shall be allocated to this particular order. Posible values are real numbers between <code class=\"language-none\">0<code class=\"language-none\"> and </code>100</code>, including the extremes. If you set the value to <code class=\"language-none\">0</code>, the order will not be executed."
-            },
-            {
-                "style": "List",
-                "text": "<code class=\"language-none\">spawnMultipleOrders</code> is the parameter that indicates whether additional spawned orders are allowed (<code class=\"language-none\">true<code class=\"language-none\">) or not (</code>false</code>)."
+                "text": "spawnMultipleOrders is the parameter that indicates whether additional spawned orders are allowed (true) or not (false)."
             }
         ]
     },
@@ -9235,11 +8747,11 @@
             },
             {
                 "style": "Text",
-                "text": "An order defined in an execution algorithm will be executed only if the event evaluates <code class=\"language-none\">true</code>."
+                "text": "An order defined in an execution algorithm will be executed only if the event evaluates true."
             },
             {
                 "style": "Text",
-                "text": "If you wish orders to be placed as defined immediately after the take position event has been triggered, the use the statement <code class=\"language-none\">true</code> your only create order event condition."
+                "text": "If you wish orders to be placed as defined immediately after the take position event has been triggered, the use the statement true your only create order event condition."
             },
             {
                 "style": "Title",
@@ -9335,10 +8847,6 @@
                 "style": "Text",
                 "text": "To configure the simulated partial fill node, select <i>Configure</i> on the menu."
             },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-json\">"
-            },
             {
                 "style": "Text",
                 "text": "{"
@@ -9351,13 +8859,9 @@
                 "style": "Text",
                 "text": "}"
             },
-            {
-                "style": "Text",
-                "text": "</code\">"
-            },
             {
                 "style": "List",
-                "text": "<code class=\"language-none\">fillProbability</code> indicates the probability of an order getting filled upon each tag of the price. Values may range from <code class=\"language-none\">0<code class=\"language-none\"> to </code>1</code>. The value <code class=\"language-none\">0</code> indicates that there are 0% chances of the order getting filled. With such a setting, the order will never get filled in the simulation.  The value <code class=\"language-none\">1<code class=\"language-none\"> indicates that there is a 100% probability of the order getting filled. With such a setting, the order is filled upon the first tag of the price. A value of </code>0.5</code> indicates a 50% probability, thus, it takes two tags of the price for the order to fill completely with such a setting."
+                "text": "fillProbability indicates the probability of an order getting filled upon each tag of the price. Values may range from 0 to 1. The value 0 indicates that there are 0% chances of the order getting filled. With such a setting, the order will never get filled in the simulation.  The value 1 indicates that there is a 100% probability of the order getting filled. With such a setting, the order is filled upon the first tag of the price. A value of 0.5 indicates a 50% probability, thus, it takes two tags of the price for the order to fill completely with such a setting."
             }
         ]
     },
@@ -9419,10 +8923,6 @@
                 "style": "Text",
                 "text": "To configure the simulated fees paid node, select <i>Configure</i> on the menu."
             },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-json\">"
-            },
             {
                 "style": "Text",
                 "text": "{"
@@ -9435,13 +8935,9 @@
                 "style": "Text",
                 "text": "}"
             },
-            {
-                "style": "Text",
-                "text": "</code\">"
-            },
             {
                 "style": "List",
-                "text": "<code class=\"language-none\">percentage</code> is the percentage to be applied to calculate the fees for the specific order."
+                "text": "percentage is the percentage to be applied to calculate the fees for the specific order."
             }
         ]
     },
@@ -9656,10 +9152,6 @@
                 "style": "Text",
                 "text": "Select <i>Configure Crypto Exchange</i> on the menu to access the configuration."
             },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-json\">"
-            },
             {
                 "style": "Text",
                 "text": "{"
@@ -9705,16 +9197,12 @@
                 "text": "}"
             },
             {
-                "style": "Text",
-                "text": "</code\">"
+                "style": "List",
+                "text": "codeName is the name of the exchange as handled in the code of the system."
             },
             {
                 "style": "List",
-                "text": "<code class=\"language-none\">codeName</code> is the name of the exchange as handled in the code of the system."
-            },
-            {
-                "style": "List",
-                "text": "<code class=\"language-none\">API</code> holds a series of definitions used only in the case in which the sensor bot fetches trades (using the Historic-Trades process) instead of the OHLCV process that fetches one-minute candles and is the current default. In such a case, finding the right set of parameters to work with a specific exchange may be challenging, nd involves understanding how the exchanges API and the CCXT Library API work. In other words, there is no hard rule as of what each of the values should be. Determining each of this values requires exploring the exchange's API documentation, as well as the documentation of the CCXT Library."
+                "text": "API holds a series of definitions used only in the case in which the sensor bot fetches trades (using the Historic-Trades process) instead of the OHLCV process that fetches one-minute candles and is the current default. In such a case, finding the right set of parameters to work with a specific exchange may be challenging, nd involves understanding how the exchanges API and the CCXT Library API work. In other words, there is no hard rule as of what each of the values should be. Determining each of this values requires exploring the exchange's API documentation, as well as the documentation of the CCXT Library."
             }
         ]
     },
@@ -9742,10 +9230,6 @@
                 "style": "Text",
                 "text": "Select <i>Configure Exchange Assets</i> on the menu to access the configuration."
             },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-json\">"
-            },
             {
                 "style": "Text",
                 "text": "{"
@@ -9760,11 +9244,7 @@
             },
             {
                 "style": "Text",
-                "text": "</code\">"
-            },
-            {
-                "style": "Text",
-                "text": "<i> <code class=\"language-none\">addMissingAssets</code> acts as a filter to determine which assets of a (potentially long) list of assets listed at the exchange will be added when the </i>Add Missing Assets* option in the menu is used. Because many exchanges do not offer a list of assets, the system fetches assets from actual markets (pairs) listed at the exchange. You may add missing assets filtered by the <code class=\"language-none\">quotedAsset<code class=\"language-none\"> or by the </code>baseAsset</code>. For example, the above configuration would add all assets listed in markets in which BTC is the quoted asset."
+                "text": "<i> addMissingAssets acts as a filter to determine which assets of a (potentially long) list of assets listed at the exchange will be added when the </i>Add Missing Assets* option in the menu is used. Because many exchanges do not offer a list of assets, the system fetches assets from actual markets (pairs) listed at the exchange. You may add missing assets filtered by the quotedAsset or by the baseAsset. For example, the above configuration would add all assets listed in markets in which BTC is the quoted asset."
             }
         ]
     },
@@ -9796,10 +9276,6 @@
                 "style": "Text",
                 "text": "Select <i>Configure Asset</i> on the menu to access the configuration."
             },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-json\">"
-            },
             {
                 "style": "Text",
                 "text": "{"
@@ -9814,11 +9290,7 @@
             },
             {
                 "style": "Text",
-                "text": "</code\">"
-            },
-            {
-                "style": "Text",
-                "text": "<i> <code class=\"language-none\">codeName</code> is the ticker of the asset as listed by the exchange (</i>i.e.:* BTC, BTH, ETH, LTC, BNB, USDT, USD, etc.)"
+                "text": "<i> codeName is the ticker of the asset as listed by the exchange (</i>i.e.:* BTC, BTH, ETH, LTC, BNB, USDT, USD, etc.)"
             },
             {
                 "style": "Note",
@@ -9988,10 +9460,6 @@
                 "style": "Text",
                 "text": "Select <i>Configure Key</i> on the menu to access the configuration."
             },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-json\">"
-            },
             {
                 "style": "Text",
                 "text": "{"
@@ -10008,13 +9476,9 @@
                 "style": "Text",
                 "text": "}"
             },
-            {
-                "style": "Text",
-                "text": "</code\">"
-            },
             {
                 "style": "List",
-                "text": "<code class=\"language-none\">codeName</code> is the name or label of your key, as supplied by the exchange."
+                "text": "codeName is the name or label of your key, as supplied by the exchange."
             },
             {
                 "style": "Warning",
@@ -10049,14 +9513,6 @@
             {
                 "style": "Text",
                 "text": "Select <i>Configure</i> on the menu to access the configuration."
-            },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-json\">"
-            },
-            {
-                "style": "Text",
-                "text": "</code\">"
             }
         ]
     },
@@ -10080,10 +9536,6 @@
                 "style": "Text",
                 "text": "Select <i>Configure</i> on the menu to access the configuration."
             },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-json\">"
-            },
             {
                 "style": "Text",
                 "text": "    {"
@@ -10161,40 +9613,36 @@
                 "text": "    }"
             },
             {
-                "style": "Text",
-                "text": "</code\">"
+                "style": "List",
+                "text": "backgroundColor refers to the background of the design space (see table below)."
             },
             {
                 "style": "List",
-                "text": "<code class=\"language-none\">backgroundColor</code> refers to the background of the design space (see table below)."
-            },
-            {
-                "style": "List",
-                "text": "<code class=\"language-none\">node</code> refers to all nodes in the design space."
+                "text": "node refers to all nodes in the design space."
             },
             {
                 "style": "Text",
-                "text": "  * <code class=\"language-none\">imageSize</code> refers to the size of icons representing nodes."
+                "text": "  * imageSize refers to the size of icons representing nodes."
             },
             {
                 "style": "List",
-                "text": "<code class=\"language-none\">type</code> refers to the type of node, as indicated by the string of text below each node."
+                "text": "type refers to the type of node, as indicated by the string of text below each node."
             },
             {
                 "style": "List",
-                "text": "<code class=\"language-none\">name</code> refers to the name or label of the node, as indicated above the node."
+                "text": "name refers to the name or label of the node, as indicated above the node."
             },
             {
                 "style": "List",
-                "text": "<code class=\"language-none\">menuItem</code> refers to items on the right-hand side of the menu."
+                "text": "menuItem refers to items on the right-hand side of the menu."
             },
             {
                 "style": "Text",
-                "text": "  * <code class=\"language-none\">fontSize</code> refers to the size of the font of the string of text."
+                "text": "  * fontSize refers to the size of the font of the string of text."
             },
             {
                 "style": "Text",
-                "text": "  * <code class=\"language-none\">imageSize</code> refers to the size of the icon illustrating the menu item."
+                "text": "  * imageSize refers to the size of the icon illustrating the menu item."
             },
             {
                 "style": "Text",
@@ -10206,63 +9654,63 @@
             },
             {
                 "style": "Text",
-                "text": "<tr><td> <code class=\"language-none\">DARK</code> </td><td> 48, 48, 54 </td><td> <span style=\"display: block; background: RGB(48, 48, 54); border: 1px solid black;\">&nbsp;</span> </td></tr>"
+                "text": "<tr><td> DARK </td><td> 48, 48, 54 </td><td> <span style=\"display: block; background: RGB(48, 48, 54); border: 1px solid black;\">&nbsp;</span> </td></tr>"
             },
             {
                 "style": "Text",
-                "text": "<tr><td> <code class=\"language-none\">LIGHT</code> </td><td> 234, 226, 222 </td><td> <span style=\"display: block; background: RGB(234, 226, 222); border: 1px black; border: 1px solid black;\">&nbsp;</span> </td></tr>"
+                "text": "<tr><td> LIGHT </td><td> 234, 226, 222 </td><td> <span style=\"display: block; background: RGB(234, 226, 222); border: 1px black; border: 1px solid black;\">&nbsp;</span> </td></tr>"
             },
             {
                 "style": "Text",
-                "text": "<tr><td> <code class=\"language-none\">GREY</code> </td><td> 150, 150, 150 </td><td> <span style=\"display: block; background: RGB(150, 150, 150); border: 1px solid black;\">&nbsp;</span> </td></tr>"
+                "text": "<tr><td> GREY </td><td> 150, 150, 150 </td><td> <span style=\"display: block; background: RGB(150, 150, 150); border: 1px solid black;\">&nbsp;</span> </td></tr>"
             },
             {
                 "style": "Text",
-                "text": "<tr><td> <code class=\"language-none\">LIGHT_GREY</code> </td><td> 247, 247, 247 </td><td> <span style=\"display: block; background: RGB(247, 247, 247); border: 1px solid black;\">&nbsp;</span> </td></tr>"
+                "text": "<tr><td> LIGHT_GREY </td><td> 247, 247, 247 </td><td> <span style=\"display: block; background: RGB(247, 247, 247); border: 1px solid black;\">&nbsp;</span> </td></tr>"
             },
             {
                 "style": "Text",
-                "text": "<tr><td> <code class=\"language-none\">WHITE</code> </td><td> 255, 255, 255 </td><td> <span style=\"display: block; background: RGB(255, 255, 255); border: 1px solid black;\">&nbsp;</span> </td></tr>"
+                "text": "<tr><td> WHITE </td><td> 255, 255, 255 </td><td> <span style=\"display: block; background: RGB(255, 255, 255); border: 1px solid black;\">&nbsp;</span> </td></tr>"
             },
             {
                 "style": "Text",
-                "text": "<tr><td> <code class=\"language-none\">BLACK</code> </td><td> 0, 0, 0 </td><td> <span style=\"display: block; background: RGB(0, 0, 0); border: 1px solid black;\">&nbsp;</span> </td></tr>"
+                "text": "<tr><td> BLACK </td><td> 0, 0, 0 </td><td> <span style=\"display: block; background: RGB(0, 0, 0); border: 1px solid black;\">&nbsp;</span> </td></tr>"
             },
             {
                 "style": "Text",
-                "text": "<tr><td> <code class=\"language-none\">GOLDEN_ORANGE</code> </td><td> 240, 162, 2 </td><td> <span style=\"display: block; background: RGB(240, 162, 2); border: 1px solid black;\">&nbsp;</span> </td></tr>"
+                "text": "<tr><td> GOLDEN_ORANGE </td><td> 240, 162, 2 </td><td> <span style=\"display: block; background: RGB(240, 162, 2); border: 1px solid black;\">&nbsp;</span> </td></tr>"
             },
             {
                 "style": "Text",
-                "text": "<tr><td> <code class=\"language-none\">RUSTED_RED</code> </td><td> 204, 88, 53 </td><td> <span style=\"display: block; background: RGB(204, 88, 53); border: 1px solid black;\">&nbsp;</span> </td></tr>"
+                "text": "<tr><td> RUSTED_RED </td><td> 204, 88, 53 </td><td> <span style=\"display: block; background: RGB(204, 88, 53); border: 1px solid black;\">&nbsp;</span> </td></tr>"
             },
             {
                 "style": "Text",
-                "text": "<tr><td> <code class=\"language-none\">GREEN</code> </td><td> 188, 214, 67 </td><td> <span style=\"display: block; background: RGB(188, 214, 67); border: 1px solid black;\">&nbsp;</span> </td></tr>"
+                "text": "<tr><td> GREEN </td><td> 188, 214, 67 </td><td> <span style=\"display: block; background: RGB(188, 214, 67); border: 1px solid black;\">&nbsp;</span> </td></tr>"
             },
             {
                 "style": "Text",
-                "text": "<tr><td> <code class=\"language-none\">RED</code> </td><td> 223, 70, 60 </td><td> <span style=\"display: block; background: RGB(223, 70, 60); border: 1px solid black;\">&nbsp;</span> </td></tr>"
+                "text": "<tr><td> RED </td><td> 223, 70, 60 </td><td> <span style=\"display: block; background: RGB(223, 70, 60); border: 1px solid black;\">&nbsp;</span> </td></tr>"
             },
             {
                 "style": "Text",
-                "text": "<tr><td> <code class=\"language-none\">PATINATED_TURQUOISE</code> </td><td> 27, 153, 139 </td><td> <span style=\"display: block; background: RGB(27, 153, 139); border: 1px solid black;\">&nbsp;</span> </td></tr>"
+                "text": "<tr><td> PATINATED_TURQUOISE </td><td> 27, 153, 139 </td><td> <span style=\"display: block; background: RGB(27, 153, 139); border: 1px solid black;\">&nbsp;</span> </td></tr>"
             },
             {
                 "style": "Text",
-                "text": "<tr><td> <code class=\"language-none\">TITANIUM_YELLOW</code> </td><td> 244, 228, 9 </td><td> <span style=\"display: block; background: RGB(244, 228, 9); border: 1px solid black;\">&nbsp;</span> </td></tr>"
+                "text": "<tr><td> TITANIUM_YELLOW </td><td> 244, 228, 9 </td><td> <span style=\"display: block; background: RGB(244, 228, 9); border: 1px solid black;\">&nbsp;</span> </td></tr>"
             },
             {
                 "style": "Text",
-                "text": "<tr><td> <code class=\"language-none\">MANGANESE_PURPLE</code> </td><td> 91,80, 122 </td><td> <span style=\"display: block; background: RGB(91,80, 122); border: 1px solid black;\">&nbsp;</span> </td></tr>"
+                "text": "<tr><td> MANGANESE_PURPLE </td><td> 91,80, 122 </td><td> <span style=\"display: block; background: RGB(91,80, 122); border: 1px solid black;\">&nbsp;</span> </td></tr>"
             },
             {
                 "style": "Text",
-                "text": "<tr><td> <code class=\"language-none\">TURQUOISE</code> </td><td> 74, 207, 217 </td><td> <span style=\"display: block; background: RGB(74, 207, 217); border: 1px solid black;\">&nbsp;</span> </td></tr>"
+                "text": "<tr><td> TURQUOISE </td><td> 74, 207, 217 </td><td> <span style=\"display: block; background: RGB(74, 207, 217); border: 1px solid black;\">&nbsp;</span> </td></tr>"
             },
             {
                 "style": "Text",
-                "text": "<tr><td> <code class=\"language-none\">DARK_TURQUOISE</code> </td><td> 2, 149, 170 </td><td> <span style=\"display: block; background: RGB(2, 149, 170); border: 1px solid black;\">&nbsp;</span> </td></tr>"
+                "text": "<tr><td> DARK_TURQUOISE </td><td> 2, 149, 170 </td><td> <span style=\"display: block; background: RGB(2, 149, 170); border: 1px solid black;\">&nbsp;</span> </td></tr>"
             },
             {
                 "style": "Text",
@@ -10290,10 +9738,6 @@
                 "style": "Text",
                 "text": "Select <i>Configure</i> on the menu to access the configuration."
             },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-json\">"
-            },
             {
                 "style": "Text",
                 "text": "{"
@@ -10346,41 +9790,37 @@
                 "style": "Text",
                 "text": "}"
             },
+            {
+                "style": "List",
+                "text": "node refers to every node in the design space."
+            },
             {
                 "style": "Text",
-                "text": "</code\">"
+                "text": "  * radiusPercentage is the radius of the circular nodes' menu applied as a percentage of an arbitrary default radius."
+            },
+            {
+                "style": "Text",
+                "text": "  * massPercentage is the refernce mass of nodes that affect the attraction and repulsion of the environment's pysics whe the physics setting is set to true."
+            },
+            {
+                "style": "Text",
+                "text": "  * menuItem refers to the items on the right-hand side of nodes' menus."
+            },
+            {
+                "style": "Text",
+                "text": "    * widthPercentage is the reference width of an item applied as a percentage of an arbitrary default width."
+            },
+            {
+                "style": "Text",
+                "text": "    * heightPercentage is the reference height of an item applied as a percentage of an arbitrary default height."
+            },
+            {
+                "style": "Text",
+                "text": "    * radiusPercentage is the reference radious of the circular matrix that governs the distribution of items in the circular menu. Larger numbers cause items to spread appart while smaller numbers makes items lie closer to each other."
             },
             {
                 "style": "List",
-                "text": "<code class=\"language-none\">node</code> refers to every node in the design space."
-            },
-            {
-                "style": "Text",
-                "text": "  * <code class=\"language-none\">radiusPercentage</code> is the radius of the circular nodes' menu applied as a percentage of an arbitrary default radius."
-            },
-            {
-                "style": "Text",
-                "text": "  * <code class=\"language-none\">massPercentage</code> is the refernce mass of nodes that affect the attraction and repulsion of the environment's pysics whe the physics setting is set to <code class=\"language-none\">true</code>."
-            },
-            {
-                "style": "Text",
-                "text": "  * <code class=\"language-none\">menuItem</code> refers to the items on the right-hand side of nodes' menus."
-            },
-            {
-                "style": "Text",
-                "text": "    * <code class=\"language-none\">widthPercentage</code> is the reference width of an item applied as a percentage of an arbitrary default width."
-            },
-            {
-                "style": "Text",
-                "text": "    * <code class=\"language-none\">heightPercentage</code> is the reference height of an item applied as a percentage of an arbitrary default height."
-            },
-            {
-                "style": "Text",
-                "text": "    * <code class=\"language-none\">radiusPercentage</code> is the reference radious of the circular matrix that governs the distribution of items in the circular menu. Larger numbers cause items to spread appart while smaller numbers makes items lie closer to each other."
-            },
-            {
-                "style": "List",
-                "text": "<code class=\"language-none\">physics</code> determines wether the environment is static (<code class=\"language-none\">false<code class=\"language-none\">) or dynamic (</code>true</code>). When physics is set to <code class=\"language-none\">true</code>, nodes in the design space are affected by th gravitational pull and repulsion of other nodes."
+                "text": "physics determines wether the environment is static (false) or dynamic (true). When physics is set to true, nodes in the design space are affected by th gravitational pull and repulsion of other nodes."
             }
         ]
     },
@@ -10555,10 +9995,6 @@
                 "style": "Text",
                 "text": "Select <i>Configure Rate Scale</i> on the menu to access the configuration."
             },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-json\">"
-            },
             {
                 "style": "Text",
                 "text": "{"
@@ -10584,24 +10020,20 @@
                 "text": "}"
             },
             {
-                "style": "Text",
-                "text": "</code\">"
+                "style": "List",
+                "text": "minValue is a date in the Epoch time format that represents the value of the scale at the left border of the chart."
             },
             {
                 "style": "List",
-                "text": "<code class=\"language-none\">minValue</code> is a date in the Epoch time format that represents the value of the scale at the left border of the chart."
+                "text": "maxValue is a date in the Epoch time format that represents the value of the scale at the right border of the chart."
             },
             {
                 "style": "List",
-                "text": "<code class=\"language-none\">maxValue</code> is a date in the Epoch time format that represents the value of the scale at the right border of the chart."
+                "text": "autoMinScale sets the mode of the scale for the minimum value; true sets the value to automatic, false sets the value to manual."
             },
             {
                 "style": "List",
-                "text": "<code class=\"language-none\">autoMinScale</code> sets the mode of the scale for the minimum value; <code class=\"language-none\">true<code class=\"language-none\"> sets the value to automatic, </code>false</code> sets the value to manual."
-            },
-            {
-                "style": "List",
-                "text": "<code class=\"language-none\">autoMaxScale</code> sets the mode of the scale for the maximum value; <code class=\"language-none\">true<code class=\"language-none\"> sets the value to automatic, </code>false</code> sets the value to manual."
+                "text": "autoMaxScale sets the mode of the scale for the maximum value; true sets the value to automatic, false sets the value to manual."
             },
             {
                 "style": "Title",
@@ -10733,10 +10165,6 @@
                 "style": "Text",
                 "text": "Select <i>Configure Rate Scale</i> on the menu to access the configuration."
             },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-json\">"
-            },
             {
                 "style": "Text",
                 "text": "{"
@@ -10762,24 +10190,20 @@
                 "text": "}"
             },
             {
-                "style": "Text",
-                "text": "</code\">"
+                "style": "List",
+                "text": "minValue is a numerical value that represents the value of the scale at the bottom of the chart."
             },
             {
                 "style": "List",
-                "text": "<code class=\"language-none\">minValue</code> is a numerical value that represents the value of the scale at the bottom of the chart."
+                "text": "maxValue is a numerical value that represents the value of the scale at the top of the chart."
             },
             {
                 "style": "List",
-                "text": "<code class=\"language-none\">maxValue</code> is a numerical value that represents the value of the scale at the top of the chart."
+                "text": "autoMinScale sets the mode of the scale for the minimum value; true sets the value to automatic, false sets the value to manual."
             },
             {
                 "style": "List",
-                "text": "<code class=\"language-none\">autoMinScale</code> sets the mode of the scale for the minimum value; <code class=\"language-none\">true<code class=\"language-none\"> sets the value to automatic, </code>false</code> sets the value to manual."
-            },
-            {
-                "style": "List",
-                "text": "<code class=\"language-none\">autoMaxScale</code> sets the mode of the scale for the maximum value; <code class=\"language-none\">true<code class=\"language-none\"> sets the value to automatic, </code>false</code> sets the value to manual."
+                "text": "autoMaxScale sets the mode of the scale for the maximum value; true sets the value to automatic, false sets the value to manual."
             },
             {
                 "style": "Title",
@@ -10875,10 +10299,6 @@
                 "style": "Text",
                 "text": "Select <i>Configure Frame Scale</i> on the menu to access the configuration."
             },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-json\">"
-            },
             {
                 "style": "Text",
                 "text": "{"
@@ -10891,17 +10311,13 @@
                 "style": "Text",
                 "text": "}"
             },
-            {
-                "style": "Text",
-                "text": "</code\">"
-            },
             {
                 "style": "List",
-                "text": "<code class=\"language-none\">value</code> can be any of the time frames supported by the system:"
+                "text": "value can be any of the time frames supported by the system:"
             },
             {
                 "style": "Text",
-                "text": "  * <code class=\"language-none\">01-hs</code>, <code class=\"language-none\">02-hs<code class=\"language-none\">, </code>03-hs</code>, <code class=\"language-none\">04-hs</code>, <code class=\"language-none\">06-hs<code class=\"language-none\">, </code>08-hs</code>, <code class=\"language-none\">12-hs</code>, and <code class=\"language-none\">24-hs</code>."
+                "text": "  * 01-hs, 02-hs, 03-hs, 04-hs, 06-hs, 08-hs, 12-hs, and 24-hs."
             },
             {
                 "style": "Note",
@@ -10979,10 +10395,6 @@
                 "style": "Text",
                 "text": "Select <i>Configure Layers Manager</i> in the menu to access the configuration."
             },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-json\">"
-            },
             {
                 "style": "Text",
                 "text": "{"
@@ -11016,20 +10428,16 @@
                 "text": "}"
             },
             {
-                "style": "Text",
-                "text": "</code\">"
+                "style": "List",
+                "text": "visibleLayers keeps track of how many layers the managers is rolled to, that is, how many layers it is displaying."
             },
             {
                 "style": "List",
-                "text": "<code class=\"language-none\">visibleLayers</code> keeps track of how many layers the managers is rolled to, that is, how many layers it is displaying."
+                "text": "panelLocation keeps track of the position of the panel relative to the four screen corners."
             },
             {
                 "style": "List",
-                "text": "<code class=\"language-none\">panelLocation</code> keeps track of the position of the panel relative to the four screen corners."
-            },
-            {
-                "style": "List",
-                "text": "<code class=\"language-none\">label2FontSize</code> allows adjusting the font size of the second-order label of each layer, displaying the name of the exchange and market."
+                "text": "label2FontSize allows adjusting the font size of the second-order label of each layer, displaying the name of the exchange and market."
             }
         ]
     },
@@ -11065,10 +10473,6 @@
                 "style": "Text",
                 "text": "Select <i>Configure Layer</i> on the menu to access the configuration."
             },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-json\">"
-            },
             {
                 "style": "Text",
                 "text": "{"
@@ -11087,15 +10491,11 @@
             },
             {
                 "style": "Text",
-                "text": "</code\">"
+                "text": "<i> status may be </i>on<i> or </i>off* and refers to the layer being visible or not on the charts."
             },
             {
                 "style": "Text",
-                "text": "<i> <code class=\"language-none\">status</code> may be </i>on<i> or </i>off* and refers to the layer being visible or not on the charts."
-            },
-            {
-                "style": "Text",
-                "text": "<i> <code class=\"language-none\">showPanels</code> may be </i>true<i> or </i>false<i>; </i>true<i> shows the plotter panel that may be associated with the data product as per the plotter module definitions; </i>false* makes panels invisible."
+                "text": "<i> showPanels may be </i>true<i> or </i>false<i>; </i>true<i> shows the plotter panel that may be associated with the data product as per the plotter module definitions; </i>false* makes panels invisible."
             },
             {
                 "style": "Title",
@@ -11211,14 +10611,6 @@
                 "style": "Text",
                 "text": "Select <i>Configure</i> on the menu to access the configuration."
             },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-json\">"
-            },
-            {
-                "style": "Text",
-                "text": "</code\">"
-            },
             {
                 "style": "Title",
                 "text": "Running a Data Mine Tasks node"
@@ -11265,14 +10657,6 @@
                 "style": "Text",
                 "text": "Select <i>Configure</i> on the menu to access the configuration."
             },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-json\">"
-            },
-            {
-                "style": "Text",
-                "text": "</code\">"
-            },
             {
                 "style": "Title",
                 "text": "Running a Trading Mine Tasks node"
@@ -11520,14 +10904,6 @@
             {
                 "style": "Text",
                 "text": "Select <i>Configure</i> on the menu to access the configuration."
-            },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-json\">"
-            },
-            {
-                "style": "Text",
-                "text": "</code\">"
             }
         ]
     },
@@ -11613,14 +10989,6 @@
             {
                 "style": "Text",
                 "text": "Select <i>Configure</i> on the menu to access the configuration."
-            },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-json\">"
-            },
-            {
-                "style": "Text",
-                "text": "</code\">"
             }
         ]
     },
@@ -11853,14 +11221,6 @@
             {
                 "style": "Text",
                 "text": "Select <i>Configure</i> on the menu to access the configuration."
-            },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-json\">"
-            },
-            {
-                "style": "Text",
-                "text": "</code\">"
             }
         ]
     },
@@ -11907,14 +11267,6 @@
             {
                 "style": "Text",
                 "text": "Select <i>Configure</i> on the menu to access the configuration."
-            },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-json\">"
-            },
-            {
-                "style": "Text",
-                "text": "</code\">"
             }
         ]
     },
@@ -11960,14 +11312,6 @@
             {
                 "style": "Text",
                 "text": "Select <i>Configure</i> on the menu to access the configuration."
-            },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-json\">"
-            },
-            {
-                "style": "Text",
-                "text": "</code\">"
             }
         ]
     },
@@ -11998,14 +11342,6 @@
             {
                 "style": "Text",
                 "text": "Select <i>Configure</i> on the menu to access the configuration."
-            },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-json\">"
-            },
-            {
-                "style": "Text",
-                "text": "</code\">"
             }
         ]
     },
@@ -12040,14 +11376,6 @@
             {
                 "style": "Text",
                 "text": "Select <i>Configure</i> on the menu to access the configuration."
-            },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-json\">"
-            },
-            {
-                "style": "Text",
-                "text": "</code\">"
             }
         ]
     },
@@ -12070,14 +11398,6 @@
             {
                 "style": "Text",
                 "text": "Select <i>Configure</i> on the menu to access the configuration."
-            },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-json\">"
-            },
-            {
-                "style": "Text",
-                "text": "</code\">"
             }
         ]
     },
@@ -12100,14 +11420,6 @@
             {
                 "style": "Text",
                 "text": "Select <i>Configure</i> on the menu to access the configuration."
-            },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-json\">"
-            },
-            {
-                "style": "Text",
-                "text": "</code\">"
             }
         ]
     },
@@ -12130,14 +11442,6 @@
             {
                 "style": "Text",
                 "text": "Select <i>Configure</i> on the menu to access the configuration."
-            },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-json\">"
-            },
-            {
-                "style": "Text",
-                "text": "</code\">"
             }
         ]
     },
@@ -12160,14 +11464,6 @@
             {
                 "style": "Text",
                 "text": "Select <i>Configure</i> on the menu to access the configuration."
-            },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-json\">"
-            },
-            {
-                "style": "Text",
-                "text": "</code\">"
             }
         ]
     },
@@ -12190,14 +11486,6 @@
             {
                 "style": "Text",
                 "text": "Select <i>Configure</i> on the menu to access the configuration."
-            },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-json\">"
-            },
-            {
-                "style": "Text",
-                "text": "</code\">"
             }
         ]
     },
@@ -12220,14 +11508,6 @@
             {
                 "style": "Text",
                 "text": "Select <i>Configure</i> on the menu to access the configuration."
-            },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-json\">"
-            },
-            {
-                "style": "Text",
-                "text": "</code\">"
             }
         ]
     },
@@ -12258,14 +11538,6 @@
             {
                 "style": "Text",
                 "text": "Select <i>Configure</i> on the menu to access the configuration."
-            },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-json\">"
-            },
-            {
-                "style": "Text",
-                "text": "</code\">"
             }
         ]
     },
@@ -12279,7 +11551,7 @@
             },
             {
                 "style": "Text",
-                "text": "Plugin files distributed with the system are stored in the corresponding folders on the following path: <code class=\"language-none\">\\Projects\\[ProjectName]\\Plugins\\</code>."
+                "text": "Plugin files distributed with the system are stored in the corresponding folders on the following path: \\Projects\\[ProjectName]\\Plugins\\."
             },
             {
                 "style": "Text",
@@ -12312,14 +11584,6 @@
             {
                 "style": "Text",
                 "text": "Select <i>Configure</i> on the menu to access the configuration."
-            },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-json\">"
-            },
-            {
-                "style": "Text",
-                "text": "</code\">"
             }
         ]
     },
@@ -12350,14 +11614,6 @@
             {
                 "style": "Text",
                 "text": "Select <i>Configure</i> on the menu to access the configuration."
-            },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-json\">"
-            },
-            {
-                "style": "Text",
-                "text": "</code\">"
             }
         ]
     },
@@ -12409,10 +11665,6 @@
                 "style": "Text",
                 "text": "Select <i>Configure</i> on the menu to access the configuration."
             },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-json\">"
-            },
             {
                 "style": "Text",
                 "text": "{"
@@ -12565,93 +11817,89 @@
                 "style": "Text",
                 "text": "}"
             },
-            {
-                "style": "Text",
-                "text": "</code\">"
-            },
             {
                 "style": "Text",
                 "text": "{% include tip.html content=\"Configuration items are listed in the order of appearance in the HTML layout, that is, the sequence of HTML elements mentioned earlier.\" %}"
             },
             {
                 "style": "List",
-                "text": "<code class=\"language-none\">title</code> is the <code class=\"language-none\"><H1></code> tag, the main title of the page."
+                "text": "title is the <H1> tag, the main title of the page."
             },
             {
                 "style": "List",
-                "text": "<code class=\"language-none\">summary</code> is a block of text preceded with the word <i>Summary</i>."
+                "text": "summary is a block of text preceded with the word <i>Summary</i>."
             },
             {
                 "style": "List",
-                "text": "<code class=\"language-none\">subTitle</code> is the <code class=\"language-none\"><H2></code> tag, the secondary title of the page."
+                "text": "subTitle is the <H2> tag, the secondary title of the page."
             },
             {
                 "style": "List",
-                "text": "<code class=\"language-none\">gif</code> is the name of an image in the <i>GIF</i> format. Do not include the <code class=\"language-none\">.gif<code class=\"language-none\"> extension in the configuration, and make sure that the name of the file features the extension in lowercase. The file must be stored in the </code>\\Projects\\[Project-Name]\\Gifs</code>folder. The optimum size of the image is 400 px in width. For a step showing only a gif image, use 580 px for the height."
+                "text": "gif is the name of an image in the <i>GIF</i> format. Do not include the .gif extension in the configuration, and make sure that the name of the file features the extension in lowercase. The file must be stored in the \\Projects\\[Project-Name]\\Gifsfolder. The optimum size of the image is 400 px in width. For a step showing only a gif image, use 580 px for the height."
             },
             {
                 "style": "List",
-                "text": "<code class=\"language-none\">image</code> is the name of one of the icons stored in the <code class=\"language-none\">\\Projects\\[Project-Name]\\Icons<code class=\"language-none\">folder, without the extension. When the configuration exists, the icon is placed within a table, on the left-hand side of the text block featured in the </code>definition</code> field. When there is no icon, the <code class=\"language-none\">definition</code> occupies the full width."
+                "text": "image is the name of one of the icons stored in the \\Projects\\[Project-Name]\\Iconsfolder, without the extension. When the configuration exists, the icon is placed within a table, on the left-hand side of the text block featured in the definition field. When there is no icon, the definition occupies the full width."
             },
             {
                 "style": "List",
-                "text": "<code class=\"language-none\">definition</code> is a block of text in bold style (<code class=\"language-none\"><strong></code> HTML tag)."
+                "text": "definition is a block of text in bold style (<strong> HTML tag)."
             },
             {
                 "style": "List",
-                "text": "<code class=\"language-none\">bulletListIntro</code> is a block of text that serves as an introduction to the array of bullet points below."
+                "text": "bulletListIntro is a block of text that serves as an introduction to the array of bullet points below."
             },
             {
                 "style": "List",
-                "text": "<code class=\"language-none\">bulletArray</code> is the definition of any number of bullet points. The first field on each bullet is rendered in bold style and the second, in plain style. If the fields are left empty, the bullet list will still be included in the HTML, therefore, if you don't want bullets you must delete the whole definition of the bullet array from the configuration."
+                "text": "bulletArray is the definition of any number of bullet points. The first field on each bullet is rendered in bold style and the second, in plain style. If the fields are left empty, the bullet list will still be included in the HTML, therefore, if you don't want bullets you must delete the whole definition of the bullet array from the configuration."
             },
             {
                 "style": "List",
-                "text": "<code class=\"language-none\">paragraph1</code> is a regular block of text."
+                "text": "paragraph1 is a regular block of text."
             },
             {
                 "style": "List",
-                "text": "<code class=\"language-none\">callOut</code> is a block of text in bold style with a green border and the left-hand side of the block."
+                "text": "callOut is a block of text in bold style with a green border and the left-hand side of the block."
             },
             {
                 "style": "List",
-                "text": "<code class=\"language-none\">externalLink</code> allows you to set up a link that opens in a new tab at the end of the <code class=\"language-none\">callOut</code> block. Enter the URL in the first field and the anchor text in the second."
+                "text": "externalLink allows you to set up a link that opens in a new tab at the end of the callOut block. Enter the URL in the first field and the anchor text in the second."
             },
             {
                 "style": "List",
-                "text": "<code class=\"language-none\">paragraph2</code> is a regular block of text."
+                "text": "paragraph2 is a regular block of text."
             },
             {
                 "style": "List",
-                "text": "<code class=\"language-none\">note</code> is a block of text within a blue box preceded with the string <code class=\"language-none\">Note:</code>."
+                "text": "note is a block of text within a blue box preceded with the string Note:."
             },
             {
                 "style": "List",
-                "text": "<code class=\"language-none\">tip</code> is a block of text within a green box preceded with the string <code class=\"language-none\">Tip:</code>."
+                "text": "tip is a block of text within a green box preceded with the string Tip:."
             },
             {
                 "style": "List",
-                "text": "<code class=\"language-none\">important</code> is a block of text within a yellow box preceded with the string <code class=\"language-none\">Important:</code>."
+                "text": "important is a block of text within a yellow box preceded with the string Important:."
             },
             {
                 "style": "List",
-                "text": "<code class=\"language-none\">warning</code> is a block of text within a red box preceded with the string <code class=\"language-none\">Warning:</code>."
+                "text": "warning is a block of text within a red box preceded with the string Warning:."
             },
             {
                 "style": "List",
-                "text": "<code class=\"language-none\">position</code> determines the position of the floating HTML. There are three alternatives: <code class=\"language-none\">Left<code class=\"language-none\">, </code>Right</code>, or leave the field empty to position the page in the center of the screen."
+                "text": "position determines the position of the floating HTML. There are three alternatives: Left, Right, or leave the field empty to position the page in the center of the screen."
             },
             {
                 "style": "List",
-                "text": "<code class=\"language-none\">slider</code> determines the position of the horizontal slider. There are four alternatives: <code class=\"language-none\">toTop<code class=\"language-none\">, </code>Right</code>, or leave the field empty to position the page in the center of the screen."
+                "text": "slider determines the position of the horizontal slider. There are four alternatives: toTop, Right, or leave the field empty to position the page in the center of the screen."
             },
             {
                 "style": "List",
-                "text": "<code class=\"language-none\">pressButton</code> allows you to forcefully <code class=\"language-none\">Stop<code class=\"language-none\"> the tutorial, go to the </code>Next</code> step, go to the <code class=\"language-none\">Previous</code> step, or <code class=\"language-none\">Skip</code> a step. When a step is loaded and one of these options is configured in this field, the action is applied immediately."
+                "text": "pressButton allows you to forcefully Stop the tutorial, go to the Next step, go to the Previous step, or Skip a step. When a step is loaded and one of these options is configured in this field, the action is applied immediately."
             },
             {
                 "style": "List",
-                "text": "<code class=\"language-none\">documentationURL</code> opens the Superalgos Documentation in the URL you configure. Use the complete URL, including the <code class=\"language-none\">https://</code> protocol header."
+                "text": "documentationURL opens the Superalgos Documentation in the URL you configure. Use the complete URL, including the https:// protocol header."
             }
         ]
     },
@@ -12717,18 +11965,10 @@
                 "style": "Text",
                 "text": "Setting up a reference to any node in the workspace and using the below parameter makes the step load next to the referenced node."
             },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-none\">"
-            },
             {
                 "style": "Text",
                 "text": "    \"positionAtReferenceParent\": true,"
             },
-            {
-                "style": "Text",
-                "text": "</code>"
-            },
             {
                 "style": "Text",
                 "text": "<H4>Messages</H4>"
@@ -12737,10 +11977,6 @@
                 "style": "Text",
                 "text": "Setting up a reference to any node in the workspace and using the below parameters allows placing different types of messages on the referenced node."
             },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-none\">"
-            },
             {
                 "style": "Text",
                 "text": "    \"setErrorMessageReferenceParent\": \"This is a simulated error message!\""
@@ -12761,10 +11997,6 @@
                 "style": "Text",
                 "text": "    \"setStatusReferenceParent\": \"This is a simulated status message!\""
             },
-            {
-                "style": "Text",
-                "text": "</code>"
-            },
             {
                 "style": "Text",
                 "text": "<H4>Centering and Zooming Into a Time Machine</H4>"
@@ -12789,10 +12021,6 @@
                 "style": "Text",
                 "text": "    \"repositionAtTimeMachineReferenceParent\": true,"
             },
-            {
-                "style": "Text",
-                "text": "</code>"
-            },
             {
                 "style": "Text",
                 "text": "<H4>Pressing Keys When on a Time Machine</H4>"
@@ -12801,10 +12029,6 @@
                 "style": "Text",
                 "text": "Setting up a reference to a time machine node in the charting space hierarchy and using the below parameters allows simulating the pressing of relevant key combinations when on a time machine."
             },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-none\">"
-            },
             {
                 "style": "Text",
                 "text": "    \"keyPressedTimeMachineReferenceParent\": {"
@@ -12830,16 +12054,12 @@
                 "text": "    }"
             },
             {
-                "style": "Text",
-                "text": "</code>"
+                "style": "List",
+                "text": "shiftKey, ctrlKey, and metaKey (Mac OS equivalent to Control) may be true or false."
             },
             {
                 "style": "List",
-                "text": "<code class=\"language-none\">shiftKey</code>, <code class=\"language-none\">ctrlKey<code class=\"language-none\">, and </code>metaKey</code> (Mac OS equivalent to Control) may be <code class=\"language-none\">true</code> or <code class=\"language-none\">false</code>."
-            },
-            {
-                "style": "List",
-                "text": "<code class=\"language-none\">key</code> may be any letter or number."
+                "text": "key may be any letter or number."
             },
             {
                 "style": "Text",
@@ -12847,11 +12067,7 @@
             },
             {
                 "style": "Text",
-                "text": "The example below changes the configuration of the three different scale nodes under a time machine. In this case, the time machine is the node referenced, the <code class=\"language-none\">nodePath</code> is the path of the node whose configuration must be changed relative to the <code class=\"language-none\">referenceParent<code class=\"language-none\">, and the </code>properties</code> parameter is the actual configuration to be set."
-            },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-none\">"
+                "text": "The example below changes the configuration of the three different scale nodes under a time machine. In this case, the time machine is the node referenced, the nodePath is the path of the node whose configuration must be changed relative to the referenceParent, and the properties parameter is the actual configuration to be set."
             },
             {
                 "style": "Text",
@@ -12956,10 +12172,6 @@
             {
                 "style": "Text",
                 "text": "    ]"
-            },
-            {
-                "style": "Text",
-                "text": "</code>"
             }
         ]
     },
@@ -12998,14 +12210,6 @@
             {
                 "style": "Text",
                 "text": "Select <i>Configure</i> on the menu to access the configuration."
-            },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-json\">"
-            },
-            {
-                "style": "Text",
-                "text": "</code\">"
             }
         ]
     },
@@ -13044,14 +12248,6 @@
             {
                 "style": "Text",
                 "text": "Select <i>Configure</i> on the menu to access the configuration."
-            },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-json\">"
-            },
-            {
-                "style": "Text",
-                "text": "</code\">"
             }
         ]
     },
@@ -13086,14 +12282,6 @@
             {
                 "style": "Text",
                 "text": "Select <i>Configure</i> on the menu to access the configuration."
-            },
-            {
-                "style": "Text",
-                "text": "<code class=\"language-json\">"
-            },
-            {
-                "style": "Text",
-                "text": "</code\">"
             }
         ]
     }
diff --git a/Projects/Superalgos/UI/Spaces/Docs-Space/DocsSpace.js b/Projects/Superalgos/UI/Spaces/Docs-Space/DocsSpace.js
index d880c8bbe..e8750bf08 100644
--- a/Projects/Superalgos/UI/Spaces/Docs-Space/DocsSpace.js
+++ b/Projects/Superalgos/UI/Spaces/Docs-Space/DocsSpace.js
@@ -52,8 +52,8 @@ function newSuperalgosDocSpace() {
         function setUpContextMenu() {
             window.contextMenu = {
                 editParagraph: editParagraph,
-                toJsCode: toJsCode,
-                toJsonCode: toJsonCode,
+                toJavascript: toJavascript,
+                toJson: toJson,
                 toText: toText,
                 toTitle: toTitle,
                 toSubtitle: toSubtitle,
@@ -93,6 +93,12 @@ function newSuperalgosDocSpace() {
                     if (selectedParagraph.id.indexOf('warning') >= 0) {
                         extraClassName = ' ' + 'docs-alert-warning'
                     }
+                    if (selectedParagraph.id.indexOf('javascript') >= 0) {
+                        extraClassName = ' ' + 'language-javascript'
+                    }
+                    if (selectedParagraph.id.indexOf('json') >= 0) {
+                        extraClassName = ' ' + 'language-json'
+                    }
 
                     textArea = document.createElement('textarea');
                     textArea.id = "textArea";
@@ -109,11 +115,11 @@ function newSuperalgosDocSpace() {
                 }
             }
 
-            function toJsCode() {
+            function toJavascript() {
 
             }
 
-            function toJsonCode() {
+            function toJson() {
 
             }