Markdown是一種類似于HTML又兼容HTML標(biāo)簽的標(biāo)記語言。通常用作記錄學(xué)習(xí)筆記和api文檔，它在程序員中的工作中用途廣泛，如果你現(xiàn)在還不會，趕緊學(xué)起來吧，學(xué)完了再去鄙視其他不會寫markdown的程序員(反正我就是這么干的- - )。

經(jīng)常上GitHub的程序員應(yīng)該知道，在GitHub上瀏覽別人的代碼倉庫時，代碼倉庫下面會顯示一些文本內(nèi)容，項目根目錄下有個README.md文件，這個文件主要是作為代碼倉庫的功能介紹和文件結(jié)構(gòu)。

比如spring項目的代碼倉庫介紹如下：

image

Markdown為什么適合做學(xué)習(xí)基本和文檔呢？除了TXT文件之外，我們最常用的文檔格式如微軟的word文檔，但是word文檔要排版，而且在Windows系統(tǒng)之外兼容性不好，其他的如PDF文檔我們喜歡打開瀏覽，但是有幾個愿意自己動手制作PDF文件呢？太復(fù)雜了對吧。HTML文件應(yīng)該是最適合做文檔的，瀏覽起來很方便。但是它同樣跟PDF文件一樣，制作成本太高，我們制作一個HTML文件，需要熟悉CSS樣式，除了樣式需要精心調(diào)整之外，可能還需要適配不同瀏覽器和操作系統(tǒng)。

Markdown相比Word/PDF/HTML文件最方便的地方是它讓我們不用專注于樣式代碼，它會幫我們自動處理文本內(nèi)容的排版問題。

這里我采用微軟公司的vscode來編輯markdown文件，用其他工具的同學(xué)請自動忽略。

vscode安裝markdown插件

在插件搜索框輸入Markdown Preview Enhanced，點擊install，安裝完成重啟vscode。

image

當(dāng)然你也可以按照Markdown All in One，這個插件下載最多可能功能更強大，不過我就不折騰了，你們喜歡可以隨便玩哈。

上面提到markdown類似于HTML標(biāo)簽語言，所以我們先來熟悉一下markdown的標(biāo)簽與語法。

首先，我們新建一個文件保存為md格式，先命名為test.md文件。然后點擊vscode右上角的圖標(biāo)就可以打開md文件預(yù)覽功能。如下圖：

image0.png

接著進(jìn)入正題，開始編輯文件內(nèi)容，慢慢熟悉語法規(guī)則：

1.標(biāo)題

在HTML文件中，如果要顯示不同層次的標(biāo)題可以采用h1, h2,h3...等等標(biāo)簽來實現(xiàn)，在markdown中我們可以采用#來表示標(biāo)題，一級標(biāo)題用#，二級標(biāo)題用##，三級標(biāo)題用###...再往后面大家都那么聰明肯定懂了吧。

標(biāo)題的使用方法

在md文件中編輯內(nèi)容如下:

# Markdown快速入門(文檔標(biāo)題)

## 二級標(biāo)題   

### 三級標(biāo)題

#### 四級標(biāo)題

##### 五級標(biāo)題

效果如下：

Markdown快速入門(文檔標(biāo)題)

二級標(biāo)題

三級標(biāo)題

四級標(biāo)題

五級標(biāo)題

我們上面安裝的插件還提供了很多功能，比如在瀏覽器打開或者保存為圖片PDF文件等等，同學(xué)們可以自行研究。

2.列表

無序列表

用+，-， *來表示列表選項。
注意用空格來間隔，不然沒有效果。

用-來表示

- cpp
- java
- javascript

顯示效果：

• cpp
• java
• javascript

也可以用+來表示：

+ cpp
+ java
+ javascript

• cpp
• java
• javascript

也可以用*來表示：

* cpp
* java
* javascript

• cpp
• java
• javascript

有序列表

用數(shù)字編號開頭，請注意這里必須用.加空格連接。

1. cpp
2. java
3. javascript

效果如下：

1. cpp
2. java
3. javascript

3.文本樣式

顯示粗體文字

**這一段是粗體字**

顯示效果如下：
這一段是粗體字

顯示斜體文字

*這一段是斜體字*

顯示效果如下：
這一段是斜體字

4.引用

我們在寫文檔時可能引用其他人的語句，或者突出一段文本內(nèi)容。

比如在上一節(jié)里我們書寫標(biāo)題時，需要主要到以下要點：

#，##，### 表示不同的標(biāo)題層次，如果需要顯示預(yù)期的效果，我們需要在#后面加上空格，多幾個空格不要緊，至少要一個。

以上的文字樣式叫做引用，在markdown里面用>來表示，當(dāng)然>后面有個空格字符，需要注意。

文件中編輯內(nèi)容如下：

# Markdown快速入門(文檔標(biāo)題)

## 如何引用一段文本內(nèi)容  

魯迅先生有句話大家應(yīng)該都記得：

> 這世上本沒有路，走的人多了也就有了路。

預(yù)覽效果如下：

這世上本沒有路，走的人多了也就有了路。

注意：

>是可以嵌套的，有興趣可以自己嵌套玩。

5.插入代碼塊

假設(shè)大家都是程序員，寫博客干巴巴地講理論肯定沒意思，肯定要貼代碼才行，怎么顯示一段代碼呢？了解HTML的同學(xué)肯定知道在HTML中引用代碼使用<code>這里貼代碼</code>來顯示一段代碼。在markdown中如何貼代碼呢？

采用```引用代碼（不是引號也不是逗號，而是鍵盤上ESC和Table中間的那個鍵）

具體用法是在一段代碼的前面和后面插入```符號，比如想在markdown中顯示以下一段javascript代碼：

console.log('hello world')

支持關(guān)鍵字高亮

以上的效果很簡陋，如果我們希望根據(jù)代碼對各自的關(guān)鍵字進(jìn)行高亮顯示，該如何做呢？

方法就是在```符號之后加上語言類別關(guān)鍵字，如果是js代碼加上javascript, 如果是Python代碼加上python，如果是java代碼加上java，如果是C/C++代碼加上cpp，根據(jù)不同語法顯示不同關(guān)鍵字的效果如下圖：

image6.png

6.插入圖片

有時看技術(shù)博客，都是一坨坨的代碼和文字看著也很累的，這時候我們需要放幾張圖片緩解一下

美女李沁

• 在線加載網(wǎng)絡(luò)圖片
  這種方式能顯示比如http/https站點的圖片，加載圖片的速度依賴于當(dāng)前的網(wǎng)絡(luò)環(huán)境。

加載網(wǎng)絡(luò)圖片的語法如下：

![名稱](網(wǎng)絡(luò)圖片地址)

比如以上的的圖片鏈接地址是https://upload-images.jianshu.io/upload_images/20553365-e4649e27e312cee1.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240，那么我們再markdown中如何顯示這種圖片呢？

image7.png

• 顯示本地圖片
  我們都希望圖片加載的速度能快一點，或者有時候會放一些簡單的圖片放在本地目錄，這時候圖片的加載速度肯定快許多。

加載本地圖片的語法如下：

![名稱](本地圖片路徑)

• 如果你當(dāng)前md文件的同目錄下有個image.png圖片，那么顯示這種圖片應(yīng)該這么寫：

![image.png](image.png)

也可以是

![image.png](./image.png)

./表示當(dāng)前路徑的意思。

• 如果你當(dāng)前md文件的上級目錄叫做images，image.png圖片放在那個目錄，那么應(yīng)該是以下這種寫法:

![image.png](../images/image.png)

7.插入網(wǎng)站鏈接

有時候我們需要在markdown中貼上一些網(wǎng)站的鏈接，這樣會顯得自己很專業(yè)是吧。

比如在文檔中我們就這樣寫：

想了解這方面的更多信息，請自行百度。

大家都知道百度是個網(wǎng)站，希望點擊百度兩個字可以直接打開網(wǎng)站，這時候我們怎么把鏈接地址關(guān)聯(lián)上去呢？

插入網(wǎng)站鏈接的用法如下

[顯示的文字](鏈接地址)

要想實現(xiàn)上面的功能很簡單，編輯md文件內(nèi)容如下：

想了解這方面的更多信息，請自行[百度](www.baidu.com)。

image8.png

簡單吧？

8.顯示表格

markdown中支持用table標(biāo)簽來顯示表格，不過通常情況下我們可以采用更加簡潔的表達(dá)方式來顯示表格。

顯示簡單表格

輸入以下內(nèi)容：

| 第一列 | 第二列| 第三列 |
| ------ | ------ | ------ |
| 第一列1 | 第二列2 | 第三列3 |
|第一列2 | 第二列2 | 第三列3 |

表格對齊方式

在第二行中冒號的位置來表示對齊方式，比如左對齊為:---，右對齊---:，居中對齊則是:---:

• 文本左對齊方式:

| 第一列 | 第二列| 第三列 |
| :------ | :------ | :------ |
| 第一列1 | 第二列2 | 第三列3 |
|第一列2 | 第二列2 | 第三列3 |

• 文本右對齊方式:

| 第一列 | 第二列| 第三列 |
| ------: | ------: | ------: |
| 第一列1 | 第二列2 | 第三列3 |
|第一列2 | 第二列2 | 第三列3 |

• 文本居中方式:

| 第一列 | 第二列| 第三列 |
| :------: | :------: | :------: |
| 第一列1 | 第二列2 | 第三列3 |
|第一列2 | 第二列2 | 第三列3 |

如果需要更加豐富的表格，建議使用table來表示

9.支持HTML標(biāo)簽

前面我們提到，markdown本身支持HTML標(biāo)簽的，如果需要采用復(fù)雜的樣式，可以使用HTML標(biāo)簽來實現(xiàn)，比如復(fù)雜表格用table能實現(xiàn)更加豐富的樣式。

我們看看簡單的HTML標(biāo)簽在markdown中的應(yīng)用。

image9.png