經過昨天的 Prompt 調校，我們的 Gemini 已經能給出非常專業的醫療建議。但你可能會發現一個小缺點：文字全部擠在一起。

大型語言模型 (LLM) 天生非常擅長使用 Markdown 語法來排版（例如用 **粗體** 標示重點，或用 - 建立清單）。但如果我們在 React 中直接把這些帶有符號的字串塞進 <p> 標籤裡，瀏覽器只會把它當成純文字顯示，看起來反而很雜亂。

今天，我們要引入 react-markdown 套件，並搭配 Tailwind 的排版外掛，讓 AI 的回覆瞬間變成排版精美的專業報告！

Step 1：安裝所需套件
在下方的終端機，一次安裝我們需要的兩個套件：

react-markdown：負責將 AI 產生的 Markdown 符號轉換成真實的 HTML 標籤（如 strong、ul）。
@tailwindcss/typography：因為 Tailwind 預設會清除所有 HTML 標籤的樣式，這個官方外掛能幫我們快速把文章該有的漂亮樣式（行距、粗體、清單縮排）加回來。

Step 2：設定 Tailwind 設定檔
打開專案根目錄的 tailwind.config.js，將剛剛安裝的 Typography 外掛加進去：

Step 3：修改 Prompt，允許 AI 使用格式
接著，打開 src/services/aiService.js，在我們昨天的 prompt 規定中，加入允許使用 Markdown 的指令：

Step 4：更新 AIPanel.jsx 渲染方式
最後，打開 src/components/AIPanel.jsx
引入套件


(說明：prose 是 Typography 外掛提供的魔法 class，它會自動幫裡面的所有標籤設定完美的閱讀排版；prose-indigo 則是讓超連結或強調色配合我們系統的紫色調。)

最後的成果AI就會給你相關注意事項