常用的 markdown 語法

前言

近期寫專案 README 和 Blog 常常會用到 markdown ,整理一篇常用語法!可以直接點左邊目錄,跳到相對應的主題位置。

參考資料:https://markdown.tw/

標題

Markdown支援 Setext 和 atx 兩種形式的標題語法。但因為 Setext 語法僅分兩級標題,使用 atx 語法會比較有撰寫彈性及方便,下面列出的是 atx 語法的標題。

標題會自動佔滿一整行。不同級別的標題使用起來會有字體大小、粗細…等樣式上的差別。

1
2
3
4
5
6
# 這是一級標題
## 這是二級標題
### 這是三級標題
#### 這是四級標題
##### 這是五級標題
###### 這是六級標題

區塊引言

Markdown使用email形式的區塊引言, > 會強迫斷行。

區塊引言可以有階層(如下圖所示),只要根據層數加上不同數量的 > 即可。引言的區塊內也可以使用其他的Markdown語法,包括標題、清單、程式碼區塊…等。

一級區塊引言

二級區塊引言

三級區塊引言

1
2
3
> 一級區塊引言
>> 二級區塊引言
>>> 三級區塊引言

清單

清單分為「有序清單」和「無序清單」。

  • 在項目標記後面則一定要接著至少一個空白或tab。
  • 如果清單項目間用空行分開, Markdown會把項目的內容在輸出時用 <p> 標籤包起來。

無序清單( unordered list ) 可以使用星號(*)、加號(+)或是減號(-)作為標記。無論哪種寫法,呈現出來的結果都一樣。

  • 無序清單範例
  • 無序清單範例
  • 無序清單範例
1
2
3
* 無序清單範例
+ 無序清單範例
- 無序清單範例

有序清單( ordered list ) 則是以數字加上英文句點(.)作為標記,項目標記後面則一定要接著至少一個空白或tab。比較特別的是,目前在清單標記上使用的數字並不會影響輸出的HTML結果。

  1. 有序清單一
  2. 有序清單二
  3. 有序清單三
1
2
3
1. 有序清單一
2. 有序清單二
8. 有序清單三(如上範例呈現,數字並不影響結果)

程式碼區塊及上色

撰寫程式碼區塊時可以用兩行的三個反引號(```)包裹程式碼,如果第一行的三個反引號(```)後面有加上程式語言名稱,它會自動辨識關鍵字並上色。

1
console.log('Hello World!')
1
2
3
4
// markdown 撰寫語法如下:
```js(語言名稱)
console.log('Hello World!')
```\(為了讓它能正常顯示,所以加了跳脫符號"\",實際撰寫時不加)

引入圖片

markdown 語法也可以貼上圖片,寫法如下方範例。圖片說明等同 HTML <img>alt property;而括號裡面填上圖片網址或在專案裡面的相對位置都可以。

1
![圖片說明](圖片 URL)

連結

即 HTML 的 <a> 。有些支援「文內跳轉」的地方,也可以在括號內填入文章的錨點。

連結寫法有「參考式連結」和「行內形式連結」。

  • 參考式連結可以讓文件更像是瀏覽器最後產生的結果,把一些標記相關的資訊移到段落文字之外,不讓文章的閱讀感覺被打斷。有興趣研究的可以到文章開頭提供的網址查看。
  • 平常不會一次寫太多連結時,行內形式連結寫起來較直覺,所以這邊只提供「行內形式連結」寫法。
1
[連結文字](連結 URL)

字體變化

粗體
也是粗體
斜體
也是斜體

1
2
3
4
**粗體**
__也是粗體__
*斜體*
_也是斜體_

插入空白行

有些東西屬於「行內元素」,在 markdown 語法裡的 Enter(換行)會被自動忽略。比如平常編輯兩個段落文字時,使用 Enter 就會自動換行開始新段落,但在 markdown 裡則是使用兩個半型空格( )。

使用兩個半型空格( )後會強制換行產生新段落。在兩個段落間多插入一行或多行空白行則會在兩段落間增加一點段落間距(margin),但空白行的數量並不影響間距大小。如果真的想呈現多行空白行,則可使用 HTML 元素 <br/> 來達成。

分隔線

在一行中用三個或以上的星號、減號、底線來建立一個分隔線,行內不能有其他東西。
符號中間可以插入空格。下面每種寫法都可以建立分隔線:

1
2
3
4
5
6
7
* * *
***
*****
- - -
---------------------------------------
___
_ _ _

表格

markdown 也可以畫表格,但樣式較簡單無彈性。僅有基本的表格、對齊功能,而沒有「合併儲存格」的功能。

製作表格方式也很簡單,只要「畫」出來即可。用 | 畫出表格的左右框線;在表頭和內容中間必須插入一行 |----| ( - 數量不限),同時可以用 : 來調整文字的對齊方式,使用方式如下方範例。

這是表頭1 這是表頭2 這是表頭3 這是表頭4
預設 置中 靠左 靠右
1
2
3
| 這是表頭1 | 這是表頭2 | 這是表頭3 | 這是表頭4 |
| --------- | :-------: | :-------- | --------: |
| 預設 | 置中 | 靠左 | 靠右 |

補充說明

使用 markdown 在寫作上更方便,但相對來說排版和樣式上的彈性就小很多了。如果希望有更多樣式上的變化(如:顏色…等),就需要直接用 HTML 來書寫了!

文章內容如有錯誤,歡迎留言討論!


本 Blog 上的所有文章除特别聲明外,均採用 CC BY-SA 4.0 協議 ,轉載請註明出處!