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 筆資料。

### 📊 資料分析助理 <a href="#data-analysis-assistant" id="data-analysis-assistant"></a>

**使用情境**：
使用者詢問銷售數據分析結果，AI 助理以表格方式呈現。

**優化效果**：
* 表格格式清晰，欄位對齊
* 深色模式下表格邊框和背景色適配
* 大量資料也能保持可讀性

**範例回答**：

以下是本季銷售前三名的產品：

產品名稱	銷售數量	銷售額
產品 A	1,250	$125,000
產品 B	980	$98,000
產品 C	856	$85,600

銷售數據截至本月 20 日。

### 📚 教學助理 <a href="#tutorial-assistant" id="tutorial-assistant"></a>

**使用情境**：
學生詢問學習步驟，AI 助理以有序列表方式說明。

**優化效果**：
* 列表項目清楚編號
* 標題層級分明，方便理解步驟順序
* 重點內容使用粗體強調

**範例回答**：

學習 Python 的建議步驟

1. 基礎語法

   • 變數和資料型別

   • 條件判斷和迴圈

2. 進階概念

   • 函數和模組

   • 物件導向程式設計

3. 實作練習

   • 完成小型專案

   • 參與開源貢獻

每個步驟建議花費 2-3 週時間學習。

## 管理員設定 <a href="#admin-settings" id="admin-settings"></a>

### Markdown 渲染設定 <a href="#markdown-rendering-settings" id="markdown-rendering-settings"></a>

WebChat 的 Markdown 渲染功能預設為啟用狀態。如果您的使用情境不需要 Markdown 格式，可以在設定中調整：

1. 進入「發布」→「WebChat 設定」
2. 找到「訊息渲染」設定區塊
3. 選擇渲染模式：
   * **完整 Markdown**：支援所有 Markdown 格式（預設）
   * **基本格式**：僅支援粗體、斜體、連結
   * **純文字**：不渲染任何格式

### 深色模式設定 <a href="#dark-mode-settings" id="dark-mode-settings"></a>

深色模式會自動依據使用者裝置設定啟用。如果您希望讓 WebChat 固定使用淺色或深色主題：

1. 進入「發布」→「WebChat 設定」
2. 找到「外觀」設定區塊
3. 選擇主題模式：
   * **自動**：依據使用者裝置設定（預設）
   * **淺色**：固定使用淺色主題
   * **深色**：固定使用深色主題

<div data-gb-custom-block data-tag="hint" data-style='info'>

WebChat 外觀設定的詳細說明請參考：[串接對話平台：網站](website.md)

</div>

## 效能影響 <a href="#performance-impact" id="performance-impact"></a>

### 渲染效能 <a href="#rendering-performance" id="rendering-performance"></a>

優化後的 Markdown 渲染引擎對效能的影響：

* **載入時間**：首次載入增加約 0.1-0.2 秒（幾乎無感）
* **記憶體使用**：增加約 1-2 MB（對現代瀏覽器影響極小）
* **渲染速度**：相較舊版提升約 30%

### 相容性 <a href="#compatibility" id="compatibility"></a>

優化後的渲染引擎支援以下瀏覽器：

* Chrome / Edge（版本 90 以上）
* Firefox（版本 88 以上）
* Safari（版本 14 以上）
* 行動裝置瀏覽器（iOS Safari、Android Chrome）

<div data-gb-custom-block data-tag="hint" data-style='warning'>

較舊版本的瀏覽器可能無法正確顯示部分 Markdown 格式，建議提醒使用者更新瀏覽器。

</div>

## 常見問題 <a href="#faq" id="faq"></a>

### Q1：為什麼我的 AI 助理回答沒有格式？ <a href="#faq-ai-agent-response-no-format" id="faq-ai-agent-response-no-format"></a>

可能原因：
* AI 助理沒有使用 Markdown 語法
* Markdown 渲染功能被停用
* 瀏覽器版本過舊

### Q2：深色模式下某些內容看不清楚怎麼辦？ <a href="#faq-dark-mode-content-visibility" id="faq-dark-mode-content-visibility"></a>

請嘗試：
1. 清除瀏覽器快取
2. 重新整理頁面
3. 確認使用最新版本的瀏覽器

### Q3：程式碼區塊可以自訂語法高亮的顏色嗎？ <a href="#faq-customize-code-block-syntax-highlight" id="faq-customize-code-block-syntax-highlight"></a>

目前語法高亮顏色是固定的，未來版本可能會開放自訂功能。

### Q4：表格內容過長時會怎麼顯示？ <a href="#faq-long-table-display" id="faq-long-table-display"></a>

表格會自動支援橫向捲動，確保內容完整顯示且不影響其他內容的排版。

### Q5：渲染優化會影響行動裝置的顯示嗎？ <a href="#faq-mobile-device-rendering" id="faq-mobile-device-rendering"></a>

不會。渲染優化針對行動裝置也進行了適配，確保在小螢幕上也能清楚顯示。