Markdown 基本格式與實用範例

這份筆記整理常用的 Markdown 語法，包含標題、粗體、清單、連結、圖片、表格、程式碼、引用框、提示框、摺疊區塊與常用筆記模板。

💡 使用方式

每個章節都會先顯示「語法」，再示範實際呈現效果。
不同網站的 Markdown 解析器可能略有差異，最穩定的格式是標題、清單、連結、圖片、表格、程式碼與引用框。

1. 標題

語法

# 第一層標題
## 第二層標題
### 第三層標題
#### 第四層標題

呈現效果

第一層標題

第二層標題

第三層標題

第四層標題

📌 建議

一篇筆記通常只使用一個 # 作為文章主標題，後續內容依序使用 ## 與 ###。

2. 段落與換行

Markdown 中，段落之間要留一個空行。

語法

這是第一個段落。

這是第二個段落。

呈現效果

這是第一個段落。

這是第二個段落。

強制換行

在句尾加入兩個空白，或直接使用 HTML 的 <br>。

第一行  
第二行

第三行<br>
第四行

3. 粗體、斜體、刪除線與行內程式碼

語法

**粗體文字**

*斜體文字*

***粗體加斜體***

~~刪除線~~

`行內程式碼或指令`

呈現效果

粗體文字

斜體文字

粗體加斜體

~~刪除線~~

npm run dev

4. 無序清單

語法

- 第一項
- 第二項
- 第三項

呈現效果

第一項
第二項
第三項

巢狀清單

- AI
  - Machine Learning
  - LLM
    - RAG
    - Fine-tuning
- Software Development
  - Product Design
  - Website Development

呈現效果

AI
- Machine Learning
- LLM
  - RAG
  - Fine-tuning
Software Development
- Product Design
- Website Development

5. 有序清單

語法

1. 定義問題
2. 整理資料
3. 建立 baseline
4. 訓練模型
5. 評估結果

呈現效果

定義問題
整理資料
建立 baseline
訓練模型
評估結果

6. 待辦清單

語法

- [x] 已完成項目
- [ ] 尚未完成項目
- [ ] 等待確認

呈現效果

已完成項目
尚未完成項目
等待確認

⚠️ 相容性提醒

部分 Markdown 網站只會把待辦清單顯示成方框，不一定能直接點擊修改。

7. 分隔線

輸入三個以上的 -、* 或 _。

---

呈現效果：

8. 一般連結

語法

[顯示文字](https://example.com)

範例

前往 GitHub

9. 帶說明文字的連結

滑鼠停留時，部分瀏覽器會顯示補充說明。

[前往 GitHub](https://github.com/ "GitHub 官方網站")

10. 同一篇文章中的段落連結

可連到文章中的標題。

[跳到圖片教學](#12-圖片)

跳到圖片教學

📌 提醒

中文標題產生的錨點規則可能因網站不同而略有差異。英文標題通常最穩定。

11. 顯示網址本身

<https://github.com/kainnne>

呈現效果：

https://github.com/kainnne

12. 圖片

網站圖片

![圖片替代文字](https://example.com/image.jpg)

WikiNB 本機公開圖片

如果圖片實際放在網站的公開圖片資料夾，Markdown 通常只需要寫網站路徑：

![Kaine 個人照片](/images/AboutMe/photo.jpg)

⚠️ 不要使用電腦本機絕對路徑

下列寫法只能在自己的電腦上找到檔案，網站部署後無法使用：
/Users/kaine/Desktop/Projects/...

圖片加上可點擊連結

[![專案畫面](/images/project-cover.jpg)](https://example.com)

使用 HTML 控制圖片寬度

<img
  src="/images/AboutMe/photo.jpg"
  alt="Kaine 個人照片"
  width="480"
/>

🚧 相容性提醒

HTML 是否能顯示，以及 style 是否會被保留，取決於網站的 Markdown 解析與安全設定。

13. 一般引用框

每一行前面加入 >。

語法

> 這是一段引用內容。
>
> 可以包含第二個段落。

呈現效果

這是一段引用內容。

可以包含第二個段落。

14. 實用提示框

這是最穩定、最適合一般 Markdown 網站的框框寫法。

重點框

> 💡 **重點**
>
> 這裡放文章最重要的資訊。

💡 重點

這裡放文章最重要的資訊。

摘要框

> 📌 **摘要**
>
> 這裡用一小段話整理文章內容。

📌 摘要

這裡用一小段話整理文章內容。

專案目標框

> 🎯 **專案目標**
>
> 協助使用者快速找到適合的 AI 工具。

🎯 專案目標

協助使用者快速找到適合的 AI 工具。

方法框

> 🔬 **方法**
>
> 先建立 baseline，再比較不同模型與提示方法。

🔬 方法

先建立 baseline，再比較不同模型與提示方法。

已完成框

> ✅ **已完成**
>
> 網站已完成第一版並部署至 GitHub Pages。

✅ 已完成

網站已完成第一版並部署至 GitHub Pages。

開發中框

> 🚧 **開發中**
>
> 目前正在補充登入、權限與 RAG 功能。

🚧 開發中

目前正在補充登入、權限與 RAG 功能。

注意框

> ⚠️ **注意**
>
> 測試資料不得包含真實姓名、成績或未公開資料。

⚠️ 注意

測試資料不得包含真實姓名、成績或未公開資料。

錯誤框

> ❌ **常見錯誤**
>
> 不要直接把電腦本機路徑貼到公開網站。

❌ 常見錯誤

不要直接把電腦本機路徑貼到公開網站。

結論框

> 🧭 **結論**
>
> 先確保簡單方法有效，再決定是否導入更複雜的模型。

🧭 結論

先確保簡單方法有效，再決定是否導入更複雜的模型。

15. 巢狀引用框

> 第一層內容
>
> > 第二層內容

呈現效果：

第一層內容

第二層內容

16. GitHub 特殊提示框

GitHub 支援以下格式：

> [!NOTE]
> 補充資訊。

> [!TIP]
> 實用建議。

> [!IMPORTANT]
> 重要資訊。

> [!WARNING]
> 警告資訊。

> [!CAUTION]
> 高風險提醒。

⚠️ 相容性提醒

這些格式在 GitHub 會顯示為特殊彩色提示框，但一般 Markdown 網站可能只會顯示成普通引用框，並保留 [!NOTE] 文字。

因此一般 WikiNB 筆記更建議使用：

> 💡 **補充資訊**
>
> 這是補充說明。

17. 可展開與收起的區塊

使用 HTML 的 <details> 與 <summary>。

語法

<details>
<summary><strong>展開查看技術細節</strong></summary>

這裡可以放比較長的補充內容。

- 第一項
- 第二項
- 第三項

</details>

呈現效果

展開查看技術細節

這裡可以放比較長的補充內容。

第一項
第二項
第三項

預設展開

<details open>
<summary><strong>目前預設展開</strong></summary>

這段內容一開始就會顯示。

</details>

18. 程式碼區塊

使用三個反引號包住程式碼。

Python

```python
from pathlib import Path

file_path = Path("data.csv")
print(file_path.exists())
```

呈現效果：

from pathlib import Path

file_path = Path("data.csv")
print(file_path.exists())

JavaScript

```javascript
function greet(name) {
  return `Hello, ${name}`;
}
```

Bash

```bash
npm install
npm run dev
```

JSON

```json
{
  "name": "WikiNB",
  "status": "active"
}
```

純文字流程

```text
需求
  ↓
產品設計
  ↓
AI Agent 開發
  ↓
測試與修正
  ↓
部署
```

19. 表格

語法

| 項目 | 說明 | 狀態 |
|---|---|---|
| 前端 | 網站介面 | 已完成 |
| 後端 | 登入與 API | 開發中 |
| RAG | 文件問答 | 規劃中 |

呈現效果

項目	說明	狀態
前端	網站介面	已完成
後端	登入與 API	開發中
RAG	文件問答	規劃中

對齊方式

| 靠左 | 置中 | 靠右 |
|:---|:---:|---:|
| A | B | C |
| 1 | 2 | 3 |

20. 在表格中使用粗體與連結

| 專案 | 類型 | 連結 |
|---|---|---|
| **WikiNB** | 知識庫 | [前往網站](https://kcis.kainnne.com/copy/wikinb/) |
| **KCIS AI Navigator** | AI 工具導覽 | [前往網站](https://kcis.kainnne.com/) |

21. 跳脫特殊符號

Markdown 中有些符號本身具有功能。若只想顯示符號，可在前面加入反斜線 \。

\*這不會變成斜體\*

\# 這不會變成標題

\[這不會變成連結\]

22. HTML 換行與文字樣式

換行

第一行<br>
第二行

上標與下標

H<sub>2</sub>O

x<sup>2</sup>

呈現效果：

H₂O

x²

鍵盤按鍵

按下 <kbd>Command</kbd> + <kbd>C</kbd>

呈現效果：

按下 Command + C

23. 自訂 HTML 卡片

<div style="border: 1px solid #7c3aed; border-radius: 12px; padding: 16px; background: #f5f3ff;">

<strong>專案成果</strong>

完成可公開操作的 AI 工具導覽網站。

</div>

⚠️ 注意

這種方式能否保留顏色與樣式，取決於網站是否允許 inline style。GitHub 預覽通常會移除部分樣式。

24. 數學公式

部分支援 KaTeX 或 MathJax 的網站可以使用以下格式。

行內公式

分類準確率可寫成 $Accuracy = \frac{TP + TN}{TP + TN + FP + FN}$。

獨立公式

$$
F_1 = 2 \cdot \frac{Precision \cdot Recall}{Precision + Recall}
$$

🚧 相容性提醒

是否能顯示公式，取決於網站是否真的啟用 KaTeX／MathJax，而不是只有安裝套件。

25. 註解文字

Markdown 本身沒有正式註解語法，但可使用 HTML 註解：

<!-- 這段文字不會顯示在頁面上 -->

適合記錄：

<!-- TODO：之後補上專案截圖 -->

26. 參考連結寫法

當同一個網址重複使用時，可以把網址放到文章底部。

語法

這是我的 [GitHub][github]。

這是我的 [WikiNB][wikinb]。

[github]: https://github.com/kainnne
[wikinb]: https://kcis.kainnne.com/copy/wikinb/

27. 常用專案筆記模板

# 專案名稱

一句話說明這個專案解決什麼問題。

> 🎯 **專案目標**
>
> 說明主要使用者與需要解決的問題。

## 背景

簡短說明為什麼建立這個專案。

## 核心功能

- 功能一
- 功能二
- 功能三

## 設計邏輯

1. 使用者先做什麼
2. 系統如何處理
3. 最後得到什麼結果

## 我的工作內容

- 需求定義
- 產品與流程設計
- AI Agent 任務拆解
- 測試與部署

## 目前狀態

> 🚧 **目前狀態**
>
> 第一版已完成，後續預計加入其他功能。

## 專案連結

- [前往網站](https://example.com)
- [GitHub Repository](https://github.com/)

28. 常用研究筆記模板

# 研究主題

一句話描述研究問題。

> 🔬 **研究問題**
>
> 說明要預測、分類或比較的目標。

## 資料

- 資料來源
- 樣本數量
- 特徵內容
- 資料限制

## 方法

1. Data Preprocessing
2. Feature Engineering
3. Baseline
4. Model Training
5. Model Evaluation

## 評估指標

- Accuracy
- Precision
- Recall
- Macro-F1
- Confusion Matrix

## 實驗結果

| 方法 | 指標 | 結果 |
|---|---|---:|
| Baseline | Macro-F1 | 待補 |
| Model A | Macro-F1 | 待補 |

> 🧭 **結論**
>
> 用一小段話說明目前最重要的發現。

29. 常用個人能力筆記模板

# 能力主題

一句話說明自己的能力定位。

## 核心能力

- 能力一
- 能力二
- 能力三

## 代表成果

### 專案或作品名稱

- 完成內容
- 使用情境
- 實際成果

## 延伸閱讀

- [完整專案筆記](https://example.com)
- [GitHub](https://github.com/)

30. 推薦的框框圖示

類型	圖示	建議標題
重要資訊	💡	重點
簡短整理	📌	摘要
專案方向	🎯	專案目標
研究方法	🔬	方法
已完成	✅	已完成
進行中	🚧	開發中
一般提醒	⚠️	注意
錯誤示範	❌	常見錯誤
最終整理	🧭	結論
資料內容	📊	資料
技術內容	🛠️	技術細節
延伸資訊	🔗	延伸閱讀

31. 最穩定的 Markdown 語法

以下格式通常能在絕大多數 Markdown 網站正常顯示：

標題
粗體與斜體
無序與有序清單
一般連結
圖片
引用框
程式碼區塊
表格
分隔線

以下格式需要特別測試：

GitHub 特殊提示框
HTML 卡片與 inline style
<details> 摺疊區塊
數學公式
Mermaid 流程圖
互動式待辦清單

🧭 結論

公開筆記應優先使用簡單、穩定且容易閱讀的格式。特殊框框是用來凸顯重點，不應讓整篇文章充滿顏色、圖示與裝飾。