超实用markdown的语法技巧（表格、文字缩进、文字居中、文字颜色、背景色、代码高亮、标记）

最新推荐文章于 2025-04-16 18:41:06 发布
最新推荐文章于 2025-04-16 18:41:06 发布
阅读量3.5w 收藏 116
点赞数 38
分类专栏： 编辑器技巧 工具 文章标签： markdown
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a1056244734/article/details/106856184
版权

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/>

效果：

用爱劈开黑暗，像一道曙光，

是非真假无法判断，不如坚强。
  1. 使用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>

效果：

颜色名十六进制颜色值颜色
AliceBlueF0F8FFrgb(240, 248, 255)
AntiqueWhite#FAEBD7rgb(250, 235, 215)
Lavender#E6E6FArgb(230, 230, 250)
LavenderBlush#FFF0F5rgb(255, 240, 245)
LightPink#FFB6C1rgb(255, 182, 193)
LightSalmon#FFA07Argb(255, 160, 122)
MintCream#F5FFFArgb(245, 255, 250)
MistyRose#FFE4E1rgb(255, 228, 225)
Moccasin#FFE4B5rgb(255, 228, 181)
MintCream#F5FFFArgb(245, 255, 250)
PaleVioletRed#D87093rgb(216, 112, 147)

4.图片

4.1 设置图片大小

markdown默认情况下图片是自适应大小的，宽度充满，类似于max-width: 100%。你一定在插入图片的时候，遇到图片太大，影响观感的问题，或者遇到过我们需要将图片只显示半边的需求。
在这里插入图片描述
高清1
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样式来实现调整图片尺寸的的，你还可以通过内联样式.
  1. 设置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://imgconvert.csdnimg.cn/aHR0cHM6Ly90aW1nc2EuYmFpZHUuY29tL3RpbWc_aW1hZ2UmcXVhbGl0eT04MCZzaXplPWI5OTk5XzEwMDAwJnNlYz0xNTk1MzA3NTA5NjA1JmRpPTdlMjVhY2I3NTVhMzQ5MmY2MmExMWVkOWNhZjE5MmViJmltZ3R5cGU9MCZzcmM9aHR0cCUzQSUyRiUyRmEyLmF0dC5odWRvbmcuY29tJTJGMzYlMkY0OCUyRjE5MzAwMDAxMzU3MjU4MTMzNDEyNDg5MzU0NzE3LmpwZw?x-oss-process=image/format,png)![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly90aW1nc2EuYmFpZHUuY29tL3RpbWc_aW1hZ2UmcXVhbGl0eT04MCZzaXplPWI5OTk5XzEwMDAwJnNlYz0xNTk1MzA3NTA5NjA1JmRpPTdlMjVhY2I3NTVhMzQ5MmY2MmExMWVkOWNhZjE5MmViJmltZ3R5cGU9MCZzcmM9aHR0cCUzQSUyRiUyRmEyLmF0dC5odWRvbmcuY29tJTJGMzYlMkY0OCUyRjE5MzAwMDAxMzU3MjU4MTMzNDEyNDg5MzU0NzE3LmpwZw?x-oss-process=image/format,png)
</center>

这种方式的很大问题是，图片是紧密贴在一起的，观感并不友好，因此不支持使用该方式。
  1. 使用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>标签单独居中一张图片的时候，开标签和图片代码不要空一行，才会正常显示居中（CSDN中），否则会居左
    不差
  3. 当你在应用这种方式不成功的时候，很可能是图片过大，这时候你需要在图片的链接中加入图片参数以设定合适的尺寸。比如我在上面的图片中添加了width="30%"，否则一行只能显示一张图片。

如果你觉得这篇文章有用，动动小手给我点个赞吧🍀

markdown语法图文全面详解（几分钟就能学会）以及idea如何创建markdown文件
念兮为美
08-09 4123
本文使用图文全面详解Markdown语法，让你在几分钟内就能学会，以及idea如何创建markdown文件。Markdown 是一种方便记忆、书写的纯文本标记语言，用户可以使用这些标记符号以最小的输入代价生成极富表现力的文档：譬如您正在阅读的这份文档。它使用简单的符号标记不同的标题，分割不同的段落，粗体 或者 斜体 某些文字等等。.........
Markdown语法及原理从入门到高级（可能是全网最全）
辉叔叔的博客
09-06 2304
文章目录Markdown语法及原理从入门到高级（可能是全网最全）
在 Markdown 中实现颜色字体和高亮
Aqua_chang的博客
04-08 2051
要添加高亮块，你可以将鼠标悬停在某行上，点击“+”号，在弹出的菜单中选择“Callout”，然后输入你的文本。例如，你可以使用⌘/Ctrl + /（Mac/Windows）来打开颜色选择器，然后选择你想要的颜色。，一些markdown编辑器也提供富文本支持，如typora，notion，onenote等，有些编辑器需要下载插件实现富文本支持。此外，你还可以探索一些插件或第三方工具来增强Notion的高亮和颜色更改功能。–值可以是任何合法的 CSS 值（颜色、尺寸、字体等），这里存储了三种颜色定义。
Markdown 入门及语法详细指南 ★
热门推荐
墨蓝天上 (MoLan)
08-01 3万+
Markdown 是一种轻量级标记语言，于 2004 年由约翰·格鲁伯（John Gruber）创建。Markdown 的目标是实现「易读易写」。一份使用 Markdown 格式撰写的文件应该可以直接以纯文本发布，并且看起来不会像是由许多标签或是格式指令所构成。Markdown **通过简单的几个字符键入，就可以快捷的定义文档的样式**。掌握 Markdown，你可以享受到简洁之美、享受效率的提升。
在Markdown中实现复杂表格功能（胎教级）
最新发布
Aqua_chang的博客
04-16 1698
Markdown是博客常用的轻量级格式化语言。本文的主要内容是如何用在线工具或HTML和CSS语言在Markdown编辑器中实现复杂表格功能
Markdown 表格的基本格式
wangqiaowq的博客
03-27 1033
Markdown 表格的基本格式如下：markdown复制| 标题1 | 标题2 | 标题3 || 内容1 | 内容2 | 内容3 || 内容4 | 内容5 | 内容6 |
MarkDown常用语法表
ChinarCSDN的博客
12-11 848
MarkDown常用语法表 Chinar本文提供全流程，中文翻译。 1.Title - 标题 2.Highlighted Background - 高亮背景 3.Font-Famliy - 字体类型 4.END - 结束语 5.Insert Code Snippet - 插入代码段 6.Quote - 引用 7.Hyperlink - 超链接 8.Directory Structure - 目录结构
Markdown语法一览表
weixin_44000192的博客
02-03 1109
参考：https://blog.csdn.net/witnessai1/article/details/52551362 文章目录一、段落层级类1. 目录2. 标题四级标题3. 引用二、字体类三、代码类四、图形列表类1. 插入图片/超链接2. 列表3. 表格五、高级用法5.1 多处链接/图片引用（参考式）5.2 快速链接5.3 HTML代码 一、段落层级类 1. 目录 [TOC]，根据标题级数建立目录并生成对应链接 2. 标题 前面有几个#就是几级标题，注意#后要有空格，如## 二级标题，字体大小依次
Markdown 表格语法
老实人张大傻
09-29 814
Markdown 表格语法 文章目录Markdown 表格语法表格合并表格属性配置参考 表格合并 行合并 <table> <tr> <td rowspan="3" > rowspan 是行合并，3 是合并 3 行</td> </tr> </table> rowspan 是行合并，3 是合并 3 行 1.2 1.3 2.2 2.3 3.2
MarkDown表格常用语法积累
SL_World的博客
08-12 1万+
一、默认表格 MarkDown制作表格使用|来分隔不同的单元格，使用-来分隔表头和其他行。 | 表头 | 表头 | | ---- | ---- | | 单元格 | 单元格 | | 单元格 | 单元格 | 表头 表头 单元格 单元格 单元格 单元格 二、对齐方式 -: 设置内容和标题栏居右对齐。 :- 设置内容和标题栏居左对齐。 :-: 设置内容和标题栏居...
Markdown的表格语法
weixin_44730681的博客
06-06 1008
注意： 表格的语句上一行必须为空行，不然表格不生效。 默认情况下，Markdown 插入的表格，单元格中的内容默认左对齐；表头单元格中的内容会一直居中对齐（不同的实现可能会有不同表现 普通的表格 |标题|标题|标题| |---|---|---| |文本|文本|文本| |文本|文本|文本| 效果如下: 标题 标题 标题 文本 文本 文本 文本 文本 文本 表格内容对齐方式 | 左对齐标题 | 右对齐标题 | 居中对齐标题 | | :------| ------: | :-----
Markdown语法-表格绘制
XZ_ZC的博客
05-04 9796
表格标题栏下方一行，使用"："来进行限制文本为左对齐。表格标题栏下方一行，使用"："来进行限制文本为左对齐。
Markdown--表格语法
Jensen Lee的博客
04-10 6533
1.表格语法： | 标题 | 标题 | 标题 | | ---- | ---- | ---- | | 文本 | 文本 | 文本 | | 文本 | 文本 | 文本 | 示例： 标题 标题 标题 文本 文本 文本 文本 文本 文本 Markdown 单元格对齐方式默认居中。 2.对齐方式设置： 居中，左对齐，右对齐。 示例： 标题 标题 标题 文本 文本 文本 ...
工作效率-十五分钟让你快速学习Markdown语法到精通排版实践备忘
「 虚幻私塾」
07-30 1297
描述Markdown是一种轻量级标记语言于2004年推出，创始人为约翰·格鲁伯（JohnGruber）。它允许人们使用易读易写的纯文本格式编写文档，然后转换成有效的XHTML（或者HTML）文档。Markdown的目标是实现「易读易写」，通过在文档中的某部分加入特殊的字符，用来修饰文档中的文本，github、stackoverflow、技术论坛写博客、写日记、电子书编辑微信公众号文章编辑日常技术文章所以博主将常用的Markdown语法整理处理，方便大家入门学习以及备忘。🐱。...
markdown教程
liao20081228的博客
07-28 1765
1 基本语法 1.1 转义    右斜线\ 表示转义，markdown中字符 [、 \、 *、`、$都需需要加上转义符号才能使用原字符。 1.2 标题   #加空格表示一级标题   ##加空格表示二级标题，   ###加空格表示三级标题   ####加空格表示四级标题   #####加空格表示五级标题   ######加空格表示六级标题，   注意：只有当...
WPS文字高级排版技巧：专业人士教你如何制作漂亮文档
文章从基本使用技巧出发，详细讲解了文档结构设计、字体排版规则和颜色图形的运用。在高级技巧章节中，探讨了模板样式应用、复杂文档排版以及互动多媒体文档的制作。进一步，本文还涉及了WPS文字的高级功能，如批量...
markdown常用语法
xflm的博客
05-18 7049
本文记录了我使用Markdown编写文档过程中，用到的语法和技巧，持续学习中 ··· ···
MarkDown语法学习--表格
flysh05的专栏
01-09 2505
MarkDown语法学习--表格2022.01.09 09:43:39字数 269阅读 0编辑文章 Markdown 制作表格使用 | 来分隔不同的单元格，使用 - 来分隔表头和其他行。基本语法格式如下：|  表头  | 表头  ||  ----  | ----  || 单元格  | 单元格 || 单元格  | 单元格 |测试实例如下：输入：|表格头1|表格头2|表格头3||------|--------------|----
markdown常用基本语法
m0_56208280的博客
01-03 2889
markdown常用的语法介绍
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值