Skip to content

Content Tabs 使用教學

在 Material for MkDocs 中，Content Tabs 可以用來在不同標籤內顯示不同內容，適合用於多語言切換、程式碼範例對比等應用。

⚙️ mkdocs.yml設定

markdown_extensions:
  - pymdownx.superfences
  - pymdownx.tabbed:
      alternate_style: true

✅ 1. 基本用法

你可以使用 === "標籤名稱" 來定義標籤： 

=== "Python"
    ```python
    print("這是 Python 程式碼")
    ```

=== "JavaScript"
    ```javascript
    console.log("這是 JavaScript 程式碼");
    ```

這樣會產生一個標籤頁，讓使用者可以點選切換 Python 和 JavaScript。

print("這是 Python 程式碼")

console.log("這是 JavaScript 程式碼");

✅ 2. 在一般內容中使用

除了程式碼，你也可以使用 Markdown 內容： 

=== "說明"
    這是一段說明內容。

=== "範例"
    - 第一個範例
    - 第二個範例

這是一段說明內容。

  • 第一個範例
  • 第二個範例

✅ 3. 預設開啟某個標籤

預設會顯示 第一個標籤，如果你要讓預設是其他標籤，只要在等號後面加上一個+。

=== "標籤 1"
    這是標籤 1 的內容。

===+ "標籤 2"
    這是標籤 2 的內容。

=== "標籤 3"
    這是標籤 3 的內容。

這是標籤 1 的內容。

這是標籤 2 的內容。

這是標籤 3 的內容。

✅ 4. 遷入提示框

你可以將標籤頁遷入提示框：

!!! 語言

    === "Python"
        ```python
        print("這是 Python 程式碼")
        ```

    === "JavaScript"
        ```javascript
        console.log("這是 JavaScript 程式碼");
        ```

這樣會產生一個 "語言" 提示框，裡面有 Python 和 JavaScript 兩個標籤。

語言

print("這是 Python 程式碼")

console.log("這是 JavaScript 程式碼");

📝 總結

  • 使用 === "標籤名稱" 建立標籤頁
  • 可在標籤內放 Markdown 內容或程式碼
  • 使用 ==== "子標籤" 來建立巢狀結構
  • 在 mkdocs.yml 啟用 content.tabs

這樣就可以輕鬆使用 Content Tabs 來整理內容！ 🚀

📖 參考資料