Markdown 介紹

Markdown 是一種輕量級標記式語言， 它有純文字標記的特性，讓編寫的可讀性提高，這是在以前很多電子郵件中就已經有的寫法，而目前也有很多網站都使用 Markdown 來撰寫說明文件或是在論壇上發表文章與發送訊息。

Markdown 優點

  • 相較 HTML 之下，不會夾雜很多不必要的標籤，讓可讀性提高。
  • 不需要像程式碼一樣縮排。

Markdown 缺點

  • 若使用在像 wordpress 的網站時，要調整一些樣式變化是不太方便的。
  • 需習慣 Markdown 的編輯方式。

Markdown 相關實用網站

字體

字體樣式是使用在一般文字中加強文字重要性，或是表示標題，粗體通常會用在一段文字中，強調某些字是這個語句中的重點，而標題字會依照字體大小來表示出這個標題的主要性，使用標題字的 Markdown 語法要特別注意 # 號越少標題越大，也就代表標題的重要性越高。

粗體

1
**bold**

標題字

1
# 標題

次標題字

1
## 次標題

小標題字

1
###### 小標題

GITHUB

列表

無序清單

1
2
3
4
* Item 1
* Item 2
  * Item a
  * Item b

顯示畫面

  • Item 1
  • Item 2
    • Item a
    • Item b

有序清單

1
2
3
1. Item 1
2. Item 2
3. Item 3

顯示畫面

  1. Item 1
  2. Item 2
  3. Item 3

表格

Markdown製作表格使用|來分隔不同的單元格，使用-來分隔表頭和其他行。

單元格和表頭

範例

1
2
3
4
name | age
---- | ---
LearnShare | 12
Mike |  32

顯示畫面

name age
LearnShare 12
Mike 32

為了美觀，可以使用空格對齊不同行的單元格，並在左右兩側都使用|來標記單元格邊界：

1
2
3
4
|    name    | age |
| ---------- | --- |
| LearnShare |  12 |
| Mike       |  32 |

顯示畫面

name age
LearnShare 12
Mike 32

對齊

在表頭下方的分隔線標記中加入:，即可標記下方單元格內容的對齊方式：

  • :--- 代表左對齊
  • :--: 代表居中對齊
  • ---: 代表右對齊
1
2
3
4
| left | center | right |
| :--- | :----: | ----: |
| aaaa | bbbbbb | ccccc |
| a    | b      | c     |
left center right
aaaa bbbbbb ccccc
a b c 
如果不使用對齊標記，單元格中的內容默認左對齊；表頭單元格中的內容會一直居中對齊（不同的實現可能會有不同表現）。

插入其他內容

1
2
3
4
|     name     | age |             blog                     |
| ------------ | --- | -------------------------------------|
|   GOOGLE     |  12 | [GOOGLE](https://www.google.com.tw/) |
|   YAHOO      |  32 | [YAHOO](http://www.yahoo.com.tw)     |
name age blog
GOOGLE 12 GOOGLE
YAHOO 32 YAHOO

CheckBox

CheckBox 常用在確認事情是否完成，在使用 Checkbox 要注意，中括號中的 x 就代表這個項目是被打勾的，它並不會主動紀錄勾選過的內容，所以使用時要確認勾選過的內容是否有增加 ｘ，避免混亂。

1
2
- [x] This is a complete item
- [ ] This is an incomplete item

顯示畫面
GITHUB

區塊

區塊分為小區塊跟大區塊，通常用於一段相關內容的撰寫，一小段文字或是註釋都可能會用小區塊來表示，而篇幅較大又不希望與一般段落內容混在一起的文字，就會使用大區塊來包覆。

小區塊語法：

1
`字句前後加上反引號`

大區塊語法：

1
前後個加四個空白

顯示畫面
字句前後加上反引號

前後個加四個空白

程式碼

插入程式碼語法

1
2
3
```js
這邊是程式碼
```js

顯示畫面

1
2
3
function myFunction(A1,A2){
    return A1 * A2; //傳回A1乘上A2的值
}

圖片

插入圖片語法

1
![圖片替代文字](圖片網址)

顯示結果：
圖片替代文字

階層式區塊

階層式區塊在表現結構或功能關係上是相當好用的呈現形式

階層式區塊語法：

1
2
3
4
> Quote one sentences
>>Quote two sentences
>>Quote two sentences
>>>Quote three sentences

顯示結果：
圖片替代文字

超連結

普通連結

1
格式為[link text](URL 'title text')。

範例

[Google](http://www.google.com/)

顯示結果:

Google

指向本地文件的鏈接

範例

[icon.gif](./images/icon.gif)

顯示結果:

icon.gif