From 1f6e4a088715183556a0a9ea10c22541f3d4c594 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Mon, 5 Sep 2022 01:33:47 +0530
Subject: [PATCH] Fix pre

---
 docs/n00b-gettingStarted.md | 15 +++++----------
 docs/usage.md               | 16 ++++++----------
 2 files changed, 11 insertions(+), 20 deletions(-)

diff --git a/docs/n00b-gettingStarted.md b/docs/n00b-gettingStarted.md
index bc329803e..950c4eba6 100644
--- a/docs/n00b-gettingStarted.md
+++ b/docs/n00b-gettingStarted.md
@@ -99,8 +99,7 @@ c. The `mermaid.initialize()` call, which dictates the appearance of diagrams an
         A[Client] --> B[Load Balancer] 
         B --> C[Server01] 
         B --> D[Server02]
-    </pre
-  >
+  </pre>
 </body>
 ```
 
@@ -145,8 +144,7 @@ Rendering in Mermaid is initialized by `mermaid.initialize()` call. You can plac
             A[Client] --> B[Load Balancer] 
             B --> C[Server1] 
             B --> D[Server2]
-        </pre
-    >
+    </pre>
 
     And here is another:
     <pre class="mermaid">
@@ -155,8 +153,7 @@ Rendering in Mermaid is initialized by `mermaid.initialize()` call. You can plac
             B(Load Balancer) 
             B -->|tcp_456| C[Server1] 
             B -->|tcp_456| D[Server2]
-        </pre
-    >
+    </pre>
   </body>
 </html>
 ```
@@ -175,15 +172,13 @@ In this example mermaid.js is referenced in `src` as a separate JavaScript file,
             A --- B 
             B-->C[fa:fa-ban forbidden] 
             B-->D(fa:fa-spinner);
-        </pre
-    >
+    </pre>
     <pre class="mermaid">
             graph TD 
             A[Client] --> B[Load Balancer] 
             B --> C[Server1] 
             B --> D[Server2]
-        </pre
-    >
+    </pre>
     <script src="The\Path\In\Your\Package\mermaid.js"></script>
     <script>
       mermaid.initialize({ startOnLoad: true });
diff --git a/docs/usage.md b/docs/usage.md
index d29cbdad5..026625894 100644
--- a/docs/usage.md
+++ b/docs/usage.md
@@ -1,7 +1,5 @@
 # Usage
 
-**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/usage.md)
-
 Mermaid is a JavaScript tool that makes use of a Markdown based syntax to render customizable diagrams, charts and visualizations.
 
 Diagrams can be re-rendered/modified by modifying their descriptions.
@@ -257,12 +255,11 @@ This is the renderer used for transforming the documentation from Markdown to ht
 ```javascript
 var renderer = new marked.Renderer();
 renderer.code = function (code, language) {
-    if (code.match(/^sequenceDiagram/) || code.match(/^graph/)) {
-<pre class="mermaid">' + code + '</div>';
-    } else {
-        return '<pre><code>' + code + '</code>
-        return '</pre>';
-    }
+  if (code.match(/^sequenceDiagram/) || code.match(/^graph/)) {
+    return '<pre class="mermaid">' + code + '</pre>';
+  } else {
+    return '<pre><code>' + code + '</code></pre>';
+  }
 };
 ```
 
@@ -281,8 +278,7 @@ module.exports = (options) ->
       if not hasMermaid
         hasMermaid = true
         html += '<script src="'+options.mermaidPath+'"></script>'
-      html + '<div class="mermaid">'+code+'
-</pre>'
+      html + '<pre class="mermaid">'+code+'</pre>'
     else
       @defaultCode(code, language)