feat:增加markdown渲染支持

media/webview/script.js

@@ -8,6 +8,7 @@ document.addEventListener('DOMContentLoaded', () => {
     const loading = document.getElementById('loading');
 
     chatForm.addEventListener('submit', (e) => {
+        console.log(1111)
         e.preventDefault();
         const text = userInput.value.trim();
         if (!text) return;
@@ -24,26 +25,47 @@ document.addEventListener('DOMContentLoaded', () => {
         userInput.value = '';
     });
 
+    // 判断内容是否为 Markdown（简单判断）
+    function isMarkdown(content) {
+        if (!content || content.trim() === '') return false;
+
+        const markdownPatterns = [
+            /^#/m,                // 标题 #
+            /\*\*[^*]+\*\*/g,     // 加粗 **text**
+            /__[^_]+__/g,         // 加粗 __text__
+            /^- /gm,              // 无序列表
+            /^\* /gm,             // 无序列表
+            /^\d+\. /gm,          // 有序列表
+            /```/g               // 代码块
+        ];
+
+        return markdownPatterns.some(pattern => pattern.test(content));
+    }
+
     function addMessage(role, content) {
-        const chatBox = document.getElementById('chat-box');
         const msgDiv = document.createElement('div');
         msgDiv.className = `message ${role}`;
 
-        if (content.includes('```')) {
-            const codeContent = content.slice(3, -3).trim();
-            msgDiv.innerHTML = `<pre><code>${codeContent}</code></pre>`;
+        // 渲染内容
+        if (isMarkdown(content)) {
+            console.log("content:",content)
+            msgDiv.innerHTML = marked.parse(content);
+            console.log("msgDiv.innerHTML:",msgDiv.innerHTML )
         } else {
-            msgDiv.textContent = content;
+            const div = document.createElement('div');
+            div.textContent = content;
+            msgDiv.appendChild(div);
         }
 
         chatBox.appendChild(msgDiv);
 
-        // 手动高亮新插入的代码块
+        // 高亮代码块
         const codeBlocks = msgDiv.querySelectorAll('pre code');
         codeBlocks.forEach(block => {
-            hljs.highlightElement(block); // 高亮单个代码块
+            hljs.highlightElement(block);
         });
 
+        // 滚动到底部
         chatBox.scrollTop = chatBox.scrollHeight;
     }
 

media/webview/style.css

@@ -35,7 +35,7 @@ body {
 }
 
 .ai {
-    background-color: #968c8d;
+    background-color: #7a7575;
 }
 
 .context-area {

src/extension.ts

@@ -82,7 +82,12 @@ function openWebview(
         vscode.Uri.file(path.join(extensionPath, 'media', 'webview', 'styles', 'atom-one-dark.css'))
     );
 
-    panel.webview.html = getWebviewContent(styleUri, scriptUri,highlightScriptUri,highlightStyleUri);
+    const markedScriptUri = panel.webview.asWebviewUri(
+        vscode.Uri.file(path.join(context.extensionPath, 'media', 'webview', 'marked.min.js'))
+    );
+
+
+    panel.webview.html = getWebviewContent(styleUri, scriptUri,highlightScriptUri,highlightStyleUri,markedScriptUri);
 
     panel.webview.onDidReceiveMessage(
         async (message) => {
@@ -101,7 +106,6 @@ function openWebview(
                         const response = await callQwenAPI(question, history, fileContent, context);
                         console.log("response:",response)
                         const aiMessage = response.choices[0]?.message?.content || '未获取到回复';
-                        console.log("aiMessage:",aiMessage)
 
                         const updatedHistory = [...newHistory, { role: 'assistant', content: aiMessage }];
                         globalState.update('chatHistory', updatedHistory);
@@ -132,7 +136,7 @@ async function callQwenAPI(
     const messages = [
         {
             role: 'system',
-            content: `你是一个代码助手，请根据当前文件内容和历史对话回答问题。`
+            content: `你是一个代码助手，请根据当前文件内容和历史对话回答问题。请使用中文回答。`
         },
         {
             role: 'user',
@@ -170,7 +174,7 @@ async function callQwenAPI(
     }
 }
 
-function getWebviewContent(styleUri: vscode.Uri, scriptUri: vscode.Uri,highlightScriptUri:vscode.Uri,highlightStyleUri:vscode.Uri): string {
+function getWebviewContent(styleUri: vscode.Uri, scriptUri: vscode.Uri,highlightScriptUri:vscode.Uri,highlightStyleUri:vscode.Uri,markedScriptUri:vscode.Uri): string {
     return `
         <!DOCTYPE html>
         <html lang="en">
@@ -194,12 +198,7 @@ function getWebviewContent(styleUri: vscode.Uri, scriptUri: vscode.Uri,highlight
             </div>
             <script src="${scriptUri}"></script>
             <script src="${highlightScriptUri}"></script>
-                <!-- 启用自动高亮 -->
-            <script>
-                document.addEventListener('DOMContentLoaded', () => {
-                    hljs.highlightAll(); // 自动高亮所有代码块
-                });
-            </script>
+            <script src="${markedScriptUri}"></script>
         </body>
         </html>`;
 }