超實用markdown的語法技巧（表格、文字縮進、文字居中、文字顏色、背景色、代碼高亮、標記）

❝

Markdown是一種可使用普通文本編輯器編寫的標記語言，經過簡單的標記語法，它可使普通文本內容具備必定的格式。

—摘自百度百科

❞

如下記錄了markdown額外的小技巧，markdown基本語法指路：Markdown編輯器經常使用語法使用指南

1.表格

Markdown 製做表格使用 | 來分隔不一樣的單元格，使用 - 來分隔表頭和其餘行。

1.1 語法格式：

|  表頭  | 表頭  |
| ---- | ---- | | 單元格 | 單元格 | | 單元格 | 單元格 | 複製代碼

表頭	表頭
單元格	單元格
單元格	單元格

1.2 對齊方式

• -: 設置內容和標題欄居右對齊。
• :- 設置內容和標題欄居左對齊。
• :-: 設置內容和標題欄居中對齊。

實例以下：

| 左對齊 | 右對齊 | 居中對齊 |
| :-----| ----: | :----: | | 單元格 | 單元格 | 單元格 | | 單元格 | 單元格 | 單元格 | 複製代碼

左對齊	右對齊	居中對齊
單元格	單元格	單元格
單元格	單元格	單元格

1.3 單元格合併

markdown如今還不支持單元格合併，想要合併表格只能迂迴進行：

「方法一：」

1. 從word或excel中複製表格
2. 打開連接： No-Cruft Excel to HTML TableConverter
3. 貼上覆制的文字，而後按convert，就會獲得這個表格的html代碼
4. 將html代碼貼到markdown編輯器

「方法二（嵌入HTML代碼）：」

1. 能夠先用Markdown語法生成未合併單元格的HTML代碼
2. 進行修改, 增長rowspan或colspan屬性來實現合併單元格
3. 再把更改後的HTML代碼粘貼到markdown文件中

2.文字

2.1 文字縮進

「Markdown 語言」不負責實現段首縮進，因此咱們只能手寫，添加空格轉義符，前端HTML空格轉義符總結

`Math.abs(x)`
  返回一個數的絕對值。`在這裏插入代碼片` 複製代碼

效果以下，成功縮進兩字符

Math.abs(x)
  返回一個數的絕對值。

2.2 文字對齊（居中、左對齊、右對齊）

對於標準的markdown文本，是不支持居中對齊的。不過markdown支持html語言，因此咱們採用html語法格式書寫便可。 「居中：」

<center>此行居中</center>
// or <p align="center">align居中</p> 複製代碼

效果：

此行居中

align居中

「左對齊：」

<p align="left">左對齊</p>
複製代碼

左對齊

「右對齊：」

<p align="right">右對齊</p>
複製代碼

右對齊

2.3 文字的字體及顏色

2.3.1 字體更換

一樣咱們也須要遵守其標準的語法格式

<font face="黑體">我是黑體字</font>
<font face="微軟雅黑">我是微軟雅黑</font> <font face="STCAIYUN">我是華文彩雲</font> 複製代碼

效果：

我是黑體字
我是微軟雅黑
我是華文彩雲

2.3.2 大小更換

大小的屬性名爲size，Size規定文本的尺寸大小，取值從 1 到 7，瀏覽器默認值是 3。

<font face="黑體" size=2>我是黑體2號字</font>
<font face="黑體" size=3>我是黑體3號字</font> <font face="黑體" size=7>我是黑體7號字</font> 複製代碼

我是黑體2號字
我是黑體3號字
我是黑體7號字

2.3.3 顏色替換

在html語言中，顏色屬性名爲color，因此能夠表示以下

<font color=red size=72>紅色</font>
複製代碼

效果：

紅色

2.4 文字添加下劃線

使用html標籤：<hr/>

用愛劈開黑暗，像一道曙光，
<hr/> 是非真假沒法判斷，不如堅強。 <hr/> 複製代碼

效果：

用愛劈開黑暗，像一道曙光，

---

是非真假沒法判斷，不如堅強。

---

2. 使用 u標籤

<u>下劃線文本</u>
複製代碼

效果： 下劃線文本

3.顏色

3.1 背景色

<table>
 <tbody>  <tr>  <th>顏色名</th>  <th>十六進制顏色值</th>  <th>顏色</th>  </tr>  <tr>  <td><font color="AliceBlue">AliceBlue</font></td>  <td><font color="AliceBlue">F0F8FF</font></td>  <td bgcolor="AliceBlue">rgb(240, 248, 255)</td>  </tr>  <tr>  <td><font color="AntiqueWhite">AntiqueWhite</font></td>  <td><font color="AntiqueWhite">#FAEBD7</font></td>  <td bgcolor="AntiqueWhite">rgb(250, 235, 215)</td>  </tr>  <tr>  <td><font color="Lavender">Lavender</font></td>  <td><font color="Lavender">#E6E6FA</font></td>  <td bgcolor="Lavender">rgb(230, 230, 250)</td>  </tr>  <tr>  <td><font color="LavenderBlush">LavenderBlush</font></td>  <td><font color="LavenderBlush">#FFF0F5</font></td>  <td bgcolor="LavenderBlush">rgb(255, 240, 245)</td>  </tr>  <tr>  <td><font color=" LightPink"> LightPink</font></td>  <td><font color=" LightPink">#FFB6C1</font></td>  <td bgcolor=" LightPink">rgb(255, 182, 193)</td>  </tr>  <tr>  <td><font color="LightSalmon">LightSalmon</font></td>  <td><font color="LightSalmon">#FFA07A</font></td>  <td bgcolor="LightSalmon">rgb(255, 160, 122)</td>  </tr>  <tr>  <td><font color="MintCream">MintCream</font></td>  <td><font color="MintCream">#F5FFFA</font></td>  <td bgcolor="MintCream">rgb(245, 255, 250)</td>  </tr>  <tr>  <td><font color="MistyRose">MistyRose</font></td>  <td><font color="MistyRose">#FFE4E1</font></td>  <td bgcolor="MistyRose">rgb(255, 228, 225)</td>  </tr>  <tr>  <td><font color="Moccasin">Moccasin</font></td>  <td><font color="Moccasin">#FFE4B5</font></td>  <td bgcolor="Moccasin">rgb(255, 228, 181)</td>  </tr>  <tr>  <td><font color="MintCream">MintCream</font></td>  <td><font color="MintCream">#F5FFFA</font></td>  <td bgcolor="MintCream">rgb(245, 255, 250)</td>  </tr>  <tr>  <td><font color="PaleVioletRed">PaleVioletRed</font></td>  <td><font color="PaleVioletRed">#D87093</font></td>  <td bgcolor="PaleVioletRed">rgb(216, 112, 147)</td>  </tr> </table> 複製代碼

效果：

顏色名	十六進制顏色值	顏色
AliceBlue	F0F8FF	rgb(240, 248, 255)
AntiqueWhite	#FAEBD7	rgb(250, 235, 215)
Lavender	#E6E6FA	rgb(230, 230, 250)
LavenderBlush	#FFF0F5	rgb(255, 240, 245)
LightPink	#FFB6C1	rgb(255, 182, 193)
LightSalmon	#FFA07A	rgb(255, 160, 122)
MintCream	#F5FFFA	rgb(245, 255, 250)
MistyRose	#FFE4E1	rgb(255, 228, 225)
Moccasin	#FFE4B5	rgb(255, 228, 181)
MintCream	#F5FFFA	rgb(245, 255, 250)
PaleVioletRed	#D87093	rgb(216, 112, 147)

4.圖片

4.1 設置圖片大小

markdown默認狀況下圖片是自適應大小的，寬度充滿，相似於max-width: 100%。你必定在插入圖片的時候，遇到圖片太大，影響觀感的問題，或者遇到過咱們須要將圖片只顯示半邊的需求。 Markdown中，圖片大小的設定方式有兩種 不經過[](url)這種格式上傳圖片，用<img>標籤替換。

1. 設置zoom

<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595307552342&di=f5567b6e4490ee2ac89555ceaefeaf67&imgtype=0&src=http%3A%2F%2Ffile.mumayi.com%2Fforum%2F201401%2F16%2F231735cfp4046206r4i705.jpg" style="zoom: 33%;" />
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595307552342&di=f5567b6e4490ee2ac89555ceaefeaf67&imgtype=0&src=http%3A%2F%2Ffile.mumayi.com%2Fforum%2F201401%2F16%2F231735cfp4046206r4i705.jpg" style="zoom: 25%;" /> 複製代碼

這種方式，是經過html標籤引入，經過指定css樣式來實現調整圖片尺寸的的，你還能夠經過內聯樣式.

2. 設置style中的width

<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595307552342&di=f5567b6e4490ee2ac89555ceaefeaf67&imgtype=0&src=http%3A%2F%2Ffile.mumayi.com%2Fforum%2F201401%2F16%2F231735cfp4046206r4i705.jpg" width="200px" />
複製代碼

或者這樣的css樣式

<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595307552342&di=f5567b6e4490ee2ac89555ceaefeaf67&imgtype=0&src=http%3A%2F%2Ffile.mumayi.com%2Fforum%2F201401%2F16%2F231735cfp4046206r4i705.jpg" style="width:200px" />
複製代碼

4.2 多張圖片並排顯示

在markdown中，目前，讓圖片像這樣並排居中的方式主要是兩種：

1. ![](url1)![](url1)![](url1)...多個圖片連接綴加寫，無換行，無空格。

這種方式，彷佛並不可以每一次都生效。但在CSDN是能夠生效的，以下：

<center>
![](https://user-gold-cdn.xitu.io/2020/7/21/17371fdd6dac7a73?w=500&h=417&f=jpeg&s=25550)![](https://user-gold-cdn.xitu.io/2020/7/21/17371fdd6dac7a73?w=500&h=417&f=jpeg&s=25550) </center> 複製代碼

這種方式的很大問題是，圖片是緊密貼在一塊兒的，觀感並不友好，所以不支持使用該方式。

2. 使用html標籤 <figure>

<center>
<figure> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595307533075&di=6f4081a42a6dd1ef3ada1eef2f86f2fb&imgtype=0&src=http%3A%2F%2Fa0.att.hudong.com%2F56%2F12%2F01300000164151121576126282411.jpg" width="30%"/> ... <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595307533075&di=6f4081a42a6dd1ef3ada1eef2f86f2fb&imgtype=0&src=http%3A%2F%2Fa0.att.hudong.com%2F56%2F12%2F01300000164151121576126282411.jpg" width="30%"/> </figure> </center> 複製代碼

注意:
當你在使用第二種方式的時候你必定須要注意的幾點：

1. 在掘金中寫博客時，代碼塊和上方文字要空一行纔會生效，以下：
2. 當你使用 <center>標籤單獨居中一張圖片的時候，開標籤和圖片代碼不要空一行，纔會正常顯示居中（掘金中），不然會居左
3. 當你在應用這種方式不成功的時候，極可能是圖片過大，這時候你須要在圖片的連接中加入圖片參數以設定合適的尺寸。好比我在上面的圖片中添加了 width="30%"，不然一行只能顯示一張圖片。

本文使用 mdnice 排版

若是你以爲這篇文章有用，動動小手給我點個贊吧🍀