Notion Renderer
目錄區塊會依據頁面中的標題自動生成，對於長篇文件相當實用。讀者可以快速跳到感興趣的小節。
標題 H1
這是一篇用來測試 Notion Renderer 的示範文章，同時也當作一篇真實內容的範本。透過這篇文章，你可以看到各種常見排版：標題、段落文字、清單、引言、程式碼區塊、表格、分欄、公式與媒體嵌入等，方便在開發時確認渲染結果是否符合預期。
在實際使用情境中，你可能會拿這頁當作「設計系統」或「元件展示頁」，讓設計與工程都能快速比對畫面與 Notion 原生樣式是否一致。以下內容會以一篇教學文章的方式，循序介紹每一種區塊與其用途。
標題 H2
標題層級是文章結構的基礎。H1 通常做為頁面主標題，H2、H3 則負責切分段落與小節。這一段一般文字，用來測試最基本的段落渲染，同時模擬真實文章中常見的說明文字。
在這裡，我們也順便測試各種行內樣式：例如 粗體 可用於強調關鍵字，斜體 適合表達語氣或外文詞彙，刪除線 則能呈現修改痕跡，底線 可以凸顯特別重要的片語，還有一個 連結 示範超連結樣式。
另外，還有一些 inline code 文字，用於顯示短程式碼或指令片段，例如 npm run dev 或 node index.js。
清單與代辦事項
在實務文章或文件中，清單是非常常見的結構，適合用來整理步驟、條件或重點。以下示範無序清單與有序清單，以及待辦事項的搭配使用：
- 無序清單項目 1：適合列出條列重點，沒有前後順序的差別。
- 無序清單項目 2：可搭配巢狀清單說明更多細節。
- 巢狀無序清單子項：用來補充說明上一項的細節或範例。
- 有序清單項目 1：適合用在步驟教學或流程說明，順序具有意義。
- 有序清單項目 2：每個步驟可以再細分子步驟。
- 巢狀有序清單子項：例如「2. 部署前檢查」底下的細項。
接著是待辦事項，用於追蹤任務進度：
引言與分隔線
引言（Quote）適合引用外部文字、強調重要句子，或做為段落開頭的引導。
這是一段引言文字，用來測試 quote block 的渲染，同時也模擬實際文章中引用書籍內容、使用者回饋或設計原則的情境。
分隔線則可以清楚地將不同主題區塊分開，在長文中增加閱讀節奏：
Callout / 提示框
Callout 常用來放置提醒、警告、Tips 或最佳實務建議。讀者在掃描頁面時，很容易就能注意到這類內容。
- 內部也可以有 清單項目，列出多個注意事項
- 以及 斜體文字、inline code，例如 NODE_ENV=production
Toggle / 摺疊區塊
Toggle 是很適合收納補充資訊、技術細節或 FAQ 的區塊。預設收合可以讓主要內容更精簡，必要時再展開閱讀。
Toggle 標題文字
這是被摺疊起來的內容，可以放較長的說明文字或次要資訊。
- 巢狀項目 A：例如額外的技術背景說明
- 巢狀項目 B：或是延伸閱讀連結列表
Toggle Heading 1
Toggle Heading 2
Toggle Heading 3
Code Block
技術文件中，程式碼區塊是核心之一。下面示範一個簡單的 JavaScript 函式，藉此測試語法高亮與縮排樣式：
function hello(name) {
console.log(`Hello, ${name}!`);
}
hello('Notion Renderer');在實際教學文章裡，程式碼區塊通常會搭配文字說明，解釋每一段程式碼的用途與注意事項。
表格 Table
表格適合呈現結構化資料，例如參數說明、功能比較、價格方案等。以下是一個簡單的三欄表格，用來測試表頭與列樣式：
| 欄位 A | 欄位 B | 欄位 C |
| 資料 1 | 資料 2 | 資料 3 |
| 資料 4 | 資料 5 | 資料 6 |
你可以想像這個表格用來展示「方案 A/B/C 的功能差異」，或是「API 參數名稱、型別與說明」。
分欄 Columns
分欄可以讓內容在桌面版呈現更有版面變化，常見於比較左右兩組資訊、展示優缺點、或是同時呈現文字與重點列表。
左側欄位內容。這裡可以放說明文字、故事背景，或是產品介紹。
- 左側項目 1：例如功能重點說明
- 左側項目 2：或是設計考量與限制
右側欄位內容。可以放使用情境、操作步驟，或搭配截圖說明。
- 右側項目 A：實際案例 1
- 右側項目 B：實際案例 2
數學公式
如果你的系統需要支援數學或科學相關內容，公式渲染就相當重要。這裡分別示範行內公式與區塊公式：
Inline 公式： ，適合短句中插入簡單公式。
Block 公式：
區塊公式適合呈現較複雜的數學推導或重要定理，通常會搭配文字說明其意義與使用情境。
嵌入媒體 (Image / Video / Audio)
現代文件與教學文章經常搭配多媒體內容。以下示範影像、影片與音訊的嵌入方式：
實際使用時，你可以放上產品操作 Demo 影片、Podcast 內容或背景音效，讓頁面更有層次感。
代辦與內嵌結構混合測試
有時候任務本身會附帶補充說明或更細緻的子項目。這裡示範待辦事項搭配引言與巢狀清單、Toggle 的組合情境：
待辦 A 的補充說明引言：可以放上規格重點或設計原則，讓執行任務的人不會漏掉細節。
- 巢狀清單 A-1：確認所有常見區塊皆已渲染
- 巢狀清單 A-2：在手機與桌面裝置上做交叉測試
摺疊裡面的東西
這裡是摺疊內文與 inline code 混合，例如指令 npm run build 或部署步驟說明。
Database / Page / Date Mention 測試
在文件中，常會需要提到特定日期、其他頁面或資料庫。Notion 提供 Mention 功能，方便建立關聯：
這裡示範日期 Mention：2025-01-01 → 2025-01-02，適合標記專案期間或活動時間。
以下是虛構 Page Mention（不會移動頁面），用來測試樣式與互動：
Synced block 測試 (單向原始區塊)
Synced Block 可以在多個頁面之間同步顯示相同內容，特別適合放置「共用說明」、「版本資訊」或「重複使用的警語」。
這是一個 Synced Block 的原始區塊內容，用來測試 Renderer 的支援。
- 同步項目 1：例如共用的 FAQ 片段
- 同步項目 2：或是跨專案共用的提醒文字
顏色測試
最後，透過顏色來測試各種文字與背景樣式，確保在自訂 Renderer 時不會漏掉配色邏輯。
這一段一般文字
這段引言有背景色
文字顏色測試（text color）：
- 灰色文字 gray
- 棕色文字 brown
- 橘色文字 orange
- 黃色文字 yellow
- 綠色文字 green
- 藍色文字 blue
- 紫色文字 purple
- 粉紅文字 pink
- 紅色文字 red
背景顏色測試（background color）：
- 灰色背景 gray_bg
- 棕色背景 brown_bg
- 橘色背景 orange_bg
- 黃色背景 yellow_bg
- 綠色背景 green_bg
- 藍色背景 blue_bg
- 紫色背景 purple_bg
- 粉紅背景 pink_bg
- 紅色背景 red_bg
透過以上這些區塊與內容，不僅可以完整測試 Notion Renderer 的行為，也能作為之後撰寫技術文件或設計規範時的參考範本。