Update playground.html

playground.html

@@ -547,6 +547,76 @@
                 opacity: 1;
             }
         }
+      /* markdown */
+/* Add this to your style section */
+.message pre {
+    background-color: rgba(15, 15, 30, 0.6);
+    padding: 10px;
+    border-radius: 6px;
+    overflow-x: auto;
+    margin: 10px 0;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.message code {
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 12px;
+    background-color: rgba(30, 30, 50, 0.3);
+    padding: 2px 4px;
+    border-radius: 3px;
+}
+
+.message pre code {
+    background-color: transparent;
+    padding: 0;
+}
+
+.message blockquote {
+    border-left: 3px solid var(--primary-blue);
+    padding-left: 10px;
+    margin: 10px 0;
+    color: var(--text-muted);
+}
+
+.message h1, .message h2, .message h3 {
+    margin: 15px 0 5px 0;
+}
+
+.message ul, .message ol {
+    margin-left: 20px;
+    margin-bottom: 8px;
+}
+
+.message a {
+    color: var(--primary-blue);
+    text-decoration: underline;
+}
+
+.message p {
+    margin-bottom: 8px;
+}
+
+.message img {
+    max-width: 100%;
+    border-radius: 8px;
+    margin: 10px 0;
+}
+
+.message table {
+    border-collapse: collapse;
+    width: 100%;
+    margin: 15px 0;
+}
+
+.message th, .message td {
+    border: 1px solid var(--border-color);
+    padding: 8px;
+    text-align: left;
+}
+
+.message th {
+    background-color: rgba(15, 15, 30, 0.6);
+}
     </style>
 </head>
 
@@ -791,12 +861,21 @@ document.addEventListener('DOMContentLoaded', function() {
                 }
             }
 
-            // Apply markdown-like formatting
+// Replace the existing formatting code in the appendMessage function
             const formattedContent = content
-                .replace(/```([\s\S]*?)```/g, (match, code) => `<pre><code>${code}</code></pre>`)
-                .replace(/(\d+)\.\s*/g, '<br>$1. ')
-                .replace(/\n/g, '<br>')
-                .replace(/\*\*(.*?)\*\*/g, (match, p1) => '<strong>' + p1 + '</strong>');
+            .replace(/```([\s\S]*?)```/g, (match, code) => `<pre><code>${code}</code></pre>`)
+            .replace(/`([^`]+)`/g, '<code>$1</code>')
+            .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
+            .replace(/\*(.*?)\*/g, '<em>$1</em>')
+            .replace(/~~(.*?)~~/g, '<del>$1</del>')
+            .replace(/\[(.*?)\]\((.*?)\)/g, '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>')
+            .replace(/^#{3}\s+(.*?)$/gm, '<h3>$1</h3>')
+            .replace(/^#{2}\s+(.*?)$/gm, '<h2>$1</h2>')
+            .replace(/^#{1}\s+(.*?)$/gm, '<h1>$1</h1>')
+            .replace(/^\>\s+(.*?)$/gm, '<blockquote>$1</blockquote>')
+            .replace(/^(\d+)\.\s+(.*?)$/gm, '<ol start="$1"><li>$2</li></ol>')
+            .replace(/^[-*]\s+(.*?)$/gm, '<ul><li>$1</li></ul>')
+            .replace(/\n/g, '<br>');
 
             currentStreamingMessage.innerHTML += formattedContent;