markdown_notes
前言
此篇作于2022/9/7，在学习github_kevin 的基础上，决定自己手敲一遍，进一步熟悉和使用markdown做笔记。
===
Author:yishuangRenew
Email:1521961449@qq.com
===
目录
- 前言
- 目录
- markdown简介
- 兼容HTML
- 分割线
- 代码显示及高亮
- 标题
- 这是H1标题显示效果
- 这是 H1
- 这是 H1 ######(####注意区分有括号，无括号)
- 这是 H6 - 文本
- 特殊字符转义
- 图片
- 链接
- 列表
- 表格
- 引用
- GitHub 风格的 markdown 语法
- 参考文章
markdown简介
md就是markdown缩写，GitHub 上每个项目要求提供Markdown格式README.md文件，作为项目首页的说明文件。
宗旨
Markdown是一种轻量级标记语言，创始人是John Gruber。
Markdown是为了更加简单方便的书写HTML，使我们更加专注于内容写作本身。
兼容HTML
在markdown文本里可以直接加HTML标签，只要不是markdown本身的标签，都可以直接在文档里使用。
块级元素
块级元素标签，可以直接在markdown中使用，可被直接转译成相应的内容。
example如下，在markdown文档里加一段HTML代码
1 | <ul> |
浏览器中显示效果：
- 这是HTML标签语法
- # 大标题
- ## 二级标题
- ### 三级标题
- #### 四级标题
- ##### 五级标题
- ###### 六级标题
要注意的是，HTML模块化标签之间的markdown格式的语法不会被处理，仍然会执行，例如上例中的markdown的标题语法标签 # 未被译成标题文本。
//????不会被执行
行内元素
HTML 的行内标签如<span>,<cite>,<del>可以再markdown的段落、列表或者是标题中随意使用。根据个人习惯，甚至可以不用markdown格式，而直接采用HTML标签来格式化。举例说明：if you like HTML’s 或 标签，可以直接使用这些标签，而不用markdown提供的连接或是图像标签语法。
和处在HTML块状元素标签标签间不同，markdown语法在HTML行内元素标签间是有效的。
理解示例代码：
1 | 我是<del>**删除线**</del>,我在行内，且我不需要进行转义。也不需要像块元素那样需要在标签前后加空行。（如果前有块级标签，没空行的话，加一个行内标签会失去效果）。 |
示例效果：
我是删除线，我在行内，且我不需要进行转义。也不需要像块元素那样需要在标签前后加空行。
此示例中HTML标签’‘在行内直接起作业，而且markdown语法中的强调语法也是有效的。
示例2：
大标题
大标题大标题
分割线
***、—、___可以显示横线效果
你可以在一行中用三个以上的星号、-号、底线来建立一个分割线，行内不能有其他东西，也可以在星号中加入空格，相当于
，
如下做法均可：
示例语法：
1 | *** |
分割线示例
示例效果：
代码显示及高亮
行内代码显示及高亮
文本段中如果要输出标签，不能直接写标签，markdown会转译并为标签加上标签<pre>``<code>，且将标签之后的文本解释进代码区块中，导致文本段显示排版出错。
要在文本段中正常显示标签，需要用一对``(反引号)将标签包裹起来，是Tab上面的反引号，1左边那个，而不是单引号(‘’)，这种方法不仅可以在文本段中正常显示标签，而且标签是高亮显示，为常用显示方法。markdown
也可以通过将标签的左右尖括号用特殊字符转义来显示标签。
代码显示及高亮
传统markdown使用4个空格缩进将文本转换为代码块，所以如果是程序和标签相关的写作，你不希望你写的一段代码以列表或者段落的方式去排版，而是想要直接以源代码的方式显示，只要简简单单地缩4个空格或是一个制表符就可以，一个代码块会一直持续到没有缩进的哪一行（或是文件结果）。
这是普通段落，要让以下段落以代码形式显示出来，
- 该代码块开始与结束的上下都需要有一个空行;
- 而且每行代码都需缩进4个空格或者一个制表符：
- 这里显示HTML代码
- # 大标题
- ## 二级标题
- ### 三级标题
- #### 四级标题
- ##### 五级标题
- ###### 六级标题
这里没有继续缩进，表示结束。上一行是一个空行。respect！
标题
markdown 支持两种标题的语法，类 Setext 和类 atx 形式。
类-Setext-形式
类 Setext 形式是用底线的形式，利用 =（最高阶标题）和-（第二阶标题）
示例代码：
1 | 这是H1标题显示效果 |
示例效果：
这是H1标题显示效果
这是H2标题显示效果
任何输出的=和-都可以有效果，这种类型的表现形式，也只有这两级标题显示。
类 Atx 形式
类 Atx 形式则是在行首插入 1 到 6 个 # ，对应到标题 1 到 6 阶，你可以选择性地「闭合」类 atx 样式的标题，这纯粹只是美观用的，若是觉得这样看起来比较舒适，你就可以在行尾加上 #，而行尾的 # 数量也不用和开头一样（行首的井字符数量决定标题的阶数）
示例代码：
1 | ``` |
1 | 示例效果： |
我是单行文本
1 |
|
我是多行文本，我写在三个反引号的markdown语法中，属于源码输出，目的是让这段话高亮显示，
在这里我可以直接回车换行，源码是什么排版，显示出来就是什么排版
我换行了，文字太多了，我任性直接换行
1 | ## 文本换行 |
普通自然行行首敲两个空格无占位缩进效果
该行行首添加了4个键盘空格缩进
该行行首添加了4个半角空格&nsp;
该行行首添加了4个全角空格 
1 |
|
这是一段普通文本，文本里的markdown,<code>,学习,<div>,<p>这些都高亮了。
1 |
|
| 示例1 | 示例2 |
|---|---|
| 斜体 | 斜体 |
| 粗体 | 粗体 |
| 粗斜体 | 粗斜体 |
1 |
|
_ 斜体 _
** 粗体 ** __ 粗体 __
~~ 删除线 ~~
*** ~~ 粗斜体删除线 ~~ ***
1 | 示例效果： |
*这里的星号不起任何作用，只是普通符号*
1 | 示例效果： |
\ 反斜线
` 反引号
- 星号
_ 底线
{} 花括号
[] 方括号
() 括弧
井字号
- 加号
- 减号
. 英文句点
! 惊叹号© ， © ， AT&T ， AT&T ， 4 < 5 ， 4 < 5 ， < ， & ， >1
2
3
4
5
***
# 特殊字符转义
语法：1
2
3
4
5
6
7
8
9
10
11
12
13
14效果：
© ， © ， AT&T ， AT&T ， 4 < 5 ， 4 < 5 ， < ， & ， >
当`<`，`>`用于标签的起始和结束标签且在文本段内显示时，在不让其高亮显示的情况下，需要对这两个符号进行转义`<`，`>`。
***
# 图片
Markdown 插入图片有两种格式：行内式和参考式。
## 行内式
基本语法：![alt][ID]1
2
3
4
5
6
7
8
9
10
11行内式详细解释如下：
* 一个惊叹号 `!`<br />
* 接着一个方括号，alt表示图片显示失败时的替换文本,对应html中的alt属性（可省略）<br />
* 接着一个小括号，url放图片的存放地址，title表示鼠标悬停在图片时的显示文本，对应html中的title属性，title需要加双引号或者单引号（title可省略）
示例：
;
;
## 参考式
基本语法：
[ID]:URL title![我的github][github]1
2
3
4
5
6* 参考式与行内式不同之处就是第一个方括号之后跟着的又是一个方括号、以及此语法分为两句，第一句写在用到此句的地方，而第二句通常与其他使用参考式的第二句集中在一起放在文章末尾。
* ID是图片参考的名称，用来定义链接地址及title，使用图片参考可以达到复用的目的，一般把全文所有的URL链接通过ID匹配，统一放在文章末尾，哪里需要用这个链接，直接通过`![alt][ID]`调用这个链接的ID即可。
* 此语法第二行第一个中括号与第一行第二个中括号是相匹配的，两个中括号内的ID必须一致，才能调用该ID语法冒号后的链接地址，不过这里的ID不区分大小写，而且支持中文、字母、数字、空格等，取名ID但并不是本文件唯一，是可以复用的。
* 冒号后的写法与行内式小括号内写法一样，前者URL，URL可用尖括号包围起来，如`<https://github.com>`后者为title，需加双引号或者单引号以及小括号，title可以放在第二行。
ID参考如下：
[github]:https://github.com/clown-16/ “我的github，欢迎关注”行内式：1
2
3## 图片地址
### 本地图片/同主机资源
图片的url地址，如果引用本图片或是项目本身的资源，直接使用相对路径就可了。
参考式：
![我的新浪微博][sina]
[sina]:images/sina.png “我的新浪微博”
1 | 行内式： |
行内式：
参考式：
![百度][baidu]
[baidu]:https://www.baidu.com/img/bd_logo1.png “百度一下”
1 | 行内式： |
https://github.com/kaivin/markdown/raw/master/images/github.png
行内式：
参考式：
![我的github][github]
[github]:https://github.com/kaivin/markdown/raw/master/images/github.png “我的github”
1 | 行内式： |
行内式：
[content]( URL title)
参考式：
[content][ID]
[ID]:URL title
1 | * **超链接语法结构对比[图片地址](#图片地址)的语法结构，可以发现，不同之处，只在于两种语法的第一个中括号及图片地址多了一个`！`。** |
行内式：
[text]( URL title)
参考式：
[text][ID]
[ID]:URL title
1 | 示例代码： |
行内式：
我的github
参考式：
[我的github][githubs]
[githubs]:https://github.com/kaivin/ “github”
1 | 显示效果： |
行内式：
[img]( URL title)
参考式：
[img][ID]
[ID]:URL title
1 | 前文说过，超链接第一个中括号只起显示内容的作用，文本链接，可以直接输入要显示内容，而图片链接这里要显示图片，就需要将图片地址写在这里，所以，进一步语法可分为四类： |
行内链接行内图片地址式：
[]( URL title)
行内链接 图片参考式
[![alt][ID]]( URL title)
[ID]:URL title
参考链接 图片行内式：
[][ID]
[ID]:URL title
参考式图片链接
[![alt][ID_IMG]][ID]
[ID_IMG]:URL title
[ID]:URL title
1 | 示例代码： |
行内链接行内图片地址式：
行内链接 图片参考式：
![百度一下][baidu]
参考链接 图片行内式：
[][githubs]
[githubs]:https://github.com/kaivin/ “我的github”
参考式图片链接：
[![我的知乎][zhihu_logo]][zhihu]
[zhihu_logo]:https://github.com/kaivin/markdown/raw/master/images/zhihu.png “我的知乎”
[zhihu]:https://www.zhihu.com/people/kay_vin “我的知乎”
删除图片的alt属性：
[![zhihu_logo]][zhihu]
1 | 行内链接行内图片地址式： |
[text][]
[text]:URL title
1 | 你可以像参考式一样把'[text]:URL title'这句放在你的文档的任何地方，可以是一个段落后方本段落的所有链接，也可以全部放在文档最后面，就像是注解一样。 |
参考式：
我这里分享[我的github][githubs]以及[新浪微博][sinas]和[知乎][zhihu]链接给大家~
[sinas]:http://weibo.com/kayvon “新浪微博”
隐式超链：
我这里分享[我的github][]以及[新浪微博][]和[知乎][]链接给大家~
[我的github]:https://github.com/kaivin/ “我的github”
[新浪微博]:http://weibo.com/kayvon “新浪微博”
[知乎]:https://www.zhihu.com/people/kay_vin “我的知乎”
1 | 示例效果： |
1 | 示例语法： |
1 | 示例效果：[回到顶部](#前言) |
列表项1
列表项2
列表项3，三项列表之间都有一行空行
1
如在浏览器里 查看源代码会发现被转化为：
列表项1
列表项2
列表项3，三项列表之间都有一行空行
1
2
3
4
5
6
7
8
9效果显示：
* 列表项1
* 列表项2
* 列表项3，三项列表之间都有一行空行
## 无序列表
* 无序列表使用星号、加号或是减号作为列表标记,后跟一个空格：星号标记1
星号标记2
星号标记3
- 加号标记1
- 加号标记2
- 加号标记3
- 减号标记1
- 减号标记2
- 减号标记3
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20示例效果：
* 星号标记1
* 星号标记2
* 星号标记3
***
+ 加号标记1
+ 加号标记2
+ 加号标记3
***
- 减号标记1
- 减号标记2
- 减号标记3
### 多级无序列表
多级无序列表每一个子级都要比上一级多按一个tab来分级。如下：
- 一级无序列表会转义成实心圆点
- 二级无序列表会被转义成空心圆点
- 三级无序列表会被转义成实心正方形
- 四级无序列表效果就不会再变化，依旧是实心正方形
- 三级无序列表会被转义成实心正方形
- 二级无序列表会被转义成空心圆点
1 | 示例效果： |
- 有序列表1
- 有序列表2
- 有序列表3
1
2
3
4
5
6
7
8
9示例效果：
1. 有序列表1
2. 有序列表2
3. 有序列表3
### 有序列表自动排序
你可以在第一行指定一个`1. `,然后接下来几行都用`1. `或者用`* `、更或者直接胡乱写数字，它都会自动排序成2、3、4...
示例语法： - 自动排序第一行
- 自动排序第二行
- 自动排序第三行
a 自动排序第四行1
2
3
4
5
6
7
8
9
10
11示例效果：
1. 自动排序第一行
1. 自动排序第二行
* 自动排序第三行
+ 自动排序第四行
> TIPS
> > 有序列表有一点需要注意，如果是一段普通文本，其开头是由一段数字组成，且数字后跟一个`.`以及一个空格，那么这段普通文本会被转义成有序列表，解决办法如下：
示例语法：
- 5%的人认为，这个世界上没有地狱的存在。（这句话98后跟了一个
.,接着又跟了个空格）98. 5%的人认为，这个世界上没有地狱的存在。（这句话98后跟了一个1
2
3
4
5显示效果：
98. 5%的人认为，这个世界上没有地狱的存在。（这句话98后跟了一个`.`,接着又跟了个空格）
正确语法：.,接着又跟了个空格）1
2
3
4
5
6显示效果：
98\. 5%的人认为，这个世界上没有地狱的存在。（这句话98后跟了一个`.`,接着又跟了个空格）
### 多级有序列表
和无序列表一样，有序列表也有多级结构： - 这是一级有序列表，第一层级还是数字1
- 这是二级有序列表，数字在这里会转义成罗马数字
1. 这是三级有序列表，数字在这里会被转义成英文字母- 这是四级有序列表，显示效果就不会再变化了，依旧是英文字母
1
2
3
4
5
6
7
8
9示例效果：
1. 这是一级有序列表，第一层级还是数字1
1. 这是二级有序列表，数字在这里会转义成罗马数字
1. 这是三级有序列表，数字在这里会被转义成英文字母
1. 这是四级有序列表，显示效果就不会再变化了，依旧是英文字母
## 列表项多段落及换行
无论是无序列表还是有序列表以及他们的多级列表，在文本换行后，markdown都会智能的将换行后的文本与该级文本第一行第一个文字对齐，而不会是直接左对齐此文档。
- 这是四级有序列表，显示效果就不会再变化了，依旧是英文字母
这里以无序多级列表为例，当本行文本的字数超出一定数量后，自动换行，但是换行后的文本不会是对齐于其生成的无序列表符号，
而是对齐于这行文本的第一个文字。这里是列表项的第二段文本，每个列表项都可以有多个段落文本，每个列表项的其他段落都必须缩进4个空格或者1个制表符，
这样才能确认是列表项的段落
当然在其二级列表下，当文本换行后，其对齐的也是二级列表本身的第一行文本的第一个文字。在编辑器如果编辑器本身视图上换
行后是左对齐，那么为了美观，可以通过制表符tab或空格缩进到对齐文本，当然也可以不去管它，这种对齐是markdown智能实现的。这里需要与二级列表对齐后，在缩进4个空格或者1个制表符，才能算是二级列表项的多段落
这里只与二级列表项对齐后，没有再进行缩进。其从排版上来看，更像是一级列表的段落
在这里我没缩进，可以看下我的显示效果，没有缩进，不从属于任何一级列表项的段落，且连列表项都不算，从显示效果来说，
只能算是一段普通文本。
1 | 示例效果： |
这是一个带有引用的列表项
这是一个引用
引用在一个列表里。
1 | 示例效果： |
这是一个列表，下面会展示一段代码：
<div style="color:red;">这里有代码显示</div>
1 | 示例效果： |
| 表头1 | 表头2 | 表头2 |
|---|---|---|
| 表格项1 | 表格项2 | 表格项2 |
| 给定一个参考项 | 可看出其对齐的内容 | 是否如实实现了各种对齐 |
| 有多行表格 | 参考依据 | 一目了然 |
1 | 示例效果： |
1 | 示例效果： |
1 | 可以看出要实现对齐： |
1 | 示例效果： |
1 | | # | 语法 | 效果 | |
1 | 示例效果： |
我让其换行表示这段话内容很多，以便展示效果。
这是引用部分的第二段话，
依然有很多内容，需要换行处理。
1 | 示例效果： |
这是引用部分的第一段话，
我让其换行表示这段话内容很多，以便展示效果。这里是引用里面嵌套的引用部分。可以无限嵌套下去，只要每嵌套一次就比上一层多一个
>+空格这是引用部分的第二段话，
依然有很多内容，需要换行处理。
1 | 示例效果： |
引用区块内使用标题
- 引用区块内使用列表1
- 引用区块内使用列表2
引用区块内还可以使用代码区块：
<div style="color:red;">这里有代码显示</div>
1 | 示例效果： |
以上语法代码结束处需有三个反引号的结束标签。
语法效果：
1 | <ul> |
更多其他语言：
1 | public static void main(String[]args){} //Java |
1 | int main(void) |
1 | echo "hello GitHub" #Bash |
1 | document.write("Hello World!") //javascript |
1 | string &operator+(const string& A,const string& B) //cpp |
自动超链
Markdown 支持以比较简短的自动链接形式来处理网址和电子邮件信箱，只要是用尖括号包起来， Markdown 就会自动把它转成链接。一般网址的链接文字就和链接地址一样
- 用尖括号包裹url，这样生成的url就是url本身这种是markdown本身的语法
- 而GitHub扩展后，超链不用外包尖括号，也一样可以被转义成超链接。
示例语法：
1 | kay_vin@qq.com <kay_vin@qq.com> www.baidu.com <https://github.com/kaivin/> https://github.com/kaivin/ |
1 | markdown会将邮件地址转换为： |
示例效果：kay_vin@qq.com kay_vin@qq.com www.baidu.com https://github.com/kaivin/ https://github.com/kaivin/
而在浏览器里，邮件其实是被转换为<a href="mailto:kay_vin@qq.com">kay_vin@qq.com</a>
任务清单
列表可被转换为任务清单，只需要为列表项的开头加上 [ ] 或 [x] 即可（分别表示未完成和已完成）。
语法为列表标识符+空格+一对中括号+空格+列表项内容。如列表项需要时选中状态，则在中括号内填写字母x，如列表项表示未选中状态，则中括号内加一个空格即可。
你可以用此来标注你一个项目的每个阶段的完成情况，以本文档的目录为例，写到此节，列表以上项目均已完成：
1 | * [x] 支持 @提到某人、标题、引用、[链接]()、**强调** 和 <del>标签</del> 等语法 |
示例效果：
- 支持 @kaivin、标题、引用、链接、强调 和
标签等语法 - 需要使用列表语法来激活（无序或有序列表均可）
- 这是一个已完成项目
- 这是一个未完成项目
这个特性会在 Issue 和 Pull Request 的描述和评论中启用。任务清单同样可用于 Gist 的评论和 Markdown 格式的 Gist。在这些场合，任务清单将渲染出复选框，供勾选或清除。
艾特符号
按下 @ 符号将弹出一个列表，列出这个项目相关的人或团队,即 @ 提到人名或团队名时的自动补全。这个列表会随着你的输入不断匹配筛选，因此一旦你在列表中发现了你要找的人名或团队名，你就可以用方向键来选中它，然后按回车或 tab 键来补全。对于团队来说，只需要输入 @组织名/团队名，那么团队内的所有成员都将收到提醒。
列表的匹配范围仅限制在当前仓库的贡献者以及当前讨论的参与者，因此它并不是一个全局性的搜索。它和文件查找器使用相同的模糊筛选算法，并且同时适用于用户名和全名。
@kaivin
此处实测没测出结果，创建了一个问题，如有热心大婶知道，可否给解惑一下
表情
Github的Markdown语法支持添加emoji表情，输入不同的符号码（两个冒号包围的字符）可以显示出不同的表情。
1 | :blush: |
显示效果：:blush:
更多的 emoji 表情可以查看GitHub官方网页：http://www.emoji-cheat-sheet.com。
也许这个页面会打开的很慢，页面里emoji表情太多，需要一些时间缓冲。也可查看我整理出来的[emoji][]。
此处实测输出冒号后并不能出现表情列表，需从官网找到你想要的表情代码，复制过来才行，所以创建了一个问题，如有热心大婶知道，可给解惑一下