markdown

package.json

@@ -12,6 +12,7 @@
     "autoprefixer": "^10.4.14",
     "postcss": "^8.4.21",
     "preact": "^10.11.3",
+    "preact-markdown": "^2.1.0",
     "sakura.css": "^1.4.1",
     "tailwindcss": "^3.2.7"
   },

src/message.tsx

@@ -1,5 +1,11 @@
+import Markdown from "preact-markdown";
 import { ChatStore } from "./app";
 
+const Pre: React.FC<any> = ({ children, props }) => (
+  <div class="rounded p-1 bg-black text-white" {...props}>{children}</div>
+);
+const Code: React.FC<any> = ({ children }) => <code className="overflow-scroll break-keep">{children}</code>;
+
 interface Props {
   messageIndex: number;
   chatStore: ChatStore;
@@ -31,6 +37,10 @@ export default function Message(props: Props) {
       🗑️
     </button>
   );
+  const codeMatches = chat.content.match(/(```([\s\S]*?)```$)/);
+  const AnyMarkdown = Markdown as any;
+  console.log("codeMatches", codeMatches);
+  if (codeMatches) console.log("matches", codeMatches[0]);
   return (
     <div
       className={`flex ${
@@ -44,7 +54,17 @@ export default function Message(props: Props) {
             : "bg-green-400"
         }`}
       >
-        <p className="message-content">{chat.content}</p>
+        <p className="message-content">
+          <AnyMarkdown
+            markdown={chat.content}
+            markupOpts={{
+              components: {
+                code: Code,
+                pre: Pre,
+              },
+            }}
+          />
+        </p>
         <DeleteIcon />
       </div>
     </div>

yarn.lock

@@ -804,6 +804,11 @@ lru-cache@^5.1.1:
   dependencies:
     yallist "^3.0.2"
 
+marked@^4.0.10:
+  version "4.3.0"
+  resolved "https://registry.npmmirror.com/marked/-/marked-4.3.0.tgz#796362821b019f734054582038b116481b456cf3"
+  integrity sha512-PRsaiG84bK+AMvxziE/lCFss8juXjNaWzVbN5tXAm4XjeaS9NAHhop+PjQxz2A9h8Q4M/xGmzP8vqNwy6JeK0A==
+
 merge2@^1.3.0:
   version "1.4.1"
   resolved "https://registry.npmmirror.com/merge2/-/merge2-1.4.1.tgz#4368892f885e907455a6fd7dc55c0c9d404990ae"
@@ -925,6 +930,19 @@ postcss@^8.0.9, postcss@^8.4.21:
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
+preact-markdown@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.npmmirror.com/preact-markdown/-/preact-markdown-2.1.0.tgz#c271cdd084b8854778f7d8e3640bbe9a7ea6ba4d"
+  integrity sha512-6c2hfarjLFkVDNa1hUKytXID6wl6yilZnGb2y83xKXnfk5SpXYAwhJc+JENgffAcNALWggqvX/ezlk8/8qJsuA==
+  dependencies:
+    marked "^4.0.10"
+    preact-markup "^2.1.1"
+
+preact-markup@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.npmmirror.com/preact-markup/-/preact-markup-2.1.1.tgz#0451e7eed1dac732d7194c34a7f16ff45a2cfdd7"
+  integrity sha512-8JL2p36mzK8XkspOyhBxUSPjYwMxDM0L5BWBZWxsZMVW8WsGQrYQDgVuDKkRspt2hwrle+Cxr/053hpc9BJwfw==
+
 preact@^10.11.3:
   version "10.13.1"
   resolved "https://registry.npmmirror.com/preact/-/preact-10.13.1.tgz#d220bd8771b8fa197680d4917f3cefc5eed88720"