Skip to content

資訊提示框 (Admonitions)

在 MkDocs Material 中，Admonitions 是用來顯示提示框（註解、警告、資訊等）的元件。這些提示框可以用來強調內容，讓讀者更容易理解重點。

⚙️ mkdocs.yml設定

markdown_extensions:
  - admonition
  - pymdownx.details
  - pymdownx.superfences

✅ 1. 基本使用

你可以使用 !!! 來創建 Admonition，格式如下：

!!! type
    這是提示框的內容

其中，type 可以是以下類型：

  • note（筆記）
  • abstract（摘要）
  • info（資訊）
  • tip（提示）
  • success（成功）
  • question（問題）
  • warning（警告）
  • failure（失敗）
  • danger（危險）
  • bug（錯誤）
  • example（範例）
  • quote（引言）

📌 範例

!!! note
    這是一個 **筆記** 提示框。

!!! warning
    **警告！** 這段內容可能會影響系統安全性。

!!! success
    恭喜！你已經完成這個章節的學習。

Note

這是一個 筆記 提示框。

Warning

警告！ 這段內容可能會影響系統安全性。

Success

恭喜！你已經完成這個章節的學習。

✅ 2. 自訂標題

你可以在 !!! 後面加上標題：

!!! tip "小技巧"
    這是一個自訂標題的提示框。

小技巧

這是一個自訂標題的提示框。

✅ 3. 內部使用 Markdown

你可以在 Admonition 內使用 Markdown 語法： 

!!! info "格式範例"
    - 這是一個列表項目
    - **這是粗體**
    - *這是斜體*

格式範例

  • 這是一個列表項目
  • 這是粗體
  • 這是斜體

✅ 4. 可摺疊的 Admonitions

如果你想讓 Admonition 預設為摺疊（點擊展開），可以加上 ?： 

??? example "點擊展開範例"
    這是一個可以摺疊的提示框。

點擊展開範例

這是一個可以摺疊的提示框。

✅ 5. 自訂樣式

你可以透過 CSS 自訂樣式，例如： 

.md-typeset .admonition.custom {
    background-color: #ffebcd;
    border-left: 4px solid #ff4500;
}

然後在 Markdown 內使用：

!!! custom "自訂顏色"
    這是一個自訂顏色的 Admonition。

自訂顏色

這是一個自訂顏色的 Admonition。

📝 總結

  • !!! type 用來創建提示框
  • !!! type "標題" 來自訂標題
  • ??? type "標題" 讓提示框可摺疊
  • 可使用 Markdown 內容
  • 透過 CSS 自訂樣式

這樣就能靈活運用 Admonitions 讓你的 MkDocs 更具可讀性！ 🚀

📖 參考資料