diff --git a/.gitignore b/.gitignore
index 4a7f73a2ed0d9f99a182a5855b29846de7bad09c..569981c7908b8bd48828c4bf67035778912eefca 100644
--- a/.gitignore
+++ b/.gitignore
@@ -22,3 +22,4 @@ logs
 .env
 .env.*
 !.env.example
+yarn.lock
\ No newline at end of file
diff --git a/components/md/renderer.vue b/components/md/renderer.vue
new file mode 100644
index 0000000000000000000000000000000000000000..81f3991a1dfe8bd4d1de4abfe60b42912ec2a162
--- /dev/null
+++ b/components/md/renderer.vue
@@ -0,0 +1,35 @@
+<template>
+    <div v-html="mdHtml"></div>
+</template>
+<script setup>
+import MarkdownIt from 'markdown-it'
+import hljs from 'highlight.js'
+import 'highlight.js/styles/atom-one-dark.css'
+const props = defineProps({
+    content: String
+})
+const mdHtml = ref('')
+const initMarkdownIt = new MarkdownIt({
+  html: true,
+  linkify: true,
+  typographer: true,
+  breaks: true,
+  highlight: function (str, lang) {
+    if (lang && hljs.getLanguage(lang)) {
+      try {
+        return `<pre><code class="language-${lang} hljs">` +
+               hljs.highlight(str, { language: lang, ignoreIllegals: true }).value +
+               '</code></pre>';
+      } catch (__) {}
+    }
+
+    return '<pre><code class="language-none hljs">' + md.utils.escapeHtml(str) + '</code></pre>';
+  }
+})
+const handleRenderMd = () => {
+    mdHtml.value = initMarkdownIt.render(props.content || '');
+}
+watch( () => props.content, () => {
+    handleRenderMd();
+}, { immediate: true })
+</script>
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 27781d33491c3b3e507a565a5680a203a8cc5db1..4680ed37937759f8d88607cd34baa5edb4f061b7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,8 @@
         "@iconify-json/simple-icons": "^1.1.101",
         "@nuxt/ui": "^2.16.0",
         "@vite-pwa/nuxt": "^0.7.0",
+        "highlight.js": "^11.9.0",
+        "markdown-it": "^14.1.0",
         "nuxt": "^3.11.2",
         "vue": "^3.4.27",
         "vue-router": "^4.3.2"
@@ -3708,6 +3710,8 @@
     },
     "node_modules/@parcel/watcher-wasm/node_modules/napi-wasm": {
       "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/napi-wasm/-/napi-wasm-1.1.0.tgz",
+      "integrity": "sha512-lHwIAJbmLSjF9VDRm9GoVOy9AGp3aIvkjv+Kvz9h16QR3uSVYH78PNQUnT2U4X53mhlnV2M7wrhibQ3GHicDmg==",
       "inBundle": true,
       "license": "MIT"
     },
@@ -8219,6 +8223,14 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/highlight.js": {
+      "version": "11.9.0",
+      "resolved": "https://registry.npmmirror.com/highlight.js/-/highlight.js-11.9.0.tgz",
+      "integrity": "sha512-fJ7cW7fQGCYAkgv4CPfwFHrfd/cLS4Hau96JuJ+ZTOWhjnhoeN1ub1tFmALm/+lW5z4WCAuAV9bm05AP0mS6Gw==",
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/hookable": {
       "version": "5.5.3",
       "resolved": "https://registry.npmjs.org/hookable/-/hookable-5.5.3.tgz",
@@ -9442,6 +9454,14 @@
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
       "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
     },
+    "node_modules/linkify-it": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmmirror.com/linkify-it/-/linkify-it-5.0.0.tgz",
+      "integrity": "sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==",
+      "dependencies": {
+        "uc.micro": "^2.0.0"
+      }
+    },
     "node_modules/listhen": {
       "version": "1.7.2",
       "resolved": "https://registry.npmjs.org/listhen/-/listhen-1.7.2.tgz",
@@ -9636,11 +9656,32 @@
         "node": "^16.14.0 || >=18.0.0"
       }
     },
+    "node_modules/markdown-it": {
+      "version": "14.1.0",
+      "resolved": "https://registry.npmmirror.com/markdown-it/-/markdown-it-14.1.0.tgz",
+      "integrity": "sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==",
+      "dependencies": {
+        "argparse": "^2.0.1",
+        "entities": "^4.4.0",
+        "linkify-it": "^5.0.0",
+        "mdurl": "^2.0.0",
+        "punycode.js": "^2.3.1",
+        "uc.micro": "^2.1.0"
+      },
+      "bin": {
+        "markdown-it": "bin/markdown-it.mjs"
+      }
+    },
     "node_modules/mdn-data": {
       "version": "2.0.30",
       "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
       "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA=="
     },
+    "node_modules/mdurl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/mdurl/-/mdurl-2.0.0.tgz",
+      "integrity": "sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w=="
+    },
     "node_modules/media-typer": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
@@ -11711,6 +11752,14 @@
         "node": ">=6"
       }
     },
+    "node_modules/punycode.js": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmmirror.com/punycode.js/-/punycode.js-2.3.1.tgz",
+      "integrity": "sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -13584,6 +13633,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/uc.micro": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/uc.micro/-/uc.micro-2.1.0.tgz",
+      "integrity": "sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A=="
+    },
     "node_modules/ufo": {
       "version": "1.5.3",
       "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.5.3.tgz",
@@ -17677,6 +17731,8 @@
       "dependencies": {
         "napi-wasm": {
           "version": "1.1.0",
+          "resolved": "https://registry.npmmirror.com/napi-wasm/-/napi-wasm-1.1.0.tgz",
+          "integrity": "sha512-lHwIAJbmLSjF9VDRm9GoVOy9AGp3aIvkjv+Kvz9h16QR3uSVYH78PNQUnT2U4X53mhlnV2M7wrhibQ3GHicDmg==",
           "bundled": true
         }
       }
@@ -20728,6 +20784,11 @@
         "function-bind": "^1.1.2"
       }
     },
+    "highlight.js": {
+      "version": "11.9.0",
+      "resolved": "https://registry.npmmirror.com/highlight.js/-/highlight.js-11.9.0.tgz",
+      "integrity": "sha512-fJ7cW7fQGCYAkgv4CPfwFHrfd/cLS4Hau96JuJ+ZTOWhjnhoeN1ub1tFmALm/+lW5z4WCAuAV9bm05AP0mS6Gw=="
+    },
     "hookable": {
       "version": "5.5.3",
       "resolved": "https://registry.npmjs.org/hookable/-/hookable-5.5.3.tgz",
@@ -21591,6 +21652,14 @@
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
       "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
     },
+    "linkify-it": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmmirror.com/linkify-it/-/linkify-it-5.0.0.tgz",
+      "integrity": "sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==",
+      "requires": {
+        "uc.micro": "^2.0.0"
+      }
+    },
     "listhen": {
       "version": "1.7.2",
       "resolved": "https://registry.npmjs.org/listhen/-/listhen-1.7.2.tgz",
@@ -21756,11 +21825,29 @@
         "ssri": "^10.0.0"
       }
     },
+    "markdown-it": {
+      "version": "14.1.0",
+      "resolved": "https://registry.npmmirror.com/markdown-it/-/markdown-it-14.1.0.tgz",
+      "integrity": "sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==",
+      "requires": {
+        "argparse": "^2.0.1",
+        "entities": "^4.4.0",
+        "linkify-it": "^5.0.0",
+        "mdurl": "^2.0.0",
+        "punycode.js": "^2.3.1",
+        "uc.micro": "^2.1.0"
+      }
+    },
     "mdn-data": {
       "version": "2.0.30",
       "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
       "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA=="
     },
+    "mdurl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/mdurl/-/mdurl-2.0.0.tgz",
+      "integrity": "sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w=="
+    },
     "media-typer": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
@@ -23157,6 +23244,11 @@
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
       "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg=="
     },
+    "punycode.js": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmmirror.com/punycode.js/-/punycode.js-2.3.1.tgz",
+      "integrity": "sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA=="
+    },
     "queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -24520,6 +24612,11 @@
         "possible-typed-array-names": "^1.0.0"
       }
     },
+    "uc.micro": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/uc.micro/-/uc.micro-2.1.0.tgz",
+      "integrity": "sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A=="
+    },
     "ufo": {
       "version": "1.5.3",
       "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.5.3.tgz",
diff --git a/package.json b/package.json
index 2e0f77a76fc2e9375f6b51cfc049cb92f4e1bea5..c17ae8d11fdf868ddcee6a3ec3234a671aa3c76c 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,8 @@
     "@iconify-json/simple-icons": "^1.1.101",
     "@nuxt/ui": "^2.16.0",
     "@vite-pwa/nuxt": "^0.7.0",
+    "highlight.js": "^11.9.0",
+    "markdown-it": "^14.1.0",
     "nuxt": "^3.11.2",
     "vue": "^3.4.27",
     "vue-router": "^4.3.2"
diff --git a/pages/md.vue b/pages/md.vue
new file mode 100644
index 0000000000000000000000000000000000000000..fb05beecdb83fde549a290eb0e606a8fc6e9e6da
--- /dev/null
+++ b/pages/md.vue
@@ -0,0 +1,8 @@
+<template>
+    <MdRenderer :content="mdContent" />
+</template>
+<script setup>
+const mdContent = ref('');
+const { data } = await useFetch('https://ieditor-ai.inscode.cc/ai/md', { method: 'post' });
+mdContent.value = data.value.content;
+</script>
\ No newline at end of file