parse markdown

1 files changed, 91 insertions, 3 deletions

diff --git a/index.html b/index.html
index 368cce8..484353c 100644
--- a/index.html
+++ b/index.html
@@ -19,8 +19,7 @@
       <p id="placeholder">Ask below :-)</p>

     </div>

     <form style="display: flex; justify-content: center; align-items: center; padding: 20px; width: 80%">

-      <input id="prompt" type="text" placeholder="Enter your message here"

-        style="padding: 10px; width: 100%; margin-right: 10px;">

+      <input id="prompt" type="text" placeholder="Enter your message here" style="padding: 10px; width: 100%; margin-right: 10px;">

       <button id="generate" type="submit" style="padding: 10px;">Generate</button>

     </form>

   </main>

@@ -59,7 +58,7 @@
         })

       })

         .then(response => response.json())

-        .then(data => appendChat(data.response))

+        .then(data => appendChat(markdownParser(data.response)))

         .catch(error => console.error(error));

     });

     function appendChat(message) {

@@ -67,6 +66,95 @@
       messageDisplay.textContent = message;

       chat.appendChild(messageDisplay);

     }

+

+    // simple markdown parser

+    function escapeHtml(html) {

+      var line = html.split('<').join('&lt;');

+      line = line.split('>').join('&gt;');

+      return line;

+    }

+    function markdownParser(text) {

+      // Regular expressions for different markdown elements

+      const headingRegex = /^#+ (.+)$/;

+      const boldRegex = /\*\*(.+?)\*\*/;

+      const italicRegex = /\_\_(.+?)\_\_/;

+      const listRegex = /^\* (.+)$/;

+      const blockPreRegex = /```.*/;

+      const inlinePreRegex = /`(.+?)`/;

+

+      // Split the text into lines

+      const lines = text.split('\n');

+

+      // Initialize the parsed output

+      const output = [];

+

+      var preMode = false;

+      var listMode = false;

+      for (var line of lines) {

+        // Check for pre-formatted block mode

+        const preMatch = line.match(blockPreRegex);

+        if (preMatch) {

+          if (preMode)

+            output.push('</pre>');

+          else

+            output.push('<pre>');

+          preMode = !preMode;

+          continue;

+        }

+        if (preMode) {

+          output.push(escapeHtml(line));

+          continue;

+        }

+

+        // Check for inline pre-formatted mode

+        var inlinePreMatch = line.match(inlinePreRegex);

+        while (inlinePreMatch) {

+          line = line.replace(inlinePreMatch[0], `<span style="font-family:monospace">${escapeHtml(inlinePreMatch[1])}</span>`);

+          inlinePreMatch = line.match(inlinePreRegex);

+        }

+

+        // handle bold text

+        var boldMatch = line.match(boldRegex);

+        while (boldMatch) {

+          line = line.replace(boldMatch[0], `<strong>${boldMatch[1]}</strong>`);

+          boldMatch = line.match(boldRegex);

+        }

+

+        // handle italic text

+        var italicMatch = line.match(italicRegex);

+        while (italicMatch) {

+          line = line.replace(italicMatch[0], `<strong>${italicMatch[1]}</strong>`);

+          italicMatch = line.match(italicRegex);

+        }

+

+        // List

+        const listMatch = line.match(listRegex);

+        if (listMatch) {

+          if (!listMode)

+            output.push('<ul>');

+          listMode = true;

+          output.push(`<li>${listMatch[1]}</li>`);

+          continue;

+        }

+        else {

+          listMode = false;

+          output.push('</ul>');

+        }

+

+        // Check for headings

+        const headingMatch = line.match(headingRegex);

+        if (headingMatch) {

+          output.push(`<h1>${headingMatch[1]}</h1>`);

+          continue;

+        }

+

+        // Check for paragraphs

+        output.push(`<p>${line}</p>`);

+      }

+

+      // Join the parsed elements into HTML

+      return output.join('\n');

+    }

   </script>

 </body>