fix: Use AST to replace notes & warnings.

docs/config/usage.md

@@ -119,11 +119,9 @@ Values:
 - **antiscript**: html tags in text are allowed, (only script element is removed), click functionality is enabled
 - **sandbox**: With this security level all rendering takes place in a sandboxed iframe. This prevent any JavaScript running in the context. This may hinder interactive functionality of the diagram like scripts, popups in sequence diagram or links to other tabs/targets etc.
 
-> **Note**\
+> **Note**
 > This changes the default behaviour of mermaid so that after upgrade to 8.2, unless the `securityLevel` is not changed, tags in flowcharts are encoded as tags and clicking is disabled.
 > **sandbox** security level is still in the beta version.
->
-> >
 
 **If you are taking responsibility for the diagram source security you can set the `securityLevel` to a value of your choosing . This allows clicks and tags are allowed.**
 
@@ -188,10 +186,8 @@ Or with no config object, and a jQuery selection:
 mermaid.init(undefined, $('#someId .yetAnotherClass'));
 ```
 
-> **Warning**\
+> **Warning**
 > This type of integration is deprecated. Instead the preferred way of handling more complex integration is to use the mermaidAPI instead.
->
-> >
 
 ## Usage with webpack
 
@@ -230,7 +226,7 @@ The example code below is an extract of what mermaid does when using the API. Th
 bind events to an SVG when using the API for rendering.
 
 ```javascript
-var insertSvg = function (svgCode, bindFunctions) {
+const insertSvg = function (svgCode, bindFunctions) {
   element.innerHTML = svgCode;
   if (typeof callback !== 'undefined') {
     callback(id);
@@ -238,7 +234,7 @@ var insertSvg = function (svgCode, bindFunctions) {
   bindFunctions(element);
 };
 
-var id = 'theGraph';
+const id = 'theGraph';
 
 mermaidAPI.render(id, txt, insertSvg, element);
 ```
@@ -254,7 +250,7 @@ mermaidAPI.render(id, txt, insertSvg, element);
 This is the renderer used for transforming the documentation from Markdown to html with mermaid diagrams in the html.
 
 ```javascript
-var renderer = new marked.Renderer();
+const renderer = new marked.Renderer();
 renderer.code = function (code, language) {
   if (code.match(/^sequenceDiagram/) || code.match(/^graph/)) {
     return '<pre class="mermaid">' + code + '</pre>';
@@ -305,8 +301,8 @@ mermaid.parseError = function (err, hash) {
   displayErrorInGui(err);
 };
 
-var textFieldUpdated = function () {
-  var textStr = getTextFromFormField('code');
+const textFieldUpdated = function () {
+  const textStr = getTextFromFormField('code');
 
   if (mermaid.parse(textStr)) {
     reRender(textStr);
@@ -345,10 +341,8 @@ on what kind of integration you use.
 </script>
 ```
 
-> **Note**\
+> **Note**
 > This is the preferred way of configuring mermaid.
->
-> >
 
 ### The following methods are deprecated and are kept only for backwards compatibility.
 
@@ -364,10 +358,8 @@ approach are:
 mermaid.startOnLoad = true;
 ```
 
-> **Warning**\
+> **Warning**
 > This way of setting the configuration is deprecated. Instead the preferred way is to use the initialize method. This functionality is only kept for backwards compatibility.
->
-> >
 
 ## Using the mermaid_config
 
@@ -381,10 +373,8 @@ approach are:
 mermaid_config.startOnLoad = true;
 ```
 
-> **Warning**\
+> **Warning**
 > This way of setting the configuration is deprecated. Instead the preferred way is to use the initialize method. This functionality is only kept for backwards compatibility.
->
-> >
 
 ## Using the mermaid.init call
 
@@ -397,7 +387,5 @@ To set some configuration via the mermaid object. The two parameters that are su
 mermaid_config.startOnLoad = true;
 ```
 
-> **Warning**\
+> **Warning**
 > This way of setting the configuration is deprecated. Instead the preferred way is to use the initialize method. This functionality is only kept for backwards compatibility.
->
-> >