Markdown 擴充
一般 Markdown 能寫的標題、清單、連結、圖片,VitePress 都支援。文件站真正常用的是下面這幾項擴充。完整語法以官方〈Markdown 擴充〉為準。
Frontmatter
每個 .md 頂端可用 YAML 覆寫該頁標題、描述,或指定版型:
首頁還會用 layout: home 搭配 hero、features,見 首頁版型。
內部連結
站內連結請省略副檔名,讓 VitePress 依設定產生最終 URL:
三種寫法都能導到同一頁,建議固定用無副檔名或 .md。外部連結會自動 target="_blank"。
提示框(自訂容器)
::: info
補充說明。
:::
::: tip
建議這樣做。
:::
::: warning
可能踩坑。
:::
::: danger
繼續操作會造成問題。
:::
::: details
點開才看到的內容。
:::
標題可自訂:tip 安裝提示。也支援 GitHub 風格的 > [!NOTE]、> [!WARNING]。
程式碼區塊
語言名稱接在圍欄後面就會用 Shiki 上色。文件裡最常用的還有:
| 寫法 | 用途 |
|---|---|
```js{4} |
高亮第 4 行 |
```js{1,4,6-8} |
多行、區間混用 |
// [!code ++] / [!code --] |
顯示新增/刪除 |
:line-numbers |
單一塊開啟行號 |
<<< @/snippets/foo.js |
從專案檔案匯入片段 |
多個套件管理員的指令可用 code-group 做成可切換分頁,避免同一段指令複製三次。
目錄與表格
頁面中寫 [[toc]] 可插入該頁標題目錄。GitHub 風格表格可直接使用。標題可加 {#custom-id} 自訂錨點,方便穩定連結。
語法屬於 VitePress 頁面
上面的 tip、[[toc]]、code-group 是 VitePress 文件頁 的寫法。本教學站本身用 Zensical,提示框寫成 !!! tip。複製範例時請放到 VitePress 專案的 .md,不要直接貼進本站原始檔預期相同效果。