From f764415e4d6b66df0a3007e56b742a5f6045a8e9 Mon Sep 17 00:00:00 2001
From: supreme0597 <supreme0597@gmail.com>
Date: Fri, 15 May 2026 05:15:29 +0800
Subject: [PATCH] =?UTF-8?q?feat(web):=20=E5=9C=A8=20renderMarkdown=20?=
 =?UTF-8?q?=E4=B8=AD=E9=9B=86=E6=88=90=20SVG=20=E6=B8=B2=E6=9F=93=EF=BC=88?=
 =?UTF-8?q?DOMPurify=20=E9=BB=98=E8=AE=A4=E5=B7=B2=E6=94=AF=E6=8C=81=20SVG?=
 =?UTF-8?q?=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 导入 renderSvgBlocks() 并在 markdown-it 渲染前调用
- cacheKey 基于 SVG 转换后的内容，保证缓存一致性
- DOMPurify 配置保持不变（默认白名单已支持 SVG）
---
 web/src/utils/markdown_preview.js | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/web/src/utils/markdown_preview.js b/web/src/utils/markdown_preview.js
index e80e829a..c06fbd7c 100644
--- a/web/src/utils/markdown_preview.js
+++ b/web/src/utils/markdown_preview.js
@@ -6,6 +6,7 @@ import { createHighlighter } from 'shiki'
 import yaml from 'js-yaml'
 import { escapeHtml } from '@/utils/html'
 import { normalizeCodeLanguage } from '@/utils/file_preview'
+import { renderSvgBlocks } from './svgRenderer'
 
 const markdownKatexPlugin = markdownItKatex.default || markdownItKatex
 const FRONTMATTER_MARKER = '---'
@@ -198,19 +199,20 @@ const setCachedHtml = (cacheKey, html) => {
 export const renderMarkdown = async (content, { theme = 'github-light' } = {}) => {
   try {
     const normalizedContent = normalizeHtmlTagQuotes(content)
+    const svgContent = renderSvgBlocks(normalizedContent)
     const themeName = normalizeTheme(theme)
-    const needsHighlight = hasCodeFence(normalizedContent)
-    const cacheKey = `${needsHighlight ? themeName : 'plain'}\u0000${normalizedContent}`
+    const needsHighlight = hasCodeFence(svgContent)
+    const cacheKey = `${needsHighlight ? themeName : 'plain'}\u0000${svgContent}`
     const cachedHtml = getCachedHtml(cacheKey)
     if (cachedHtml !== undefined) return cachedHtml
 
     if (needsHighlight) {
       const highlighter = await getHighlighter()
-      await ensureLanguages(highlighter, collectCodeFenceLanguages(normalizedContent))
+      await ensureLanguages(highlighter, collectCodeFenceLanguages(svgContent))
     }
 
     const md = await getRenderer(themeName, needsHighlight)
-    const html = DOMPurify.sanitize(md.render(normalizedContent), {
+    const html = DOMPurify.sanitize(md.render(svgContent), {
       ADD_TAGS: ['input'],
       ADD_ATTR: [
         'class',