好的，這是一個專門用來測試 typo.css 或其他 Markdown 樣式渲染效果的綜合性 Markdown 文件。

它包含了多種常見的 Markdown 元素，特別考慮了中英文混排的情境，以便您能清晰地檢視 typo.css 是否正確應用了其排版規則。

您可以直接將以下內容複製並保存為一個 .md 或 .mdx 文件（例如 test.md），然後在您的 Astro 項目中渲染它。

---

(H1) 這是一級標題 - 中文 English

這是一個用於測試 typo.css 排版樣式的 Markdown 文件。This paragraph is for testing CJK and Latin character kerning and spacing. 它應該能展示出 typo.css 對中英文混排、標點符號以及段落間距的優化效果。我們來看看效果如何。

---

(H2) 文本格式與段落

這是一個普通的段落。A quick brown fox jumps over the lazy dog. 接下來是一些行內格式的測試：

• 這是粗體 (Bold Text)，用於強調重要內容。
• 這是斜體 (Italic Text)，通常用於引述或術語。
• 這是刪除線 (Strikethrough)，表示內容已作廢。
• 這是行內代碼 (Inline Code)，例如 const a = 1; 這樣的變數宣告。
• 這是下劃線 (Underline)，雖然不是 Markdown 標準語法，但常透過 HTML 實現。

另一個段落，用於測試段落之間的垂直間距。在中文排版中，「首行縮進」通常是不必要的，段落間的留白更為現代。typo.css 應該能處理好這一點。

(H3) 列表樣式

(H4) 無序列表 (Unordered List)

• 列表項目一：包含一些英文字母 a, b, c。
• 列表項目二：這是第二個項目。
  • 嵌套列表項目 2.1：測試縮進與對齊。
  • 嵌套列表項目 2.2：另一個嵌套項目。
• 列表項目三：最後一個項目。

(H4) 有序列表 (Ordered List)

1. 第一步：完成初始設定 (Initial Setup)。
2. 第二步：部署到生產環境 (Deploy to Production)。
3. 第三步：收集用戶回饋 (Collect User Feedback)。

---

(H2) 引用與程式碼區塊

(H3) 引用 (Blockquote)

這是一段引用內容。它應該有明顯的左邊框和縮進，與正文區分開來。

Steve Jobs 曾說過：

Stay hungry, stay foolish.

求知若飢，虛心若愚。

(H3) 程式碼區塊 (Code Block)

這是一個 JavaScript 程式碼區塊，測試語法高亮和區塊背景樣式。

import { defineConfig } from 'astro/config';

// [https://astro.build/config](https://astro.build/config)
export default defineConfig({
  site: '[https://example.com](https://example.com)',
  markdown: {
    shikiConfig: {
      theme: 'dracula',
    },
  },
});

這是一個 Python 程式碼區塊，注意觀察不同語言的高亮效果。

def hello_world(name):
    """A simple function to greet."""
    print(f"Hello, {name}!")

if __name__ == "__main__":
    hello_world("Typo.css")

---

(H2) 表格與多媒體

(H3) 表格 (Table)

表格的對齊、邊框和內外邊距是測試的重點。

頭像 (Avatar)	用戶名 (Username)	角色 (Role)	註冊日期 (Date)
🧑‍💻	john_doe	管理員	2024-01-15
🧑‍🎨	jane_artist	設計師	2024-03-22
📝	sam_writer	內容貢獻者	2024-05-30

(H3) 連結與圖片

• 這是一個 指向 Google 的連結。
• 下圖是一張佔位圖片，測試圖片是否能正常顯示，並與周圍文字保持適當距離。

---

(H2) 進階功能測試

(H3) 目錄/TOC (Table of Contents)

如果您的 Markdown 處理器支持，以下連結應該能跳轉到對應的標題。

• (H2) 文本格式與段落
• (H2) 引用與程式碼區塊
• (H2) 表格與多媒體

(H3) 數學公式 (Math Formulas)

這部分需要 Markdown 渲染器（如 rehype-katex）的支持。typo.css 本身不處理公式，但應該能與公式的樣式和諧共存。

行內公式：質能守恆方程式 $E = mc^2$

區塊公式：

$ \int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi} $

(H5) 這是文件結尾的五級標題

如何使用這個測試文件

1. 保存文件：將上面的 Markdown 內容保存為 test.md。
2. 放置文件：將 test.md 放入您的 Astro 項目的 src/pages/ 或 src/content/blog/ 等內容集合目錄中。
3. 應用樣式：確保您的佈局文件已經引入了 typo.css 並將 class="typo" 應用到了 <slot /> 的父容器上，就像這樣：

// src/layouts/BlogPost.astro
import '~/styles/typo.css'; // 確認路徑正確
---
<article class="typo">
<slot />
</article>

4. 訪問頁面：啟動您的 Astro 開發伺服器，然後訪問對應的頁面（例如 http://localhost:4321/test），觀察渲染效果。

通過這個文件，您可以全面地評估 typo.css 是否成功地美化了您的 Markdown 內容。