diff --git a/.inscode b/.inscode
index 75cbde42e38700eb5f08c445b5175ecf9cf63c5d..e6da3212b86f5e3cb7e068677c70c4d6ce172977 100644
--- a/.inscode
+++ b/.inscode
@@ -1,5 +1,8 @@
-run = "npm i && npm run dev"
+run = "npm run dev"
 language = "node"
+is_html = false
+is_resident = true
+is_gui = false
 
 [deployment]
 build = "npm i && npm run build"
@@ -11,4 +14,4 @@ XDG_CONFIG_HOME = "/root/.config"
 npm_config_prefix = "/root/${PROJECT_DIR}/.config/npm/node_global"
 
 [debugger]
-program = "main.js"
\ No newline at end of file
+program = "main.js"
diff --git a/package.json b/package.json
index b285a5c617647f609cc8ad3fb475f3b9b3393a21..380318e7b08a97df28fe7398ce6a2575ed66e186 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,10 @@
     "preview": "vite preview --port 4173"
   },
   "dependencies": {
+    "@highlightjs/vue-plugin": "^2.1.0",
     "guess": "^1.0.2",
+    "highlight.js": "^11.11.1",
+    "markdown-it": "^14.1.0",
     "vue": "^3.2.37"
   },
   "devDependencies": {
diff --git a/src/App.vue b/src/App.vue
index 633a5dfe4e547c48bfa93740a290ba5ba370930a..4e6bc556ec6b9980da435988b5d3cd107f728e41 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,23 +1,97 @@
 <script setup>
 import HelloWorld from './components/HelloWorld.vue'
-import TheWelcome from './components/TheWelcome.vue'
-</script>
+import MarkdownRenderer from './components/MarkdownRenderer.vue'
 
-<template>
-  <header>
-    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
+const markdownContent = `
+《三国演义》是中国古典四大名著之一，由元末明初小说家罗贯中所著，以东汉末年至西晋初年的历史为背景，描绘了魏、蜀、吴三国鼎立时期的政治、军事斗争和人物传奇。以下是其核心内容的总结：
 
-    <div class="wrapper">
-      <HelloWorld msg="You did it!" />
-    </div>
-  </header>
+---
+
+### **一、背景与主线**
+1. **时代背景**：  
+   东汉末年，宦官专权、黄巾起义爆发，朝廷衰微，群雄割据。董卓乱政后，诸侯混战，最终形成曹操（魏）、刘备（蜀）、孙权（吴）三分天下的格局。
+
+2. **主线脉络**：  
+   - **群雄逐鹿**（1-40回）：从黄巾起义到官渡之战，曹操统一北方。  
+   - **三国鼎立**（41-80回）：赤壁之战后三分天下，刘备取西川，关羽失荆州。  
+   - **走向统一**（81-120回）：诸葛亮北伐，司马氏崛起，魏灭蜀、晋代魏，最终西晋统一。
+
+---
+
+### **二、核心人物与事件**
+1. **蜀汉阵营**：  
+   - **刘备**：以仁德立身，三顾茅庐得诸葛亮辅佐，建立蜀汉。  
+   - **诸葛亮**：鞠躬尽瘁，六出祁山北伐，病逝五丈原（“出师未捷身先死”）。  
+   - **关羽**：忠义无双，温酒斩华雄、千里走单骑，后败走麦城被杀。  
+   - **张飞**：勇猛暴躁，长坂坡退敌，最终被部下所害。
+
+2. **曹魏阵营**：  
+   - **曹操**：枭雄形象，“宁教我负天下人”，挟天子以令诸侯，奠定魏国基业。  
+   - **司马懿**：隐忍善谋，抵御诸葛亮北伐，家族最终篡魏建晋。
+
+3. **东吴阵营**：  
+   - **孙权**：少年继位，联刘抗曹（赤壁之战），晚年多疑。  
+   - **周瑜**：风流儒将，“既生瑜何生亮”，主导赤壁火攻。  
+
+4. **经典战役**：  
+   - **官渡之战**（曹操以少胜多灭袁绍）。  
+   - **赤壁之战**（孙刘联军火烧曹船，奠定三分天下）。  
+   - **夷陵之战**（刘备伐吴惨败，火烧连营）。  
+
+---
+
+### **三、主题思想**
+1. **天下大势，分久必合**：  
+   通过三国兴衰，揭示历史循环与统一的必然性。  
+2. **忠义与权谋**：  
+   推崇关羽的“忠义”，批判曹操的“奸雄”，展现人性复杂性。  
+3. **英雄悲歌**：  
+   诸葛亮、周瑜等人物虽才华横溢，却难逃命运束缚，体现悲剧色彩”。
 
+---
+
+### **四、艺术特色**
+1. **七实三虚**：  
+   基于《三国志》史实，融合民间传说与艺术虚构（如“草船借箭”“空城计”）。  
+2. **人物刻画鲜明**：  
+   “智绝”诸葛亮、“奸绝”曹操、“义绝”关羽，成为文学经典形象。  
+3. **战争描写宏大**：  
+   注重战略与人物结合，如赤壁之战层层铺垫，波澜壮阔。
+
+---
+
+### **五、名句与典故**
+- **名句**：  
+  “天下大势，分久必合，合久必分。”  
+  “鞠躬尽瘁，死而后已。”  
+- **典故**：  
+  三顾茅庐、刮骨疗毒、舌战群儒、乐不思蜀。
+
+---
+
+### **六、影响与地位**
+《三国演义》是中国历史小说的巅峰之作，对东亚文化影响深远，衍生出大量戏曲、影视、游戏作品，其权谋智慧与人物精神至今被广泛传颂。
+
+**总结**：一部英雄史诗，半部人间权谋。三国故事不仅是历史，更是人性与理想的永恒镜像。
+`
+</script>
+
+<template>
   <main>
-    <TheWelcome />
+    <div class="markdown-demo">
+      <MarkdownRenderer :content="markdownContent" />
+    </div>
   </main>
 </template>
 
 <style scoped>
+.markdown-demo {
+  margin-top: 2rem;
+  padding: 1rem;
+  border: 1px solid #eee;
+  border-radius: 8px;
+  background: white;
+}
 header {
   line-height: 1.5;
 }
diff --git a/src/components/MarkdownRenderer.vue b/src/components/MarkdownRenderer.vue
new file mode 100644
index 0000000000000000000000000000000000000000..6ac19895681f0c02e48daf76671f45eee09ac7b8
--- /dev/null
+++ b/src/components/MarkdownRenderer.vue
@@ -0,0 +1,106 @@
+<script setup>
+import { ref, computed } from 'vue'
+import MarkdownIt from 'markdown-it'
+import hljs from 'highlight.js'
+import 'highlight.js/styles/github.css'
+
+const props = defineProps({
+  content: {
+    type: String,
+    required: true
+  }
+})
+
+const md = new MarkdownIt({
+  html: true,
+  linkify: true,
+  typographer: true,
+  highlight: function (str, lang) {
+    if (lang && hljs.getLanguage(lang)) {
+      try {
+        return hljs.highlight(str, { language: lang }).value
+      } catch (__) {}
+    }
+    return ''
+  }
+})
+
+const renderedContent = computed(() => {
+  return md.render(props.content)
+})
+</script>
+
+<template>
+  <div class="markdown-body" v-html="renderedContent"></div>
+</template>
+
+<style scoped>
+.markdown-body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+  line-height: 1.6;
+  color: #24292e;
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+.markdown-body :deep(pre) {
+  background-color: #f6f8fa;
+  border-radius: 6px;
+  padding: 16px;
+  overflow: auto;
+}
+
+.markdown-body :deep(code) {
+  background-color: rgba(175, 184, 193, 0.2);
+  border-radius: 6px;
+  padding: 0.2em 0.4em;
+  font-size: 85%;
+}
+
+.markdown-body :deep(pre code) {
+  background-color: transparent;
+  padding: 0;
+  border-radius: 0;
+}
+
+.markdown-body :deep(a) {
+  color: #0969da;
+  text-decoration: none;
+}
+
+.markdown-body :deep(a:hover) {
+  text-decoration: underline;
+}
+
+.markdown-body :deep(h1),
+.markdown-body :deep(h2),
+.markdown-body :deep(h3),
+.markdown-body :deep(h4),
+.markdown-body :deep(h5),
+.markdown-body :deep(h6) {
+  margin-top: 24px;
+  margin-bottom: 16px;
+  font-weight: 600;
+  line-height: 1.25;
+}
+
+.markdown-body :deep(h1) {
+  padding-bottom: 0.3em;
+  font-size: 2em;
+  border-bottom: 1px solid #eaecef;
+}
+
+.markdown-body :deep(h2) {
+  padding-bottom: 0.3em;
+  font-size: 1.5em;
+  border-bottom: 1px solid #eaecef;
+}
+
+.markdown-body :deep(blockquote) {
+  padding: 0 1em;
+  color: #57606a;
+  border-left: 0.25em solid #d0d7de;
+  margin: 0 0 16px 0;
+}
+</style>
\ No newline at end of file