---
# System prepended metadata

title: Markdown

---

# 🧾 Markdown 完整教學（for HackMD / GitHub）

## 📖 介紹

看過 `.md` 檔嗎？那就是 **Markdown** 的縮寫。  
一句話來說：「**Markdown 用簡潔的語法寫出漂亮的文件**」。

📚 **Markdown 是什麼？**
- 是一種輕量級標記語言，可將純文字轉換成 HTML。
- 程式設計師、寫筆記的人、部落客最愛用。
- 常見場景：**GitHub README.md**、**HackMD 筆記**、**個人網誌**。

🧰 **Markdown 的用途**
* 🧠 撰寫程式說明文件（Documentation）
* 📝 做筆記
* 📚 寫成書籍
* 🌐 寫部落格（Markdown 可轉成 HTML）
* 💬 製作簡報（HackMD、Marp、Reveal.js 都支援）

---

## 🎨 主題與背景

HackMD 可切換主題模式：

```markdown
{%hackmd theme-dark %}  <!-- 深色模式 -->
{%hackmd theme-light %} <!-- 淺色模式 -->
```

---

## 🏷️ 標題（Headers）

使用「#」井字號表示標題層級。

```markdown
# H1 主標題
## H2 副標題
### H3 小標題
#### H4
##### H5
###### H6
```

效果：

# H1 主標題  
## H2 副標題  
### H3 小標題  
#### H4  
##### H5  
###### H6  

---

## ✍️ 字體效果（Font Style）

| 效果 | 語法 | 顯示結果 |
|------|------|-----------|
| 斜體 | `*文字*` 或 `_文字_` | *文字* |
| 粗體 | `**文字**` | **文字** |
| 斜體＋粗體 | `***文字***` | ***文字*** |
| 刪除線 | `~~文字~~` | ~~文字~~ |
| 底線 (HTML) | `<u>文字</u>` | <u>文字</u> |
| 標註 | `<mark>文字</mark>` | <mark>文字</mark> |
| 顏色 | `<font color=red>文字</font>` | <font color=red>文字</font> |

---

## 🧾 引用區塊（Quote Block）

```markdown
> 這是一段引文
>> 這是巢狀引文
```

> 這是一段引文  
>> 這是巢狀引文  

HackMD 的留言式引用：
```markdown
> [name=王宇晨]
> [time=Mon, Jun 12, 2023 11:54 PM]
> [color=#ed65db]
> [link text](https://example.com "title")
```

---

## 🔢 清單（Lists）

### 有序清單
```markdown
1. 第一項
2. 第二項
   1. 子項目
```

### 無序清單
```markdown
- 星號
* 或者這樣
+ 也可以這樣
```

效果：
- 星號
  - 子項目

---

## 🔗 超連結（Links）

```markdown
[連結名稱](https://google.com "游標顯示文字")
```

效果：  
[Google](https://google.com "游標顯示文字")

HTML 寫法：
```html
<a href="https://google.com" target="_blank">Google</a>
```

---

## 🖼️ 圖片（Images）

```markdown
![圖片說明](圖片網址 "游標顯示文字")
```

範例：
```markdown
![Markdown Logo](https://markdown-here.com/img/icon256.png "Markdown Logo")
```

[![Markdown Logo](https://markdown-here.com/img/icon256.png)](https://markdown-here.com)

---

## 📊 表格（Tables）

```markdown
| 左對齊 | 右對齊 | 置中 |
| :-- | --: | :--: |
| 內容A | 內容B | 內容C |
```

| 左對齊 | 右對齊 | 置中 |
| :-- | --: | :--: |
| A | B | C |

---

## ✅ 待辦清單（Task List）

```markdown
- [x] 已完成
- [ ] 未完成
```

- [x] 已完成  
- [ ] 未完成

---

## 📦 分隔線（Horizontal Line）

```markdown
---
***
___
```

---

## ⚠️ 區塊提示（HackMD 支援）

```markdown
:::warning
⚠️ 這是警告
:::

:::success
✅ 這是成功訊息
:::

:::info
ℹ️ 這是資訊
:::

:::danger
❌ 這是錯誤
:::

:::spoiler
這是可展開的文字
:::
```

---

## 💻 程式碼區塊（Code Block）

### 行內程式碼
```
請使用 `print("Hello World")`。
```

效果：請使用 `print("Hello World")`。

### 多行程式碼
``````markdown
```python
def hello():
    print("Hello World!")
```
``````

效果：

```python
def hello():
    print("Hello World!")
```

---

## 🧮 數學公式（LaTeX 語法）

HackMD 與 GitHub 支援 LaTeX（用 `$...$` 或 `$$...$$`）

```markdown
行內：$E = mc^2$

區塊：
$$
\int_0^1 x^2 \,dx = rac{1}{3}
$$
```

效果：

行內：$E = mc^2$

區塊：
$$
\int_0^1 x^2 \,dx = rac{1}{3}
$$

---

## 🎵 音樂 & 🎬 影片（HTML 支援）

```html
<audio src="https://example.com/audio.mp3" controls loop></audio>
<video src="https://example.com/video.mp4" controls width="400"></video>
```

🎵  
<audio src="https://cdn.discordapp.com/attachments/845125802416799765/897109126444892170/2_feat.yama_Official_Video_-_YouTube.MP3"  controls loop></audio>

🎬  
<video src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" controls width="400"></video>

---

## 🧠 註腳（Footnotes）

```markdown
這是一句話[^1]

[^1]: 這是註腳的說明。
```

效果：  
這是一句話[^1]  
[^1]: 這是註腳的說明。

---

## 😀 Emoji 表情

使用 `:emoji_name:` 語法，例如：
```
:smile: :heart: :rocket: :fire:
```

效果：😄 ❤️ 🚀 🔥  
👉 [完整清單](https://gist.github.com/rxaviers/7360908)

---

## ✨ 小技巧補充

| 功能 | 語法 | 備註 |
|------|------|------|
| 跳脫字元 | `\` | 在符號前加 `\` 讓它不被解釋 |
| 換行 | 行末加兩個空白再 Enter | `行末␣␣Enter` |
| 強制換頁（HackMD） | `<!-- pagebreak -->` | 適用於簡報或 PDF 輸出 |
| 自訂 HTML 標籤 | `<span style="color:blue">文字</span>` | 改顏色或樣式 |

---

## 💡 結語

Markdown 的重點不是排版，而是「**讓內容保持簡潔、可讀、又可轉換成漂亮的格式**」。  
學會它，你就能：
- 寫技術文件更快
- 寫筆記更乾淨
- 寫簡報更輕鬆  
💪 **簡潔就是力量！**
