認識 Markdown

Markdown 是一種用來寫作的輕量級「標記語言」，它用簡潔的語法代替排版，而不像一般我們用的字處理軟體 Word 或 Pages 有大量的排版、字型設定。它使我們專心於碼字，用「標記」語法，來代替常見的排版格式。例如此文從內容到格式，甚至插圖，鍵盤就可以通通搞定了。目前來看，支援 Markdown 語法的編輯器有很多，包括很多網站（例如簡書）也支援了 Markdown 的文字錄入。Markdown 從寫作到完成，匯出格式隨心所欲，你可以匯出 HTML 格式的檔案用來網站釋出，也可以十分方便的匯出 PDF 格式。

Markdown 的優點

• 頁面內容可讀性強，簡潔直觀。
• 純文字，相容性強，幾乎任何文字編輯器都可開啟。
• 格式轉換簡便，輕鬆的匯出HTML、PDF、.md等多種格式檔案。
• 不需太過於關心頁面排版，只需關注內容。

Markdown 官方文件

創始人 John Gruber 的 Markdown 語法說明

Markdown 中文版語法說明

常用的Markdown工具

Mac OS 平臺(個人推薦使用Macdown)

在 Mac OS X 上，個人強烈建議使用 Macdown 這款免費且十分好用的 Markdown 編輯器，它支援實時預覽，既左邊是你編輯 Markdown 語言，右邊會實時的生成預覽效果。

Windows 平臺

Windows使用者建議嘗試以下兩款產品：

• MarkdownPad

• MarkPad

Markdown 語法的簡要介紹

作者建議直接下載Markdown原始檔進行學習效率更加有效：Markdown原始碼Git地址：

1.換行符
2.強調(Strong and Emphasize)
3.標題(Headers)
4.URL連結
5.引用圖片
6.列表
7.引用
8.Inline Code
9.Block Code
10.Code Block
11.分割線
12.表格
13.錨點
14.del標籤
15.u標籤
16.mark標籤
17.font標籤

1.(Line Breaks)

在Markdown語法中，換行需要敲兩個Enter鍵，即在兩段文字之間新增一個空行來達到換行的效果。

參照圖

Code

*敲兩個Enter鍵鍵的效果：*
**這是第一個段落**

**這是第二個段落**

*在同一段落中，在需要換行的字元後敲兩個空格，再敲Enter鍵就能達到同一段落換行的效果*
**這是第一個段落**  
**這時第二個段落**

敲一個Enter鍵

這是第一個段落

這是第二個段落

上面的寫法在編輯器中顯示是兩行，但是在Macdown預覽效果發現，他們還是在同一行，只是兩個段落中間多出來一個空格。(注意：簡書中的效果是兩行顯示的，在簡書中編輯時，敲一個Enter鍵即可實現換行效果!)

這時我們在兩行中間多敲一個Enter鍵就能達到換行的效果

敲兩個Enter鍵鍵的效果：

這是第一個段落

這時第二個段落

有同學發現，我本來只是想讓同一句話換個行顯示而已，你這中間還多出來一空行，不夠美觀。能不能中間沒有留白的空行，但是也能實現換行的效果尼？當然辦法總是有的，下面就介紹第二種換行方式。

另一種方式實現換行的方式，兩個段落之間沒有空行

官方解釋：To force a line break, put two spaces and a newline (return) at the end of the line.

在同一段落中，在需要換行的字元後敲兩個空格，再敲Enter鍵就能達到同一段落換行的效果

例如這樣：

這是第一個段落
這時第二個段落

2.強調(Strong and Emphasize)

在Markdown語法中，想要著重強調某一部分內容時，可以使用*或者是_來包裹要著重強調的內容。**或__表示字型加粗，*或_表示字型斜體，（個人推薦使用*）

參照圖

Code

1. 加粗（**可以使用快捷鍵生成加粗符號：Command+b**）
* 方式1：**這是字型加粗強調**
* 方式2：__這是字型加粗強調__

2. 斜體（**可以使用快捷鍵生成斜體符號：Command+i**）
* 方式1：*這是斜體強調*
* 方式2：_這是斜體強調_

這裡的內容強調分兩種語法，一種是字型加粗強調，另一種是為斜體強調

1. 加粗（可以使用快捷鍵生成加粗符號：Command+b）

• 方式1：這是字型加粗強調
• 方式2：這是字型加粗強調

2. 斜體（可以使用快捷鍵生成斜體符號：Command+i）

• 方式1：這是斜體強調
• 方式2：這是斜體強調

3.標題(Headers)

在Markdown語法中，新增標題使用#，就會有標題加粗的效果出現。標題分為六個等級，即1個#代表一級標題，2個#代表二級標題，直到六級標題。

參照圖

Code

# Header 1
## Header 2
### Header 3
#### Header 4
##### Header 5
###### Header 6
or
Header 1
========
Header 2
---------

Header 1

Header 2

Header 3

Header 4

Header 5

Header 6

這可以使用下面的方式來設定一級、二級標題，不過不推薦使用。

Header 1

Header 2

4.可點選URL連結(Links and Email)

在寫自己的部落格中，經常有需求要跳轉到某一個網頁或者郵件。這時需要使用link連結。link連結方式分為內聯(Inline)和外部引用(Reference)

參照圖

Code

// 郵箱
<1126756952@qq.com>
// 網址
<http://www.jianshu.com/u/023338566ca5>
// 帶標題的網址
 [光強的簡書](http://www.jianshu.com/u/023338566ca5)

// Reference
Make [a link][arbitrary_id]
[arbitrary_id]: http://www.jianshu.com/u/023338566ca5

[like this][]
[like this]: http://www.jianshu.com/u/023338566ca5

• Inline

將郵箱地址包裹在<>內部，就形成了可以點選的郵箱地址: <1126756952@qq.com>

<a name="markdown-anchor"></a>

將網頁url包裹在<>內部，就形成了可以點選訪問的網頁地址: <http://www.jianshu.com/u/023338566ca5>

自定義網頁連結的標題[標題](連結):[光強的簡書](http://www.jianshu.com/u/023338566ca5)

• Reference (外部引用的好處可以在整個文章中重複引用網頁地址或者圖片地址而不需要多些拷貝同一個url)

Make a link [a link][arbitrary_id]

like this [like this][]

5.引用圖片

Markdown中引用圖片資源同樣也是分為內聯(Inline)和外部引用(Reference)

參照圖

Code

// 內聯
![Alt Image Text](http://upload-images.jianshu.io/upload_images/6342050-c27b85c48e96bb3b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

// 引用
![Alt Image Text][image-id]
[image-id]: http://ovyjkveav.bkt.clouddn.com/17-10-19/15885901.jpg

• Inline

語法：

[圖片上傳失敗...(image-4df570-1513956965271)]

使用方式：

• Reference

語法

![Alt Image Text][image-id]

[image-id]: http://ovyjkveav.bkt.clouddn.com/17-10-19/15885901.jpg

使用方式：

6.列表

Markdown語法中，列表分為三類：有序列表、無序列表、巢狀列表

參照圖

Code

// 有序列表
1. 列表1
2. 列表2
3. 列表3

// 無序列表
* 列表1
* 列表2

// 巢狀層次縮排列表, 巢狀列表的下級列表需要敲tab鍵進行縮排
* 這是一個巢狀列表
        1. 列表1
        2. 列表2
        3. 列表3

• 有序列表

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

• 無序列表(無序列表中，符號*、+、-效果一樣，個人推薦使用*)

• 列表1

• 列表2

• 列表4
• 列表5

• 列表7
• 列表8

• 縮排層次巢狀列表

  • 這是一個巢狀列表
    1. 列表1
    2. 列表2
    3. 列表3

7.引用(Block Quote)

Markdown語法中，使用>表示引用，引用名人名言或一段文字等。

參照圖

Code

> "三天不學習，趕不上劉少奇。" - 毛澤東 

// 巢狀引用
> 這時一級引用
>> 這時二級引用
>>> 這時三級引用

"三天不學習，趕不上劉少奇。" - 毛澤東

當然引用也可以巢狀使用的

這時一級引用

這時二級引用

這時三級引用

引用也可以和其他的Markdown語法混合使用

這是一級引用

這是二級引用

• 這是三級引用
• 還是三級引用

8.Inline Code

內嵌文字，當我們想讓某一文字內容內嵌在邊框內，我們可以使用一對反引號包裹內容

參照圖

Code

 `Inline code`

// 包含反引號的文字
 ``code has `backticks` ``

使用方式：

不包含反引號的文字

• Inline code

包含反引號的文字。當文字內容中正好包含有反引號，這時需要使用空格隔開：

• code has `backticks`

• ``Code with `backticks` ``

9.Block Code(不推薦使用)

敲4個空格鍵或一個tab鍵，這樣就形成一個程式碼塊區域。

參照圖

Code

    print('This is a code block')
    print('The block must be preceded by a blank line')
    print('Then indent at least 4 spaces or 1 tab')
    print('Nesting does nothing. Your code is displayed Literally')

使用方式：

print('This is a code block')
print('The block must be preceded by a blank line')
print('Then indent at least 4 spaces or 1 tab')
print('Nesting does nothing. Your code is displayed Literally')

10.Code Block

對於程式設計師來說，很多時候我們寫技術部落格都需要貼上自己的程式碼來給讀者講解，這時就用到了程式碼引用語法： ```程式碼塊```。

參照圖

Code

```程式碼```

// 不推薦使用
~~~程式碼~~~

• 方式1

render() {
        const dataArr = this.state.dataSource
        return (
         <ListView
            style={styles.listStyle}
            dataSource={dataArr}
            renderRow={this.renderRow}
            renderSeparator={() => this._renderSeparator()}
        />
    )
  }

• 方式2 (個人不推薦使用)

render() {
        const dataArr = this.state.dataSource
        return (
         <ListView
            style={styles.listStyle}
            dataSource={dataArr}
            renderRow={this.renderRow}
            renderSeparator={() => this._renderSeparator()}
        />
    )
  }

11.分割線(Horizontal Rules)

當我們想對文章的某些內容做上下分割，這時我們可以使用分割線語法：***或---

參照圖

Code

***

---

在MacDown編輯器中，分割線分為粗線和細線。

注意：在簡書中，***或---不顯示粗線,只有細線，一個或者兩個-也不顯示細線

• 粗線

---

or

---

12.表格(Table)

表格的使用肯定我們每一位同學都不陌生，因為我們經常使用Excel表格來展示各種資料包表。很慶幸Markdown同樣也支援表格製作，而且使用方式很簡單。表格由行與列組成，這裡只需要注意表格的內容對齊方式即可。

參照圖

Code

First Header  | Second Header
------------- | -------------
Content Cell  | Content Cell
Content Cell  | Content Cell

沒有設定對齊方式

First Header	Second Header
Content Cell	Content Cell
Content Cell	Content Cell

中間表格對齊

Left Aligned	Center Aligned	Right Aligned
col 3 is	some wordy text	$1600
col 2 is	centered	$12
zebra stripes	are neat	$1

這裡需要注意：表格的左邊和右邊的|可以省略不需要使用，表格左右兩邊加上|主要基於美觀考慮，表格的對齊方式僅僅取決於:

13.跳轉到指定的位置(a標籤-anchor)

在寫文章時，有時候我們有這樣的需求，從文章的某一個位置直接跳轉到指定的另一個位置，這時使用到a標籤的錨點語法。

參照圖

Code

<a name="markdown-anchor"></a>

[Alt Text](#markdown-anchor)

注意: a標籤跳轉到指定位置在簡書中無效

使用方式：

在待跳轉到的位置上新增一行：<a name="markdown-anchor"></a>

[](#name)：通過name就可以找到指定的位置

Markdown高階用法： 跳轉到作者的簡書連結處

14.中劃線(del標籤)

內容中間新增一條橫線:<del>xxx</del>

參照圖

Code

<del>xxx</del>

注意：del標籤在簡書中無效

First Header	Second Header
Content Cell	<del>Content Cell</del>
Content Cell	Content Cell

15.下劃線(u標籤)

內容底部新增一條橫線：<u>xxx</u>

參照圖

Code

<u>xxx</u>

注意：u標籤在簡書中無效

First Header	Second Header
Content Cell	<u>Content Cell</u>
Content Cell	Content Cell

16.標記(mark標籤)

內容顏色高亮處理:<mark>xxx</mark>

參照圖

Code

<mark>xxx</mark>

注意：mark標籤在簡書中無效

First Header	Second Header
Content Cell	<mark>Content Cell</mark>
Content Cell	Content Cell

17.修改文字顏色(font標籤)

設定文字的字型顏色:<font color=Red>xxx</font>

參照圖

Code

<font color=Red>xxx</font>

注意：font標籤在簡書中無效

<font color=Red>修改文字的字型顏色為紅色</font>

注意事項

• 換行符MacDown編輯器和簡書編輯器語法效果上略有不同
• 簡書編輯不支援快捷鍵生成標籤
• 在簡書中，***或---不顯示粗線,只有細線，一個或者兩個-也不顯示細線
• 簡書中使用a標籤跳轉到指定的位置沒有效果
• 簡書中使用del、u、mark、font等標籤都沒有效果
• 簡書中的引用巢狀效果和Macdown預覽效果略有不同

待補充語法

總結

以上內容是作者花了好幾個小時總結出來的常用Markdown語法，介紹了Markdown的十幾種常用的語法知識，並逐一的進行了示例展示。可以說足以滿足讀者們日常中各種使用Markdown編寫文章的需求，當然讀者們發現有語法問題也請及時多多指教。老鐵們 要是感覺文章對您有幫助，請 點贊 關注 666

最後再囉嗦一句：一定要趁熱打鐵！

強烈建議讀者們認真瀏覽作者的這篇文章後，自己使用Markdown寫一篇文章，體會一下Markdown語法的優雅之處！