diff --git a/package.json b/package.json
index 63fadc6..f2a1e71 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "autoprefixer": "^10.4.14",
     "postcss": "^8.4.24",
     "preact": "^10.15.1",
+    "preact-markdown": "^2.1.0",
     "sakura.css": "^1.4.1",
     "tailwindcss": "^3.3.2"
   },
diff --git a/src/message.tsx b/src/message.tsx
index f608cfc..26196ee 100644
--- a/src/message.tsx
+++ b/src/message.tsx
@@ -1,6 +1,7 @@
 import { useState } from "preact/hooks";
 import { ChatStore } from "./app";
 import { calculate_token_length } from "./chatgpt";
+import Markdown from "preact-markdown";
 
 interface Props {
   messageIndex: number;
@@ -13,6 +14,7 @@ export default function Message(props: Props) {
   const chat = chatStore.history[messageIndex];
   const [showEdit, setShowEdit] = useState(false);
   const [showCopiedHint, setShowCopiedHint] = useState(false);
+  const [renderMarkdown, setRenderWorkdown] = useState(false);
   const DeleteIcon = () => (
     <button
       onClick={() => {
@@ -87,9 +89,14 @@ export default function Message(props: Props) {
             } ${chat.hide ? "opacity-50" : ""}`}
           >
             <p className="message-content">
-              {chat.hide
-                ? chat.content.split("\n")[0].slice(0, 16) + "... (deleted)"
-                : chat.content}
+              {chat.hide ? (
+                chat.content.split("\n")[0].slice(0, 16) + "... (deleted)"
+              ) : renderMarkdown ? (
+                // @ts-ignore
+                <Markdown markdown={chat.content} />
+              ) : (
+                chat.content
+              )}
             </p>
             <div className="w-full flex justify-between">
               <DeleteIcon />
@@ -166,6 +173,12 @@ export default function Message(props: Props) {
                 <label className="dark:text-white">example</label>
                 <input type="checkbox" checked={chat.example} />
               </span>
+              <span
+                onClick={(event: any) => setRenderWorkdown(!renderMarkdown)}
+              >
+                <label className="dark:text-white">render</label>
+                <input type="checkbox" checked={renderMarkdown} />
+              </span>
             </div>
           )}
         </div>
diff --git a/yarn.lock b/yarn.lock
index 9491c24..046da5c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -846,6 +846,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"
@@ -1000,6 +1005,19 @@ postcss@^8.4.23, postcss@^8.4.24:
     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.15.1:
   version "10.15.1"
   resolved "https://registry.npmmirror.com/preact/-/preact-10.15.1.tgz#a1de60c9fc0c79a522d969c65dcaddc5d994eede"