一、前言
什么是 Markdown
Markdown 是一种轻量级标记语言,别名 MD,文件后缀格式(文件名.md),创始人为约翰·格鲁伯(John Gruber)。 它允许使用易读易写的纯文本格式编写文档,然后转换成有效的 XHTML(或者HTML)文档,这也意味着 md 可以兼容 HTML 语法。
Markdown 具有轻量化、易读、易写等特性,并且对图片,图表、数学公式都支持,许多网站都广泛使用 Markdown 来撰写帮助文档或博客系统。
二、插入
2.1 插入标题
语法说明 | 示例 | 渲染结果 |
---|---|---|
1个#号+空格键+标题名 | # 一级标题 | 一级标题 |
2个#号+空格键+标题名 | ## 二级标题 | 二级标题 |
3个#号+空格键+标题名 | ### 三级标题 | 三级标题 |
4个#号+空格键+标题名 | #### 四级标题 | 四级标题 |
5个#号+空格键+标题名 | ##### 五级标题 | 五级标题 |
6个#号+空格键+标题名 | ###### 六级标题 | 六级标题 |
至多6级标题(6个#号)
知识扩展:
在文本下一行用一个或多个等号=
表示一级标题;一个或多个短横线-
表示二级标题
- 示例
一级标题 ======= 二级标题 -------
2.2 插入目录
语法说明 | 在 md 中的任何位置,加入[TOC]字样,即可自动生成目录结构,推荐将其添加在文首,方便进行内容导航。 不同的 md 软件工具,展示的格式可能有所不同,但依然遵循该语法格式 |
示例 | [TOC] |
渲染结果 | ![]() |
2.3 插入脚注
语法说明 | 在需要添加脚注的文字后加上脚注名字[^脚注名字],称为加注。 然后在文本的任意位置(一般在最后)添加脚注,脚注前必须有对应的名字。脚注通常用来标注文章中引入的文献或者注解 |
示例 | Markdown [^1] 可以书写技术博客和个人笔记,可以很方便直接转换成 TEXT 和 HTML [^2]。 [^1]:Markdown Markdown 是一种轻量级标记语言,别名 MD,文件后缀格式(文件名.md) [^2]:HTML HTML 是一种标记语言,全称为超文本标记语言 |
渲染结果 | ![]() |
踩坑:
① 经过本人实测,脚注与脚注之间必须空一行,否则会导致脚注失效
② 即使没有将脚注写在文末,Markdown 会对其进行优化转换,自动归类到文末
2.4 插入图片
语法说明 | 语法格式:![图片名称](图片地址 “鼠标悬停展示内容”),语法中图片名称 的意思是如果图片因为某些原因不能显示,就用定义的图片名称文字来代替图片。 鼠标悬停展示内容 则和链接中的 Title 一样,表示鼠标悬停在图片上时出现的文字。 图片名称 和 鼠标悬停展示内容 都不是必须的,可以省略,为了增强可读性,建议写上 |
示例 | ![图片一](https://bpic.51yuansu.com/pic3/cover/03/08/67/5b3f63adb9957_610.jpg “图片”) |
渲染结果 | ![]() |
2.5 插入分割线
语法说明 | 3个及以上的横杠(- )、下划线(_ )、星号(* ),可包含空格,但必须单独一行 |
示例 | * * * *** **** - - - ----------- |
渲染结果 | ![]() |
2.6 插入链接
2.6.1 页内超链接
语法说明 | 语法格式:[内容](链接地址 "title") ,[] 里写链接文字,() 里写链接地址, () 中的 "" 中可以为链接指定 title 属性,title 属性可加可不加。title 属性的效果是鼠标悬停在链接上会出现指定的 title 文字,链接地址与 title 前有一个空格 |
示例 | 欢迎访问 [百度](https://www.baidu.com "https://www.baidu.com") 主页 [Markdown Emoji 图标列表](https://blog.csdn.net/w10154475/article/details/136254361?spm=1001.2014.3001.5502 "Emoji 图标列表") |
渲染结果 | 欢迎访问 百度 主页 Markdown Emoji 图标列表 |
2.6.2 参考式超链接
参考式超链接一般用在学术论文中,或者某一个链接在文章中需要多处使用,那么参考式链接会非常好用,且方便对链接统一管理。
语法说明 | 语法格式: [链接文字][链接标记] ,在文本任意位置添加[链接标记]:链接地址 |
示例 | 我经常去的几个网站 [Google][1]、[Leanote][2] 和 [百度][3] 此处一定要换行,否则不生效 [1]:http://www.google.com [2]:http://www.leanote.com [3]:https://www.baidu.com |
渲染结果 | 我经常去的几个网站 Google、Leanote 和 百度 |
2.6.3 自动连接
语法说明 | Markdown 支持以比较简短的自动链接形式来处理网址和电子邮件信箱,只需要是用 <> 包起来, Markdown 就会自动将它转成链接,一般网址的链接文字就和链接地址一样 |
示例 | <http://example.com> <https://www.baidu.com> <address@example.com> |
渲染结果 | http://example.com https://www.baidu.com address@example.com |
2.6.4 图片式超链接
语法说明 | 语法格式:[![图片名称](图片地址 “鼠标悬浮展示内容”)](连接地址) |
示例 | [![百度](https://i-blog.csdnimg.cn/blog_migrate/ae5018d9b21ee2e8714b08d48094db2a.png#pic_center “https://www.baidu.com”)](https://www.baidu.com) |
渲染结果 | ![]() |
2.7 插入表格
Markdown 支持两种语法格式的表格形式,一个是 Markdown 语法
;二是 HTML 语法
。Markdown 语法相对比较简单,能够实现一些简单场景下的表格样式,HTML 语法可以实现较为负责场景的表格样式。
2.7.1 Markdown 表格
语法说明 | Markdown 表格语法相对简单,支持任意行列数表格的绘制,第一行固定为表头,文字加粗,底色为浅蓝色。其他行文字不加粗,底色白灰相间。行高和列宽自动分布,不支持调整。支持文本居左、居中、居右的调整,每一列的文本位置会保持一致。字号比正文小一号,不支持调整 ① 表格中文本换行需要使用 <br> 标签进行换行② 单元格之间以 | 相隔③ 表头与表格内容间固定有一行 - ,- 需要一个及以上。- 左边加 : 或者不加 : 代表居左;- 右边加 : 代表居右;- 两边都加代表居中④ 可以不添加表头,但是必须要有 - 固定行 |
示例 | 1. 样式一 |居中|居右|居左| | :-: | --: | :------ | | 居中使用:-: | 右对齐使用-: | 左对齐使用:-| |aa|aaaa|aaaa| |bb|bbbbbbb|bbbbbbb| 2. 样式二 居中|居右|居左 :-: | --: | :------ 居中使用:-: | 右对齐使用-: | 左对齐使用:- aa|aaaa|aaaa bb|bbbbbbb|bbbbbbb 3. 样式三 <center> 此处需要换一行,否则不生效 |居中|居右|居左| | :-: | --: | :------ | | 居中使用:-: | 右对齐使用-: | 左对齐使用:- | |aa|aaaa|aaaa| |bb|bbbbbbb|bbbbbbb| </center> |
渲染结果 | ![]() |
2.7.2 HTML 表格
2.7.2.1 HTML 表格语法
代码 | 含义 | 备注 |
---|---|---|
<table> | 表格开始 | |
</table> | 表格结束 | |
<capital> | 标题开始 | |
</capital> | 标题结束 | |
<tr> | 表格行 (table row) 开始 | |
</tr> | 表格行 (table row) 结束 | |
<td> | 单元格 (table datagrid) 开始 | |
</td> | 单元格 (table datagrid) 结束 | |
<th> | 表头 (table header) 开始 | 替代 <td> ,改变单元格为表头格式 |
</th> | 表头 (table header) 结束 | 替代 </td> ,改变单元格为表头格式 |
2.7.2.2 HTML 表格格式约束
表格约束语句位于各个开始标签内,>
后括号之前,多个约束语句以空格相隔。
代码 | 含义 | 备注 |
---|---|---|
align = "left" | 居左 | |
align = "center" | 居中 | |
align = "right" | 居右 | |
bgcolor = "white" bgcolor = #FFFFFF | 背景颜色 | “white” 可替换为 “black”、“blue” 等其他颜色名称 #FFFFFF 可替换为其他 #+6位16进制数 格式的颜色代码对表头无效 |
width = "100px" width = "10%" | 列宽 | “100px” 可替换为其他数字 “10%” 可替换为其他百分数 同一列多个单元格有此命令时,优先服从大数值 |
colspan = x | 水平合并单元格 | x为数字,代表这个格子占x列 |
rowspan = y | 竖直合并单元格 | y为数字,代表这个格子占y行 |
2.7.2.3 HTML 文本格式语句
代码 | 含义 | 备注 |
---|---|---|
<b> | 开始加粗 | |
</b> | 停止加粗 | 如单元格后续没有不加粗的内容可省略 |
<i> | 开始斜体 | |
</i> | 停止斜体 | 如单元格后续没有不斜体的内容可省略 |
<mark> | 开始高亮 | |
</mark> | 停止高亮 | 如单元格后续没有不高亮的内容可省略 |
<br> | 换行 | |
<img src = "图片地址"> | 插入图片 | ![]() |
2.7.2.4 HTML 表格示例
<table>
<capital>在 Markdown 中绘制复杂表格:</capital>
<tr>
<th>横向普通表头</th>
<th align="right"><i>右对齐斜体表头</i></th>
<th colspan=2>横向合并2个单元格表头</th>
<td width="20px">限制列宽为80px单元格超出会自动换行</td>
</tr>
<tr>
<th>纵向普通表头</th>
<td bgcolor="red">红色单元格</td>
<td><mark>高亮文字</mark>非高亮文字</td>
<td><b>加粗文字</b><i>斜体文字</i></td>
<td width="10px">10px小于20px,优先20px的列宽</td>
</tr>
<tr>
<td>表头不一定是一整行或者一整列的</td>
<td rowspan=2>纵向合并单元格<br>下一行少一个单元格<br>字太多自动换行</td>
<td rowspan=2 colspan=2>横向纵向合并2个单元格</td>
<td rowspan=2 width="30%">纵向合并2个单元格,列宽像素与百分比可混合使用,优先大数值</td>
</tr>
<tr>
<td align="left"> 文字左对齐 </td>
</tr>
</table>
2.7.2.5 HTML 表格渲染效果
在 Markdown 中绘制复杂表格:横向普通表头 | 右对齐斜体表头 | 横向合并2个单元格表头 | 限制列宽为80px单元格超出会自动换行 | |
---|---|---|---|---|
纵向普通表头 | 红色单元格 | 高亮文字非高亮文字 | 加粗文字斜体文字 | 10px小于20px,优先20px的列宽 |
表头不一定是一整行或者一整列的 | 纵向合并单元格 下一行少一个单元格 字太多自动换行 | 横向纵向合并2个单元格 | 纵向合并2个单元格,列宽像素与百分比可混合使用,优先大数值 | |
文字左对齐 |
2.8 插入块语法
插入块主要有两种常用方式,一种是行内块,使用单个 ` 符号(在ESC键下方)包裹代码;另一种是多行块,使用 ``` 符号(在ESC键下方)包裹代码,如果块中包含的是程序代码,还能添加语言类型,在 ``` 符号后加上语言类型,js、java、HTML、css、C、C++ 等程序语言均可使用,不区分字母大小写。
行内块 | 多行块 | |
---|---|---|
语法说明 | 语法格式: `块内容` (适合在文本内容中掺杂使用) | 语法格式: ``` 块内容 ``` |
示例 | Java 语言里的函数 `System.out.println()` 用法 | 1. 文本块 ``` public String[] selectImports (AnnotationMetadata annotationMetadata) { if (!this.isEnabled(annotationMetadata)) { return NO_IMPORTS; } else { AutoConfigurationEntry autoConfigurationEntry = this.getAutoConfigurationEntry(annotationMetadata); return StringUtils.toStringArray(autoConfigurationEntry .getConfigurations()); } } ``` 2. Java 程序块 ```java public String[] selectImports (AnnotationMetadata annotationMetadata) { if (!this.isEnabled(annotationMetadata)) { return NO_IMPORTS; } else { AutoConfigurationEntry autoConfigurationEntry = this.getAutoConfigurationEntry(annotationMetadata); return StringUtils.toStringArray(autoConfigurationEntry .getConfigurations()); } } ``` 3. JavaScript 程序块 ```js var foo = function (bar) { return bar++; }; console.log(foo(5)); ``` |
渲染结果 | Java 语言里的函数 System.out.println() 用法 | ![]() |
2.9 插入注释
插入注释用三种方式,一是 div 标签;二是 HTML 注释;三是不常用的 hack 式。
div 标签式 | HTML 式 | |
---|---|---|
语法说明 | 语法格式:<div style='display: none'>注释内容</div> | 语法格式:<!--注释内容--> 快捷键 Ctrl + / |
示例 | <div style='display: none'> 我是注释,不会在浏览器中显示。 </div> | <!--我是注释,不会在浏览器中显示。--> |
渲染结果 | 文档中注释不可见 | 文档中注释不可见 |
hack 式知识扩展:
[//]: # "我是注释,不会在浏览器中显示。" [^_^]: # (我是注释,不会在浏览器中显示。) [//]: <> "我是注释,不会在浏览器中显示。" [comment]: <> "我是注释,不会在浏览器中显示。"
2.10 插入 Emoji
经典写法 | 简写 | |
---|---|---|
示例 | :wink: :cry: :laughing: :yum: | ;) :) 8-) :-) :-( :( :* |
渲染结果 | 😉 😢 😆 😋 | 😉 😃 😎 😃 😦 😦 😗 |
常见 Emoji 列表 | Markdown Emoji 图标列表 |
三、格式
3.1 换行
语法说明 | 语法格式:行结尾加2个空格 或行结尾加1个\ 再回车 |
示例 | 1. 空格式 这是一句话不过我要在这里 换行且 再次换行 2. \式 这是一句话不过我要在这里\ 换行且\ 再次换行 |
渲染结果 | ![]() |
知识扩展:
表格中不支持空格和\换行,可以使用<br>
标签换行
3.2 段落
语法说明 | 语法格式:段落1 + 2个回车符 + 段落2,要形成段落,本质是在每段文本后按两次回车,如果只按一次回车,即使编辑时不在同一段落,展示时也会渲染到同一段落中 |
示例 | 1. 第一种,换行不加回车符,两段话会展示在同一个段落中 > 这是第一个段落。 这是第二个段落。 2. 第二种,换行加回车符,两段话不会展示在统一个段落中 > 这是第一个段落。 > > 这是第二个段落。 |
渲染结果 | ![]() |
3.3 对齐方式
语法说明 | 语法格式: 标签实现 <center> ,<p align="center"> ,<p align="left"> ,<p align="right"> |
示例 | > <center>行中心对齐</center> > <p align="center">行中心对齐</p> > <p align="left">行左对齐</p> > <p align="right">行右对齐</p> |
渲染结果 | ![]() |
3.4 引用
语法说明 | 语法格式:大于号 > + 空格,引用可以嵌套使用 |
示例 | > 引用也可以连用 > > > 可以添加额外的大于号制造更深的引用 |
渲染结果 | ![]() |
3.5 列表
3.5.1 无序列表
语法说明 | 语法格式:* 或 + 或 - 符号 + 空格,形成无序列表,如果为嵌套使用,则每行会展示不同的序列符号。 第一层,展示为实心圆 第二层,展示为空心圆 第三层,展示为实心正方形 |
示例 | * 无序列表项 + 无序列表项 * 列表中的列表项 * 更多的列表项1 + 更多的列表项2 - 更多的列表项3 - 列表中的长列表项,这个列表项很长。 而且由很多个段落构成。 - 无序列表项 |
渲染结果 | ![]() |
3.5.2 有序列表
语法说明 | 语法格式:数字开头 + 英文点 + 空格,文本内容后回车形成累加序列号 |
示例 | 样式一 1. 有序列表第1项 1. 有序列表第2项 1. 有序列表第3项 样式二 2. 有序列表第1项 1. 有序列表第2项 1. 有序列表第3项 |
渲染结果 | ![]() |
3.5.3 任务列表
语法说明 | 语法格式: ① 未勾选:横杠( - ) + [ ] + 空格 + 任务名称 ② 已勾选:横杠( - ) + [x] + 空格 + 任务名称 |
示例 | - [ ] 任务一 未做任务 - [x] 任务二 已做任务 |
渲染结果 | ![]() |
3.6 转载
3.6.1 转载
语法说明 | 语法格式:<a href="转载文章的网址">转载文章的名字</a> |
示例 | 转载自 <a href="https://blog.csdn.net/w10154475/article/details/113820769?spm=1001.2014.3001.5502">Java修炼之凡界篇 筑基期 第01卷 入门 第01话 Java诞生</a> |
渲染结果 | 转载自 Java修炼之凡界篇 筑基期 第01卷 入门 第01话 Java诞生 |
3.6.2 含 ↩ 转载
语法说明 | 语法格式:<a href="转载文章的网址">转载文章的名字</a><a href="#fnref:wx" rel="nofollow" title="Return to article" class="reversefootnote">↩</a> |
示例 | 转载自 <a href="https://blog.csdn.net/w10154475/article/details/113820769?spm=1001.2014.3001.5502">Java修炼之凡界篇 筑基期 第01卷 入门 第01话 Java诞生</a><a href="#fnref:wx" rel="nofollow" title="Return to article" class="reversefootnote">↩</a> |
渲染结果 | 转载自 Java修炼之凡界篇 筑基期 第01卷 入门 第01话 Java诞生↩ |
3.6.3 含序列号和横线转载
示例 | <div class="footnotes"> 横线<hr> <ol> <li id="fn:wx">文章作者1(任意想输入的汉字), <a href="转载文章的网址">转载文章的名称</a><a href="#fnref:wx" rel="nofollow" title="Return to article" class="reversefootnote">↩</a> </li> <li id="fn:kz">文章作者2, <a href="文章的网址">文章名称</a><a href="#fnref:kz" rel="nofollow" title="Return to article" class="reversefootnote">↩</a> </li> <li id="fn:wx2">文章作者3, <a href="http://blog.csdn.net/testcs_dn/article/details/45766819">文章名称</a><a href="#fnref:wx2" rel="nofollow" title="Return to article" class="reversefootnote">↩</a> </li> </ol> </div> |
渲染结果 |
四、文字
示例 | <font face="黑体">我是黑体字</font> <font face="微软雅黑">我是微软雅黑</font> <font face="STCAIYUN">我是华文彩云</font> <font color=#0099ff size=12 face="黑体">我是蓝色大黑体</font> <font color=gray size=5>我是灰色</font> <font color=#00ffff size=3>我也不知道什么颜色</font> |
渲染结果 | 我是黑体字 我是微软雅黑 我是华文彩云 我是蓝色大黑体 我是灰色 我也不知道什么颜色 |
4.1 字体
示例 | <font face="黑体">黑体字</font> <font face="微软雅黑">微软雅黑</font> <font face="华文彩云">华文彩云</font> <font face="宋体">宋体</font> <font face="楷体">楷体</font> <font face="等线">等线</font> |
渲染结果 | 黑体字 微软雅黑 华文彩云 宋体 楷体 等线 |
4.2 类型
示例 | 渲染结果 |
---|---|
*斜体* _斜体_ **粗体** ***加粗斜体*** ~~删除线~~ ++下划线++ ==背景高亮== | 斜体 斜体 粗体 加粗斜体 下划线 背景高亮 |
4.3 大小
<font> 标签 | <h> 标签 | |
---|---|---|
示例 | <font size=1>1尺寸</font> <font size=2>2尺寸</font> <font size=3>3尺寸</font> <font size=4>4尺寸</font> <font size=5>5尺寸</font> <font size=6>6尺寸</font> <font size=7>7尺寸</font> | <h1>想要放大的字体1</h1> <h2>想要放大的字体2</h2> <h3>想要放大的字体3</h3> <h4>想要放大的字体4</h4> <h5>想要放大的字体5</h5> |
渲染结果 | 1尺寸 2尺寸 3尺寸 4尺寸 5尺寸 6尺寸 7尺寸 | 想要放大的字体1想要放大的字体2想要放大的字体3想要放大的字体4想要放大的字体5 |
知识扩展:
<h>
标签常用于编辑标题
4.4 颜色
4.4.1 颜色语法
语法说明 | 语法格式:<font color=颜色英文单词或颜色号数字>文本内容</font> |
示例 | <font color=blue>蓝色</font> <font color=#008000>绿色</font> <font color=Red>红色</font> |
渲染结果 | 蓝色 绿色 红色 |
4.4.2 常用颜色
颜色示例 | 渲染结果 |
---|---|
<font color=NavajoWhite>颜色颜色颜色</font> | 颜色颜色颜色 |
<font color=Feldspar>颜色颜色颜色</font> | 颜色颜色颜色 |
<font color=SandyBrown>颜色颜色颜色</font> | 颜色颜色颜色 |
<font color=LightSalmon>颜色颜色颜色</font> | 颜色颜色颜色 |
<font color=Salmon>颜色颜色颜色</font> | 颜色颜色颜色 |
<font color=LightCoral>颜色颜色颜色</font> | 颜色颜色颜色 |
<font color=Pink>颜色颜色颜色</font> | 颜色颜色颜色 |
<font color=PaleVioletRed>颜色颜色颜色</font> | 颜色颜色颜色 |
<font color=HotPink>颜色颜色颜色</font> | 颜色颜色颜色 |
<font color=silver>颜色颜色颜色</font> | 颜色颜色颜色 |
<font color=LightSlateGray>颜色颜色颜色</font> | 颜色颜色颜色 |
<font color=SlateGray>颜色颜色颜色</font> | 颜色颜色颜色 |
<font color=grey>颜色颜色颜色</font> | 颜色颜色颜色 |
<font color=RosyBrown>颜色颜色颜色</font> | 颜色颜色颜色 |
<font color=maroon>颜色颜色颜色</font> | 颜色颜色颜色 |
<font color=DarkSeaGreen>颜色颜色颜色</font> | 颜色颜色颜色 |
<font color=LightSeaGreen>颜色颜色颜色</font> | 颜色颜色颜色 |
<font color=SeaGreen>颜色颜色颜色</font> | 颜色颜色颜色 |
<font color=PowderBlue>颜色颜色颜色</font> | 颜色颜色颜色 |
<font color=LightSteelBlue>颜色颜色颜色</font> | 颜色颜色颜色 |
<font color=CadetBlue>颜色颜色颜色</font> | 颜色颜色颜色 |
<font color=navy>颜色颜色颜色</font> | 颜色颜色颜色 |
4.5 底色
语法说明 | 借助 table , tr , td 等表格标签的 bgcolor 属性来实现背景色 ,将一整行看作一个表格,更改整个格子的背景色 | |
示例 | <table> <tr> <td bgcolor=HotPink>这里的背景色是:HotPink(粉色)</td> </tr> </table> | |
渲染结果 |
|
五、字符
5.1 转义字符
通常使用\
反斜杠进行字符转义。
在 Markdwon 中有很多需要进行转义的特殊字符,常用的须转义的字符如表所示:
反斜杠 | \ | 反引号 | ` | 星号 | * | 下划线 | _ |
大括号 | {} | 中括号 | [] | 小括号 | () | 井号 | # |
加号 | + | 减号 | - | 英文句号 | . | 感叹号 | ! |
5.2 特殊字符
特殊字符 | 描述 | 字符的代码 |
---|---|---|
space | 空格符 | |
< | 小于号 | < |
> | 大于号 | > |
& | 和号 | & |
¥ | 人民币 | ¥ |
© | 版权 | © |
® | 注册商标 | ® |
°C | 摄氏度 | °C |
± | 正负号 | ± |
× | 乘号 | × |
÷ | 除号 | ÷ |
² | 平方(上标²) | ² |
³ | 立方(上标³) | ³ |
5.3 空格
名称 | 代码 | 长度 | 例子 |
---|---|---|---|
窄空格 |   | 半个字母的宽度 | 12 34 效果:12 34 |
半角空格 |   | 一个字母的宽度 | 12 34 效果:12 34 |
不换行空格(常用) | | 常规空格的宽度 | 12 34 效果:12 34 |
全角空格 |   | 一个字的宽度 | 12 34 效果:12 34 |