超实用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 排版

若是你以为这篇文章有用，动动小手给我点个赞吧🍀