# Markdown 渲染
本篇將介紹 WebChat 聊天視窗中訊息內容渲染的優化功能，讓 AI 助理的回答呈現更清晰、更易讀。
## 什麼是訊息內容渲染？
訊息內容渲染是指 WebChat 如何將 AI 助理的文字回答轉換成使用者看到的視覺呈現。AI 助理的回答可能包含：
* **純文字**：一般的文字敘述
* **Markdown 格式**：包含標題、列表、粗體、斜體等格式
* **程式碼區塊**：程式碼範例或指令
* **表格**：結構化的資料呈現
* **連結**：外部連結或參考資料
良好的渲染效果能讓這些內容更容易閱讀和理解。
## 優化項目
### 1. 全面升級 Markdown 渲染引擎
WebChat 現已採用增強型 Markdown 渲染引擎，支援更豐富的格式和更精確的渲染效果。
#### 支援的 Markdown 格式
| 格式類型 | 語法範例 | 渲染效果說明 |
| --------- | ------------------ | -------------- |
| **標題** | `# 標題一`、`## 標題二` | 清晰的標題層級，方便內容分段 |
| **粗體** | `**粗體文字**` | 強調重點內容 |
| **斜體** | `*斜體文字*` | 次要強調或補充說明 |
| **列表** | `- 項目一`、`1. 項目一` | 有序或無序列表 |
| **程式碼** | `` `程式碼` `` | 行內程式碼或指令 |
| **程式碼區塊** | ` ```程式碼``` ` | 多行程式碼，支援語法高亮 |
| **表格** | `\| 欄位一 \| 欄位二 \|` | 結構化資料呈現 |
| **連結** | `[連結文字](網址)` | 可點擊的超連結 |
| **引用** | `> 引用內容` | 引用或特別說明 |
### 2. 深色模式視覺優化
當終端使用者的裝置使用深色主題時，WebChat 會自動調整訊息內容的視覺呈現，確保在深色背景下的清晰度和可讀性。
#### 深色模式調整項目
1. **文字與背景對比度**：自動調整文字顏色，確保在深色背景下清楚顯示
2. **訊息反饋按鈕**：調整按鈕的顏色和邊框，在深色模式下仍保持清晰
3. **表格視覺呈現**：調整表格邊框和背景色，提高可讀性
4. **引用區塊背景**：調整引用區塊的背景色調，與主要內容做出區隔
### 3. 串流渲染效能提升
WebChat 採用即時串流方式顯示 AI 助理的回答，讓使用者不需等待完整回答產生完畢。本次更新優化了串流渲染的效能：
* **渲染速度提升**：Markdown 格式的渲染速度更快，減少延遲感
* **流暢度改善**：文字逐字顯示時更流暢，無明顯卡頓
* **格式正確性**：即使在串流過程中，Markdown 格式也能正確渲染
{% hint style="success" %} 使用者可以在 AI 助理回答的過程中，即時看到已經產生的內容，不需等待完整回答。 {% endhint %}
## 實際應用場景
### 💻 技術文件助理
**使用情境**： 開發者詢問程式碼範例時，AI 助理提供包含程式碼區塊的回答。
**優化效果**：
* 程式碼區塊支援語法高亮，更容易閱讀
* 深色模式下程式碼清晰顯示
* 開發者可以直接複製程式碼使用
**範例回答**：
````
以下是 Python 讀取 CSV 檔案的範例：
```python
import pandas as pd
df = pd.read_csv('data.csv')
print(df.head())
````
這段程式碼會讀取 CSV 檔案並顯示前 5 筆資料。
```
### 📊 資料分析助理
**使用情境**：
使用者詢問銷售數據分析結果，AI 助理以表格方式呈現。
**優化效果**：
* 表格格式清晰，欄位對齊
* 深色模式下表格邊框和背景色適配
* 大量資料也能保持可讀性
**範例回答**：
```
以下是本季銷售前三名的產品：
| 產品名稱 | 銷售數量 | 銷售額 |
| ---- | ----- | -------- |
| 產品 A | 1,250 | $125,000 |
| 產品 B | 980 | $98,000 |
| 產品 C | 856 | $85,600 |
銷售數據截至本月 20 日。
```
### 📚 教學助理
**使用情境**：
學生詢問學習步驟，AI 助理以有序列表方式說明。
**優化效果**：
* 列表項目清楚編號
* 標題層級分明，方便理解步驟順序
* 重點內容使用粗體強調
**範例回答**：
```
## 學習 Python 的建議步驟
1. **基礎語法**
* 變數和資料型別
* 條件判斷和迴圈
2. **進階概念**
* 函數和模組
* 物件導向程式設計
3. **實作練習**
* 完成小型專案
* 參與開源貢獻
每個步驟建議花費 2-3 週時間學習。
```
## 管理員設定
### Markdown 渲染設定
WebChat 的 Markdown 渲染功能預設為啟用狀態。如果您的使用情境不需要 Markdown 格式，可以在設定中調整：
1. 進入「發布」→「WebChat 設定」
2. 找到「訊息渲染」設定區塊
3. 選擇渲染模式：
* **完整 Markdown**：支援所有 Markdown 格式（預設）
* **基本格式**：僅支援粗體、斜體、連結
* **純文字**：不渲染任何格式
### 深色模式設定
深色模式會自動依據使用者裝置設定啟用。如果您希望讓 WebChat 固定使用淺色或深色主題：
1. 進入「發布」→「WebChat 設定」
2. 找到「外觀」設定區塊
3. 選擇主題模式：
* **自動**：依據使用者裝置設定（預設）
* **淺色**：固定使用淺色主題
* **深色**：固定使用深色主題
WebChat 外觀設定的詳細說明請參考：[串接對話平台：網站](website.md)
## 效能影響
### 渲染效能
優化後的 Markdown 渲染引擎對效能的影響：
* **載入時間**：首次載入增加約 0.1-0.2 秒（幾乎無感）
* **記憶體使用**：增加約 1-2 MB（對現代瀏覽器影響極小）
* **渲染速度**：相較舊版提升約 30%
### 相容性
優化後的渲染引擎支援以下瀏覽器：
* Chrome / Edge（版本 90 以上）
* Firefox（版本 88 以上）
* Safari（版本 14 以上）
* 行動裝置瀏覽器（iOS Safari、Android Chrome）
較舊版本的瀏覽器可能無法正確顯示部分 Markdown 格式，建議提醒使用者更新瀏覽器。
## 常見問題
### Q1：為什麼我的 AI 助理回答沒有格式？
可能原因：
* AI 助理沒有使用 Markdown 語法
* Markdown 渲染功能被停用
* 瀏覽器版本過舊
### Q2：深色模式下某些內容看不清楚怎麼辦？
請嘗試：
1. 清除瀏覽器快取
2. 重新整理頁面
3. 確認使用最新版本的瀏覽器
### Q3：程式碼區塊可以自訂語法高亮的顏色嗎？
目前語法高亮顏色是固定的，未來版本可能會開放自訂功能。
### Q4：表格內容過長時會怎麼顯示？
表格會自動支援橫向捲動，確保內容完整顯示且不影響其他內容的排版。
### Q5：渲染優化會影響行動裝置的顯示嗎？
不會。渲染優化針對行動裝置也進行了適配，確保在小螢幕上也能清楚顯示。
```
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.maiagent.ai/conversations/web-chat/markdown-rendering.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.