From d7b1cd912c21eb1f270ff1e756d6cd40d0a4b8a9 Mon Sep 17 00:00:00 2001
From: Yash-Singh1 <saiansh2525@gmail.com>
Date: Tue, 10 May 2022 18:08:32 -0700
Subject: [PATCH] chore: no lint for html in md

---
 .eslintrc.json                                | 14 +++++++-
 docs/classDiagram.md                          | 14 ++++++--
 .../flowchart.md                              | 32 ++++++++++++-------
 docs/flowchart.md                             | 14 ++++++--
 docs/gantt.md                                 | 20 ++++++++----
 5 files changed, 70 insertions(+), 24 deletions(-)

diff --git a/.eslintrc.json b/.eslintrc.json
index ef7c2d3c7..9c755a0e2 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -13,7 +13,13 @@
     },
     "sourceType": "module"
   },
-  "extends": ["eslint:recommended", "plugin:jsdoc/recommended", "plugin:json/recommended", "plugin:markdown/recommended", "plugin:prettier/recommended"],
+  "extends": [
+    "eslint:recommended",
+    "plugin:jsdoc/recommended",
+    "plugin:json/recommended",
+    "plugin:markdown/recommended",
+    "plugin:prettier/recommended"
+  ],
   "plugins": ["html", "jest", "jsdoc", "json", "prettier"],
   "rules": {
     "no-prototype-builtins": "off",
@@ -35,6 +41,12 @@
         "no-undef": "off",
         "jsdoc/require-jsdoc": "off"
       }
+    },
+    {
+      "files": "./**/*.md/*.html",
+      "rules": {
+        "prettier/prettier": "off"
+      }
     }
   ]
 }
diff --git a/docs/classDiagram.md b/docs/classDiagram.md
index 4877b10ab..58c50e026 100644
--- a/docs/classDiagram.md
+++ b/docs/classDiagram.md
@@ -402,7 +402,9 @@ click Shape2 call callbackFunction() "This is a tooltip for a callback"
 
 ```html
 <script>
-    var callbackFunction = function(){ alert('A callback was triggered'); }
+    var callbackFunction = function () {
+      alert('A callback was triggered');
+    };
 </script>
 ```
 
@@ -452,8 +454,14 @@ Beginners tip, a full example using interactive links in an html context:
   </div>
 
   <script>
-    var callback = function(){ alert('A callback was triggered'); }; var config = { startOnLoad:true,
-    securityLevel:'loose', }; mermaid.initialize(config);
+    var callback = function () {
+        alert('A callback was triggered');
+    };
+    var config = {
+        startOnLoad: true,
+        securityLevel: 'loose'
+    };
+    mermaid.initialize(config);
   </script>
 </body>
 ```
diff --git a/docs/diagrams-and-syntax-and-examples/flowchart.md b/docs/diagrams-and-syntax-and-examples/flowchart.md
index b595610ff..68e274142 100644
--- a/docs/diagrams-and-syntax-and-examples/flowchart.md
+++ b/docs/diagrams-and-syntax-and-examples/flowchart.md
@@ -414,7 +414,9 @@ Examples of tooltip usage below:
 
 ```html
 <script>
-  var callback = function(){ alert('A callback was triggered'); };
+  var callback = function () {
+    alert('A callback was triggered');
+  };
 </script>
 ```
 
@@ -462,8 +464,18 @@ Beginners tip, a full example using interactive links in a html context:
   </div>
 
   <script>
-    var callback = function(){ alert('A callback was triggered'); }; var config = { startOnLoad:true,
-    flowchart:{ useMaxWidth:true, htmlLabels:true, curve:'cardinal', }, securityLevel:'loose', };
+    var callback = function () {
+        alert('A callback was triggered');
+    };
+    var config = {
+        startOnLoad: true,
+        flowchart: {
+            useMaxWidth: true,
+            htmlLabels: true,
+            curve: 'cardinal'
+        }
+        securityLevel:'loose'
+    };
     mermaid.initialize(config);
   </script>
 </body>
@@ -565,14 +577,12 @@ below:
 
 **Example style**
 
-```html
-<style>
-    .cssClass > rect{
-        fill:#FF0000;
-        stroke:#FFFF00;
-        stroke-width:4px;
-    }
-</style>
+```css
+.cssClass > rect {
+    fill: #FF0000;
+    stroke: #FFFF00;
+    stroke-width: 4px;
+}
 ```
 
 **Example definition**
diff --git a/docs/flowchart.md b/docs/flowchart.md
index 967914417..a86260ebf 100644
--- a/docs/flowchart.md
+++ b/docs/flowchart.md
@@ -435,7 +435,9 @@ Examples of tooltip usage below:
 
 ```html
 <script>
-  var callback = function(){ alert('A callback was triggered'); };
+  var callback = function () {
+      alert('A callback was triggered');
+  };
 </script>
 ```
 
@@ -484,8 +486,14 @@ Beginners tip, a full example using interactive links in a html context:
   </div>
 
   <script>
-    var callback = function(){ alert('A callback was triggered'); }; var config = { startOnLoad:true,
-    flowchart:{ useMaxWidth:true, htmlLabels:true, curve:'cardinal', }, securityLevel:'loose', };
+    var callback = function () {
+        alert('A callback was triggered');
+    };
+    var config = {
+        startOnLoad: true,
+        flowchart: { useMaxWidth: true, htmlLabels: true, curve: 'cardinal' },
+        securityLevel:'loose'
+    };
     mermaid.initialize(config);
   </script>
 </body>
diff --git a/docs/gantt.md b/docs/gantt.md
index 3d8fdbb3b..3db8f0e71 100644
--- a/docs/gantt.md
+++ b/docs/gantt.md
@@ -28,6 +28,7 @@ gantt
     Task in sec      :2014-01-12  , 12d
     another task      : 24d
 ```
+
 ## Syntax
 
 ```mermaid-example
@@ -64,6 +65,7 @@ gantt
 ```
 
 It is possible to set multiple dependencies separated by space:
+
 ```mermaid-example
     gantt
         apple :a, 2017-07-20, 1w
@@ -82,10 +84,9 @@ You can divide the chart into various sections, for example to separate differen
 
 To do so, start a line with the `section` keyword and give it a name. (Note that unlike with the [title for the entire chart](#title), this name is *required*.
 
-
 ### Milestones
 
-You can add milestones to the diagrams. Milestones differ from tasks as they represent a single instant in time and are identified by the keyword `milestone`. Below is an example on how to use milestones. As you may notice, the exact location of the milestone is determined by the initial date for the milestone and the "duration" of the task this way: *initial date*+*duration*/2. 
+You can add milestones to the diagrams. Milestones differ from tasks as they represent a single instant in time and are identified by the keyword `milestone`. Below is an example on how to use milestones. As you may notice, the exact location of the milestone is determined by the initial date for the milestone and the "duration" of the task this way: *initial date*+*duration*/2.
 
 ```mermaid-example
 gantt 
@@ -102,7 +103,6 @@ Final milestone : milestone, m2, 18:14, 2min
 
 `dateFormat` defines the format of the date **input** of your gantt elements. How these dates are represented in the rendered chart **output** are defined by `axisFormat`.
 
-
 ### Input date format
 
 The default input date format is `YYYY-MM-DD`. You can define your custom ``dateFormat``.
@@ -331,9 +331,17 @@ Beginners tip, a full example using interactive links in an html context:
   </div>
 
   <script>
-    var printArguments = function(arg1, arg2, arg3) { alert('printArguments called with arguments: ' +
-arg1 + ', ' + arg2 + ', ' + arg3); }; var printTask = function(taskId) { alert('taskId: ' + taskId);
-    }; var config = { startOnLoad:true, securityLevel:'loose', }; mermaid.initialize(config);
+    var printArguments = function(arg1, arg2, arg3) {
+      alert('printArguments called with arguments: ' + arg1 + ', ' + arg2 + ', ' + arg3);
+    }
+    var printTask = function(taskId) {
+      alert('taskId: ' + taskId);
+    }
+    var config = {
+      startOnLoad:true,
+      securityLevel:'loose',
+    };
+    mermaid.initialize(config);
   </script>
 </body>
 ```