Markdown 入門教學：常見語法與範例完整整理

前言

Markdown 是一種輕量級的標記語言，讓你用簡單的純文字語法就能產生具有結構的 HTML 內容。無論是撰寫技術文件、部落格文章還是筆記，Markdown 都是目前最主流的選擇。

這篇文章將會介紹所有常見的 Markdown 語法，每個語法都會附上範例與對應的 HTML 標籤說明。了解 Markdown 與 HTML 之間的對應關係，對於寫出語意正確的文章以及 SEO 優化都有幫助。

如果你想進一步了解每個語法實際產生的 HTML 結構，可以搭配瀏覽器的開發者工具（F12）一起查看。

標題

在 Markdown 中，標題是使用井字號 # 作為開頭，井字號的數量代表標題的層級。

1
2
3
4
5
6

# This is an H1
## This is an H2
### This is an H3
#### This is an H4
##### This is an H5
###### This is an H6

井字號會對應生成 <h1> ~ <h6> 標籤，HTML 中只有這六個層級，並不存在 <h7> 以後的標籤。

粗體

使用兩個米字號 ** 包覆文字即可產生粗體效果。

1

中間 **這段話** 我是粗體

範例：中間 這段話 我是粗體

對應的 HTML 標籤為 <strong>，在語意上代表「重要性強調」。

斜體

使用一個米字號 * 前後包覆文字即可產生斜體效果。

1

中間 *這段話* 我要斜體

範例：中間 這段話 我要斜體

對應的 HTML 標籤為 <em>，在語意上代表「語氣強調」。

粗斜體

若同時需要粗體與斜體，可以使用三個米字號 *** 包覆文字。

1

中間 ***這段話*** 我是粗斜體

範例：中間 這段話 我是粗斜體

對應的 HTML 結構為 <strong> 內嵌 <em> 標籤。

刪除線

使用前後兩個波浪符 ~~ 包覆文字即可產生刪除線效果。

1

今天~~天氣真好~~

範例：今天天氣真好

對應的 HTML 標籤為 <s>。

分隔線

分隔線主要為兩種。

1
2

1. ***
2. ---

通常建議使用減號 --- 取代星號，主要原因是減號在原始碼中的可讀性較高。

範例：

分隔線將會生成 <hr> 標籤。

插入連結

連結插入方式有兩種。

常見插入方式

1

[連結名稱](超連結)

範例：Google

快速連結

這是 Markdown 所提供的快速連結方式，直接將網址以角括號包覆即可自動產生可點擊的連結。

1

<https://www.google.com/>

範例：https://www.google.com/

以上兩種方式皆會產生 <a> 連結標籤。

項目清單

項目清單有分為兩大類。

1. 無序清單
2. 有序清單

1
2
3
4

1. *
2. +
3. -
4. 1. ...2.

無序清單

以下為範例

減號

• 這還是一段話
• 最後也是一段話

星號

• 這是一段話
• 這是第二段話

加號

• 這是一段話
• 這也是一段話

以上三種將會產生 <ul> > <li> 標籤。

有序清單

數字清單

1. 這是一段話
2. 這還是一段話

數字清單則會產生 <ol> > <li> 標籤。

巢狀清單

清單可以透過縮排來產生巢狀結構。

1
2
3

- 第一層
  - 第二層
    - 第三層

範例：

• 第一層
  • 第二層
    • 第三層

此外會建議同一個頁面下只使用一種無序清單格式，避免文章雜亂。

引用標籤

使用 > 符號可以建立引用區塊。需要注意的是，引用語法會生成 <blockquote> 標籤，在 SEO 的語意上代表「引用他人的內容」，因此不建議拿來當作一般的區塊裝飾使用。

1

> 引用一段話

範例：

引用一段話

對應的 HTML 標籤為 <blockquote>。

圖片

圖片的語法與連結相似，只需在前方加上一個驚嘆號 ! 即可。方括號內的文字會成為圖片的 alt 屬性，對於 SEO 和無障礙（Accessibility）都很重要，建議務必填寫有意義的描述。

1

![圖片名稱](https://imgur.com/abc.jpg)

對應的 HTML 標籤為 <img>，其中方括號內容會對應到 alt 屬性。

勾選

勾選欄位最常用於待辦事項清單，可以直觀地標示任務的完成狀態。

1
2

- [ ] 今天睡覺
- [x] 今天還沒睡覺

範例：

• 今天睡覺
• 今天還沒睡覺

對應的 HTML 結構為 <ul> > <li> 搭配 <input type="checkbox">，勾選互動通常需要透過 JavaScript 監聽，因此不是所有平台都支援此功能。

程式碼相關

在 Markdown 中，程式碼是使用反引號（backtick `）來標示。

程式碼片段

1

這是一段話 `var a = 10;`。

這是一段話 var a = 10;。

程式碼區塊

程式碼區塊則是使用上下三個反引號包覆，適合呈現多行的程式碼。

1

var a = 10;

程式碼相關語法都會產生 <pre> > <code> 的 HTML 結構。

程式碼高亮

程式碼高亮的部分需看該網站是否有支援高亮功能才能夠使用，僅限用於程式碼區塊，只需要在程式碼區塊開頭的三個反引號後方加入程式碼語言縮寫即可。

許多網站的程式碼高亮功能都是基於 highlight.js 或 Prism.js 等套件實現的。

JavaScript 範例：

1

var a = 10;

PHP 範例：

1

$a = 10;

HTML 範例：

1

<h1>這是標題</h1>

SCSS 範例：

1
2
3
4
5
6

.hex-text {
  color:white;
  &:hover {
    color: #69F0AE;
  }
}

常見語言縮寫列表

1
2
3
4
5
6
7
8
9
10

javascript or js
html
css
scss
sass
json
php
python
java
...

以 highlight.js 為例，支援的程式語言高達 185 種以上，完整列表可至 highlight.js 官方網站 查詢。

表格

Markdown 也支援表格語法，不過手寫表格容易出錯且不易對齊，建議搭配第三方生成工具來提高效率。

1
2
3

|   這是標題  | 這也是標題 |
|:-----------:|:----------:|
| 中午吃什麼? | 中午不吃飯 |

範例：

對應的 HTML 標籤為 <table>、<thead>、<tbody>、<tr>、<th>、<td> 等。

以下為推薦的 Markdown 表格產生工具：

1. 是 Ray 不是 Array 工具箱 - Markdown Table
2. Markdown Tables Generator
3. TableConvert

跳脫字元

若你想在文章中顯示 Markdown 的特殊符號（如 *、#、- 等），可以在符號前面加上反斜線 \ 來跳脫。

1
2

\* 這不會變成清單
\# 這不會變成標題

範例：

* 這不會變成清單

# 這不會變成標題

推薦 VSCode 撰寫 MD 套件

如果你剛開始使用 Markdown，建議安裝 markdownlint 這個 VSCode 套件。

它會針對不恰當的 Markdown 寫法標示黃色波浪底線提醒你，有助於養成良好的撰寫習慣。不過這些規範僅供參考，不需要完全遵守。

以下為常見撰寫問題

• 標題與段落之間沒使用一個 Enter 斷行。
• 程式碼片段沒使用一個 Enter 斷行。
• 程式碼片段沒有寫入高亮語言。
• 標題寫入了標點符號，在規範中標題是不宜寫入標點符號。
• 若要在段落內換行，需在行尾加入兩個空白鍵再按 Enter，而非僅使用一個 Enter。
• 文章結尾缺少一個 Enter。
• 大多文章標題就是 <h1>(ex: Hexo)，所以會建議從 <h2> 開始使用撰寫，若是 HackMD or quip 則可以從 <h1> 開始。

若覺得預設規範太過嚴格，也可以自定義規則，詳情請參考 markdownlint 套件說明。

同步更新

本文同步發佈於：

• HackMD - Markdown 基礎與入門教學手冊