From e4beaab7511f4d0958c005c8f9fc68c5bf2b23ea Mon Sep 17 00:00:00 2001
From: Mohan <jtkjcmh@126.com>
Date: Mon, 10 Aug 2026 09:01:21 +0800
Subject: [PATCH] feat(component): add markdown renderer with highlight

---
 package-lock.json               | 10 ++++++++++
 package.json                    |  1 +
 src/utils/markdown.ts           | 22 ++++++++++++++++++++++
 src/views/ArticleDetailView.vue |  8 ++++----
 4 files changed, 37 insertions(+), 4 deletions(-)
 create mode 100644 src/utils/markdown.ts

diff --git a/package-lock.json b/package-lock.json
index 3c73eca..ac1f160 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
         "dompurify": "^3.2.4",
         "highlight.js": "^11.11.1",
         "marked": "^18.0.9",
+        "marked-highlight": "^2.2.4",
         "pinia": "^2.3.0",
         "vue": "^3.5.13",
         "vue-router": "^4.5.0"
@@ -2564,6 +2565,15 @@
         "node": ">= 20"
       }
     },
+    "node_modules/marked-highlight": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmmirror.com/marked-highlight/-/marked-highlight-2.2.4.tgz",
+      "integrity": "sha512-PZxisNMJDduSjc0q6uvjsnqqHCXc9s0eyzxDO9sB1eNGJnd/H1/Fu+z6g/liC1dfJdFW4SftMwMlLvsBhUPrqQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "marked": ">=4 <19"
+      }
+    },
     "node_modules/math-intrinsics": {
       "version": "1.1.0",
       "resolved": "https://registry.npmmirror.com/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
diff --git a/package.json b/package.json
index 0b9eeef..42e047b 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "dompurify": "^3.2.4",
     "highlight.js": "^11.11.1",
     "marked": "^18.0.9",
+    "marked-highlight": "^2.2.4",
     "pinia": "^2.3.0",
     "vue": "^3.5.13",
     "vue-router": "^4.5.0"
diff --git a/src/utils/markdown.ts b/src/utils/markdown.ts
new file mode 100644
index 0000000..c07cf55
--- /dev/null
+++ b/src/utils/markdown.ts
@@ -0,0 +1,22 @@
+import { marked } from 'marked'
+import { markedHighlight } from 'marked-highlight'
+import hljs from 'highlight.js'
+import DOMPurify from 'dompurify'
+import 'highlight.js/styles/github-dark.css'
+
+marked.use(
+  markedHighlight({
+    langPrefix: 'hljs language-',
+    highlight(code: string, lang: string) {
+      if (lang && hljs.getLanguage(lang)) {
+        return hljs.highlight(code, { language: lang }).value
+      }
+      return hljs.highlightAuto(code).value
+    }
+  })
+)
+
+export function renderMarkdown(content: string): string {
+  const rawHtml = marked.parse(content, { async: false }) as string
+  return DOMPurify.sanitize(rawHtml)
+}
\ No newline at end of file
diff --git a/src/views/ArticleDetailView.vue b/src/views/ArticleDetailView.vue
index fa8a6ad..26026f1 100644
--- a/src/views/ArticleDetailView.vue
+++ b/src/views/ArticleDetailView.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { ref, computed, watch } from 'vue'
 import { useRoute } from 'vue-router'
-import DOMPurify from 'dompurify'
 import { articleApi } from '@/api/client'
+import { renderMarkdown } from '@/utils/markdown'
 import type { ArticleDetail } from '@/generated/api'
 
 const route = useRoute()
@@ -12,9 +12,9 @@ const error = ref<string | null>(null)
 
 const slug = computed(() => String(route.params.slug ?? ''))
 
-const sanitizedContent = computed(() => {
+const renderedContent = computed(() => {
   if (!article.value?.content) return ''
-  return DOMPurify.sanitize(article.value.content)
+  return renderMarkdown(article.value.content)
 })
 
 function formatDate(iso?: string): string {
@@ -53,7 +53,7 @@ watch(slug, load, { immediate: true })
     <div class="detail-tags">
       <span v-for="tag in article.tagNames" :key="tag" class="tag">{{ tag }}</span>
     </div>
-    <div class="article-content" v-html="sanitizedContent"></div>
+    <div class="article-content" v-html="renderedContent"></div>
   </article>
 
   <p v-else-if="loading" class="hint-text">加载中...</p>