# Markdown 完整教學指南:語法、範例與實用技巧一次掌握

6 min read
Table of Contents

Markdown 是什麼!

Markdown 是一種輕量級標記語言,它以易讀易寫的純文字格式撰寫文件,並轉換為其他格式!Markdown 的設計理念是:

  • 易讀易寫,讓人可以輕易閱讀並且專注於內容本身。
  • 格式轉換簡單,易於在不同平台之間轉換。
  • 可讀性高,易於閱讀和維護。

Markdown 的使用場景

  • 某些Blog生成器會使用Markdown來撰寫文章
  • 專案的README文件
  • 某些筆記軟體
  • 社交軟體或是一些論壇發文時會用到

Markdown 跟 HTML 的差別

  • Markdown 比 HTML 更易讀易寫。
  • Markdown 比 HTML 更易於在不同平台之間轉換。
  • Markdown 比 HTML 更易於閱讀和維護。

語法比較

兩個大標題分別的語法會是

<h1>Hello World</h1>
# Hello World

所以可以很輕易的看出來! Markdown 對人類來說比 HTML 更易讀易寫!

語法範例!

標題

# 標題1
## 標題2
### 標題3

列表

列表分為無序列表還有有序列表,區別就是有沒有數字順序

無序列表

- 列表1
- 列表2
- 列表3
  • 列表1

有序列表

1. 列表1
2. 列表2
3. 列表3
  1. 列表1
  2. 列表2

引用

> 引用

引用

連結

[連結](https://www.google.com)

連結

圖片

引用圖片的方式跟連結的方式幾乎一樣,只是前面多了一個驚嘆號

![圖片](https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png)

粗體

**粗體**

粗體

斜體

_斜體_

斜體

刪除線

刪除線在內容的開頭以及結尾各加上兩個波浪符號,請注意不要用到全型

~~刪除線~~

刪除線

防雷海苔

防雷海苔的語法是在內容的開頭以及結尾各加上兩個 | 符號,請注意不要用到全型

||防雷海苔||

防雷海苔

程式碼

程式碼區塊有分兩種,一種是行內程式碼,一種是程式碼區塊

程式碼區塊

```程式語言名稱
程式碼內容
```
print("Hello, World!")

行內程式碼

行內程式碼適合在文字中插入簡短的程式碼片段,使用單個反引號包圍:

`行內程式碼`

行內程式碼

表格

表格稍微複雜一點,但是只要記住格式就很簡單了

基本表格

| 標題1 | 標題2 | 標題3 |
| ----- | ----- | ----- |
| 內容1 | 內容2 | 內容3 |
標題1標題2標題3
內容1內容2內容3

表格對齊

| 左對齊 | 置中對齊 | 右對齊 |
| :----- | :------: | -----: |
| 內容 | 內容 | 內容 |
左對齊置中對齊右對齊
內容內容內容

分隔線

---

任務列表

- [ ] TODO1
- [x] TODO2
  • TODO1
  • TODO2

嵌套列表

列表可以有多層嵌套,使用縮排來表示層級:

1. 第一層項目
- 第二層項目
- 第二層項目
- 第三層項目
2. 第一層項目
1. 第二層數字項目
2. 第二層數字項目

效果:

  1. 第一層項目
    • 第二層項目
    • 第二層項目
      • 第三層項目
  2. 第一層項目
    1. 第二層數字項目
    2. 第二層數字項目

數學公式

本網站支援 LaTeX 數學公式,使用 KaTeX 渲染:

行內公式

$E = mc^2$

效果: E=mc2E = mc^2

區塊公式

$$
\sum_{i=1}^{n} x_i = x_1 + x_2 + \cdots + x_n
$$

效果:

i=1nxi=x1+x2++xn\sum_{i=1}^{n} x_i = x_1 + x_2 + \cdots + x_n

換行

Markdown 中有幾種換行方式:

段落換行

第一段
第二段(中間空一行)

強制換行

第一行(行末加兩個空格)
第二行
或使用 HTML 標籤:
第一行<br>第二行

效果: 第一行(行末加兩個空格)
第二行

或使用 HTML 標籤: 第一行
第二行

轉義字符

想要顯示 Markdown 特殊字符本身時,使用反斜線轉義:

\* 這不會變成列表
\# 這不會變成標題
\` 這不會變成程式碼
\[不會變成連結\]
\**不會變成粗體\**

效果:
* 這不會變成列表
# 這不會變成標題
` 這不會變成程式碼
[不會變成連結]
*不會變成粗體*

qian avatar

感謝閱讀我的部落格文章!歡迎查看我的其他文章或透過頁尾的社交連結聯繫我。


More Posts

Comments