mcp-feedback-enhanced/issues/combinedSummaryContent-markdown-support.md

combinedSummaryContent Markdown 語法顯示功能實作

任務概述

為 mcp-feedback-enhanced 專案中的 combinedSummaryContent 區域實現 Markdown 語法顯示功能，將純文字顯示改為支援 Markdown 渲染。

技術方案

• 選用庫：marked.js（輕量級、高性能）
• 引入方式：CDN 直接引用
• 安全處理：配合 DOMPurify 進行 HTML 清理
• 樣式策略：保持原生 Markdown 樣式

實作計劃

階段 1：環境準備和依賴引入 ✅

• 修改 feedback.html 模板添加 marked.js CDN 引用
• 驗證庫載入

階段 2：核心功能實作

• 修改 ui-manager.js 中的 updateAISummaryContent 函數
• 實現 Markdown 解析和渲染
• 添加安全性處理

階段 3：樣式優化

• 調整 CSS 樣式確保 Markdown 內容正確顯示
• 優化行間距和視覺效果

階段 4：測試內容和功能驗證

• 建立包含多種 Markdown 語法的測試內容
• 驗證功能正確性

階段 5：相容性確保

• 確保向後相容性
• 添加錯誤處理機制

目標元素

<div id="combinedSummaryContent" class="text-input"
     style="min-height: 200px; white-space: pre-wrap !important; cursor: text; padding: 12px; line-height: 1.6; word-wrap: break-word; overflow-wrap: break-word;"
     data-dynamic-content="aiSummary">

測試內容範例

將包含以下 Markdown 語法：

• 標題（# ## ###）
• 粗體和斜體（bold italic）
• 程式碼區塊（code）
• 列表（- 項目）
• 連結（text）

預期結果

• 保持現有 CSS 樣式和響應式設計
• 與現有 data-dynamic-content="aiSummary" 機制相容
• 使用原生 Markdown 樣式渲染
• 不影響現有功能