功能總覽

這篇文章示範 Markdown 轉換流程支援的所有排版功能，同時也用來驗證中文內容的閱讀時間估算、 目錄（TOC）與標題錨點（slug）是否正常運作。原始檔在 src/content/blog/kitchen-sink-zh.md，可以對照著看。

程式碼區塊

檔名與行號

在 code fence 加上 title 會顯示檔名框；加上 showLineNumbers 則會顯示行號。

export function greet(name: string): string {
  return `哈囉，${name}！`;
}

1
export function add(a: number, b: number): number {
2
  return a + b;
3
}

差異標記

標記為 diff 並加上 lang="…" 的 code fence，會把 +／- 開頭的行顯示為新增或刪除， 其餘部分仍保有語法上色。

function total(items: number[]): number {
  return items.reduce((a, b) => a + b);
  return items.reduce((a, b) => a + b, 0);
}

文字

行內程式碼像 npm run build 可以直接放在句子中間，不會打斷閱讀。

引言區塊：以下所有內容都是從這一個 Markdown 檔案產生的（主題樣式、閱讀時間、 目錄，全部都讀同一份原始檔）。

表格

清單

• 寫完功能總覽這篇文章
• 示範程式碼、表格與註腳
• 打開數學公式與 mermaid 開關，畫一張真正的圖表

圖片

圖片預設會撐滿整個欄寬；加上 width 屬性就能縮小，像下面這個示範一樣。

數學與圖表

src/config.ts 裡的 features.math 與 features.mermaid 預設都是 關閉 的，所以 $$…$$ 和 ```mermaid 區塊如果直接寫，只會被當成一般文字或程式碼， 不會變成公式或圖表。這裡改用逸出（escaped）的方式呈現語法本身，等打開開關後再看 實際渲染效果。

$$
E = mc^2
$$

graph TD
  A[Markdown] --> B[remark-mermaid]
  B --> C[渲染後的圖表]

註腳

這篇文章的閱讀時間也是從渲染後的文字內容計算出來的，中文字同樣算在內¹。