diff --git a/package.json b/package.json
index b285a5c617647f609cc8ad3fb475f3b9b3393a21..b5838734119dc6711eb5e4dd93d86eab268f73e0 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,10 @@
   },
   "dependencies": {
     "guess": "^1.0.2",
-    "vue": "^3.2.37"
+    "highlight.js": "^11.10.0",
+    "marked": "^14.1.3",
+    "vue": "^3.2.37",
+    "vue3-markdown-it": "^1.0.10"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^3.0.1",
diff --git a/src/App.vue b/src/App.vue
index 633a5dfe4e547c48bfa93740a290ba5ba370930a..e0796c05bb59882739e299326792985673a42386 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,47 +1,18 @@
-<script setup>
-import HelloWorld from './components/HelloWorld.vue'
-import TheWelcome from './components/TheWelcome.vue'
-</script>
-
 <template>
-  <header>
-    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
-
-    <div class="wrapper">
-      <HelloWorld msg="You did it!" />
-    </div>
-  </header>
-
-  <main>
-    <TheWelcome />
-  </main>
+  <div>
+    <MarkdownViewer :markdown="markdownContent" />
+  </div>
 </template>
 
-<style scoped>
-header {
-  line-height: 1.5;
-}
-
-.logo {
-  display: block;
-  margin: 0 auto 2rem;
-}
-
-@media (min-width: 1024px) {
-  header {
-    display: flex;
-    place-items: center;
-    padding-right: calc(var(--section-gap) / 2);
-  }
+<script setup>
+import MarkdownViewer from './components/MarkdownViewer.vue';
 
-  .logo {
-    margin: 0 2rem 0 0;
-  }
+const markdownContent = `# 标题
+这是一个 Markdown 示例。
+> 123
 
-  header .wrapper {
-    display: flex;
-    place-items: flex-start;
-    flex-wrap: wrap;
-  }
-}
-</style>
+\`\`\`javascript
+console.log('Hello, World!');
+\`\`\`
+`;
+</script>
\ No newline at end of file
diff --git a/src/components/MarkdownViewer.vue b/src/components/MarkdownViewer.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a51b3f40dd1b8cfd424d6d889944c133d657f09b
--- /dev/null
+++ b/src/components/MarkdownViewer.vue
@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <vue3-markdown-it :source="markdown" />
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import Vue3MarkdownIt from 'vue3-markdown-it';
+
+const props = defineProps({
+  markdown: {
+    type: String,
+    required: true
+  }
+});
+
+// 注册组件
+const components = {
+  Vue3MarkdownIt
+};
+</script>
+
+<style>
+/* 引入 highlight.js 的样式 */
+@import 'highlight.js/styles/atom-one-dark.css';
+</style>
\ No newline at end of file
diff --git a/src/components/MarkdownViewer1.vue b/src/components/MarkdownViewer1.vue
new file mode 100644
index 0000000000000000000000000000000000000000..dd515f33d114bf7fb585fba968ca2bf847deed4d
--- /dev/null
+++ b/src/components/MarkdownViewer1.vue
@@ -0,0 +1,48 @@
+<template>
+  <div v-html="compiledMarkdown"></div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue';
+import { marked } from 'marked';
+import hljs from 'highlight.js';
+
+// 设置 marked 的渲染器以支持代码高亮
+const renderer = new marked.Renderer();
+renderer.code = (code, language) => {
+  return `<pre><code class="${language ? `language-${language}` : ''}">${hljs.highlightAuto(code, [language]).value}</code></pre>`;
+};
+
+marked.setOptions({
+  renderer: renderer,
+  highlight: function (code, lang) {
+    return hljs.highlightAuto(code, [lang]).value;
+  }
+});
+
+const props = defineProps({
+  markdown: {
+    type: String,
+    required: true
+  }
+});
+
+const compiledMarkdown = computed(() => {
+  try {
+    if (typeof props.markdown === 'string') {
+      return marked(props.markdown);
+    } else {
+      console.error('Invalid Markdown input:', props.markdown);
+      return '';
+    }
+  } catch (error) {
+    console.error('Error parsing Markdown:', error.name, error.message, error.stack);
+    return '<p>Failed to parse Markdown</p>';
+  }
+});
+</script>
+
+<style>
+/* 引入 highlight.js 的样式 */
+@import 'highlight.js/styles/atom-one-dark.css';
+</style>
\ No newline at end of file