Skip to content

程式區塊的使用

Material for MkDocs 中,你可以使用 code blocks(程式區塊) 來顯示程式碼,並且支援 行號(Line Numbers)、語法高亮(Highlight)、標題(Title) 等功能。

📌 基本用法

markdown 本身預設就有基本的 syntax highlighting 的功能。

原始程式

```python
print("Hello, MkDocs!")
```

輸出結果

print("Hello, MkDocs!")

Material for MkDocs 會根據語言自動加上語法高亮!

✅ 進階功能

1️⃣ 顯示行號(Line Numbers)

原始程式

```python linenums="1"
print("這是第一行")
print("這是第二行")
print("這是第三行")
```

輸出結果

1
2
3
print("這是第一行")
print("這是第二行")
print("這是第三行")

使用 linenums 來顯示行號!

2️⃣ 高亮特定行數(Highlight Lines)

原始程式

```python hl_lines="1-2"
print("這行會被高亮")
print("這行也會被高亮")
print("這行不會")
```

輸出結果

print("這行會被高亮")
print("這行也會被高亮")
print("這行不會")

使用 hl_lines="1-2" 來高亮 1-2 行!

3️⃣ 添加標題(Title)

原始程式

```python title="example.py"
print("這是 example.py 的內容")
```

輸出結果

example.py
print("這是 example.py 的內容")
使用 title="example.py" 來顯示標題!


4️⃣ 隱藏複製按鈕

原始程式

``` {.python .no-copy}
print("這是 example.py 的內容")
print("這行會被高亮")
```

輸出結果

print("這是 example.py 的內容")
print("這行會被高亮")

使用 {.no-copy} 來隱藏「複製」按鈕!

5️⃣ 行內程式碼

如果只要在行內顯示程式碼,可以使用:

原始程式

內嵌 `print("Hello, MkDocs!")` 在文字裡面!

輸出結果

內嵌 print("Hello, MkDocs!") 在文字裡面!

📌 如果要 highlight 內嵌的程式,則使用#!加上程式語言的簡碼。

原始程式

內嵌 `#!python print("Hello, MkDocs!")` 在文字裡面!

輸出結果

內嵌 print("Hello, MkDocs!") 在文字裡面!

📖 總結

功能 語法範例
基本程式碼區塊 ```python print("Hello") ```
顯示行號 ```python linenums="1" ```
高亮特定行 ```python hl_lines="2" ```
添加標題 ```python title="example.py" ```
隱藏複製按鈕 ```{.python .no-copy} ```
行內程式碼 `print("Hello")`