Markdown语法总结
以前接触过Markdown语言,但是平时用到并不算多,为了方便以后的发展,这次较为系统的学习总结一下Markdown语言,学习基本用法。
文章目录
Markdown简介
学习当然首先要知道Markdown是什么,在菜鸟教程中给出Markdown的定义如下:
Markdown 是一种轻量级标记语言,它允许人们使用易读易写的纯文本格式编写文档。
Markdown 语言在 2004 由约翰·格鲁伯(英语:John Gruber)创建。
Markdown 编写的文档可以导出 HTML 、Word、图像、PDF、Epub 等多种格式的文档。
Markdown 编写的文档后缀为 .md, .markdown。
我个人编写Markdown时候使用的工具是Typora,这也是我很喜欢的一个编辑软件,在其官网可以进行下载
既然使用的是菜鸟教程,接下来将会使用菜鸟教程中的结构进行学习总结,教程链接为:link
Markdown标题
Markdown有两种标题
1.使用 = 和 - 标记一级和二级标题
语法格式如下:
我展示的是一级标题
=================
我展示的是二级标题
-----------------
展示效果如下所示:
似乎在Typora中这个实验并不算成功,复制内容是可以得到相应结果的,但是如果自己敲的话会识别成字符相关的操作,并且这个方法也不算很方便,建议还是使用下一个方法
2. 使用 # 进行标记
# 可以标记1-6级标题,每级标题对应相应个数的 # ,如下所示:
# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题
显示效果如下所示:
个人认为这是比较常见且方便的做法,并且同样可以完成第一个方法的工作,使用 # 标记标题即可,无需使用其他复杂方法。
Markdown段落格式
段落
Markdown段落没有特殊的格式,直接编写文字就好,段落的换行是使用两个以上的空格加上回车,或者使用空行来换行。
字体
Markdown中可以使用以下字体样式:
*斜体文本*
_斜体文本_
**粗体文本**
__粗体文本__
***粗斜体文本***
___粗斜体文本___
==强调文本==
`阴影文本`
~~删除线文本~~
<u>下划线文本</u>
下~2~标
上标^10^
显示效果如下所示:
也就是 * 和 _ 其实是等价的,1个为倾斜,2个为加粗,3个为加粗倾斜,另外强调、删除线和下划线也在这里进行了总结
分割线
在一行中用3个及以上的星号、减号、底线来建立一个分隔线,行内不能有其他东西,但可以在星号或是减号中间插入空格,如下所示:
***
* * *
*****
- - -
----------
显示效果如下所示:
脚注
脚注是对文本的补充说明,感觉皮一下很有意思,脚注格式如下所示:
创建脚注格式类似这样 [^RUNOOB]。
[^RUNOOB]: 菜鸟教程 -- 学的不仅是技术,更是梦想!!!
显示效果如下所示:
这个以前没有用过,感觉很有意思,上次看到类似这种的1
在CSDN中介绍了关于注释的使用方法,但是似乎在Typora中并不支持,此处仅仅作为记录,如下所示:
Markdown将文本转换为 HTML。
而对于注脚,感觉使用数字作为类似文言文的课下注释更好。
Markdown列表
分为有序列表和无序列表。
无序列表以 * 、 + 、 - 作为标记,标记后加一个空格即可形成相应列表,如下所示:
* 第一项
* 第二项
* 第三项
+ 第一项
+ 第二项
+ 第三项
- 第一项
- 第二项
- 第三项
显示效果如下所示:
有序列表则使用数字加 .
来表示,如下所示:
1. 第一项
2. 第二项
3. 第三项
显示效果如下所示:
列表可以进行嵌套,只需要在子列表选项前加四个空格即可,如下所示:
1. 第一项:
- 第一项嵌套的第一个元素
- 第一项嵌套的第二个元素
2. 第二项:
- 第二项嵌套的第一个元素
- 第二项嵌套的第二个元素
显示效果如下所示:
CSDN上面还介绍了待完成项目的列表,如下所示:
- [ ] 计划任务
- [x] 完成任务
显示效果如下所示:
Markdown区块
这一部分主要介绍引用的使用。
Markdown区块引用是在段落开头使用 >
符号,然后后面紧跟一个空格符号,如下所示:
> 区块引用
> 菜鸟教程
> 学的不仅是技术更是梦想
显示效果如下所示:
使用多个 >
符号可以实现引用嵌套,如下所示:
> 最外层
> > 第一层嵌套
> > > 第二层嵌套
显示效果如下所示:
当然引用中也可以进行列表标注,列表中也可以使用引用作为内容
Markdown代码
对于段落上一个函数或者片段的代码,可以使用反引号将其包起来,即使用字体阴影,如下所示:
`printf()` 函数
显示效果如下所示:
对于代码区块,可以使用4个反引号包裹,可以选择指定一种语言或者不指定,如下所示:
```javascript
$(document).ready(function () {
alert('RUNOOB');
});
```
显示效果如下所示:
Markdown链接
使用链接,可以设定链接名称,也可以直接指定链接地址,如下所示:
这是一个链接 [菜鸟教程](https://www.runoob.com)
<https://www.runoob.com>
显示效果如下所示:
对于更高级的链接,可以通过使用变量来设置链接,然后在文档的结尾为变量赋值(网址),有点像脚注,如下所示:
这个链接用 1 作为网址变量 [Google][1]
这个链接用 runoob 作为网址变量 [Runoob][runoob]
[1]: http://www.google.com/
[runoob]: http://www.runoob.com/
显示效果如下所示:
Markdown图片
插入图片格式如下所示:
![alt 属性文本](图片地址)
![alt 属性文本](图片地址 "可选标题")
- 首先开头一个
!
- 接下来使用方括号,里面放上图片的替代文字
- 接下来是一个圆括号,里面放上图片的地址,最后还可以用引号加上选择性的’title’属性文字,在鼠标移动到时候会显示相应的title属性
使用实例如下所示:
![RUNOOB 图标](http://static.runoob.com/images/runoob-logo.png)
![RUNOOB 图标](http://static.runoob.com/images/runoob-logo.png "RUNOOB")
显示效果如下所示:
对于图片格式,目前Markdown还不能指定图片的大小,如果需要相应功能,可以使用<img>标签,如下所示:
<img src="http://static.runoob.com/images/runoob-logo.png" width="50%">
显示效果如下所示:
Markdown表格
Markdown制作表格使用 |
来分隔不同的单元格,使用 -
来分隔表头和其他行
语法格式如下:
| 表头 | 表头 |
| ---- | ---- |
| 单元格 | 单元格 |
| 单元格 | 单元格 |
显示效果如下所示:
对于表格也可以设置表格的对齐方式,设置在分隔符区域,主要有以下三种:
-:
设置内容和标题栏居右对齐:-
设置内容和标题栏居左对齐:-:
设置内容和标题栏居中对齐
实例如下所示:
| 左对齐 | 右对齐 | 居中对齐 |
| :-----| ----: | :----: |
| 单元格 | 单元格 | 单元格 |
| 单元格 | 单元格 | 单元格 |
显示效果如下所示:
个人感觉居中对齐会用的比较多,这里再次强调居中对齐为:-:
Markdown的高级用法
这里展示Markdown的一些其他用法,可能不会太常用,仅仅用于记录,以后在遇到更多的用法时候也会进行更新。
支持HTML元素
个人没有学习过HTML,所以这里仅仅列出教程中提出的相关用法,作为参考
目前支持的 HTML 元素有:<kbd> <b> <i> <em> <sup> <sub> <br>
等 ,如下使用<kdd>
元素作为按钮元素样式:
使用 <kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Del</kbd> 重启电脑
显示效果如下所示:
在查询了相关HTML标签之后列出标签的意义:
<kdd>
:按钮
<b>
:加粗文本
<i>
:斜体文本
<em>
:查询为强调,似乎还是斜体
<sup>
:上标文本,当然个人感觉使用字体中提到的更加方便,天知道当时课程让读论文时候用标签写上下标是一种怎样的折磨(
<sub>
:下标文本,当然个人感觉使用字体中提到的更加方便
<br>
:换行
<img>
:图片标签,在前面指定图片大小时候用到
关于标签内容可以参考该网页
转义
虽然放在高级用法,但是感觉没啥好说的,很多地方已经用到了转义符\
,否则没有办法打这些具有特殊意义的符号,在以下符号前需要加转义符号:
\ 反斜线
` 反引号
* 星号
_ 下划线
{} 花括号
[] 方括号
() 小括号
# 井字号
+ 加号
- 减号
. 英文句点
! 感叹号
公式
包括这一部分的后面几个部分,与其说是Markdown倒不如说是相应的模块的语言,例如公式领域的LaTeX。
在使用LaTeX时候,使用两个$$
符号包裹相应公式,以下面的公式举例:
$$
\mathbf{V}_1 \times \mathbf{V}_2 = \begin{vmatrix}
\mathbf{i} & \mathbf{j} & \mathbf{k} \\
\frac{\partial X}{\partial u} & \frac{\partial Y}{\partial u} & 0 \\
\frac{\partial X}{\partial v} & \frac{\partial Y}{\partial v} & 0 \\
\end{vmatrix}
${$tep1}{\style{visibility:hidden}{(x+1)(x+1)}}
$$
显示效果如下所示:
在CSDN的编辑页面给出的示例中,简单公式可以使用的是单个$
进行包裹,下面为CSDN中的示例:
Gamma公式展示 $\Gamma(n) = (n-1)!\quad\forall
n\in\mathbb N$ 是通过欧拉积分
$$
\Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,.
$$
显示效果如下所示:
以上仅仅给出例子,但是并不能理解,看来以后还得留出时间搞搞LaTeX
Mermaid
本来是要按照菜鸟教程中的结构进行学习的,但是学到后面发现其实都是基于Mermaid进行这几个图的绘制,所以干脆就直接将Mermaid作为标题了
yysy,Mermaid好像是个宝藏,有很多很有意思的地方,对于绘制流程图什么的也很有用,虽然在后面也有提及其官方网站链接,这里就先直接给出吧,作为下一个想要进行学习总结的小点。
链接中详细介绍了关于Mermaid的使用方法,而对于这篇Markdown总结来说,下面仅仅给出相关的示例。
甘特图
甘特图(Gantt chart)又称为横道图、条状图(Bar chart),其通过条状图来显示项目、进度和其他时间相关的系统进展的内在关系随着时间进展的情况,以提出者亨利·劳伦斯·甘特(Henry Laurence Gantt)先生的名字命名。
以下给出一个甘特图实例:
```mermaid
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
section 现有任务
已完成 :done, des1, 2014-01-06,2014-01-08
进行中 :active, des2, 2014-01-09, 3d
计划一 : des3, after des2, 5d
计划二 : des4, after des3, 5d
```
显示效果如下所示:
yysy,甘特图还挺有意思的,看起来也不是那么复杂,以后可以尝试套用该模板进行编辑。
UML图表
下面将生成一个序列图:
```mermaid
sequenceDiagram
张三 ->> 李四: 你好!李四, 最近怎么样?
李四-->>王五: 你最近怎么样,王五?
李四--x 张三: 我很好,谢谢!
李四-x 王五: 我很好,谢谢!
Note right of 王五: 李四想了很长时间, 文字太长了<br/>不适合放在一行.
李四-->>张三: 打量着王五...
张三->>王五: 很好... 王五, 你怎么样?
```
显示效果如下所示:
下面则会生成一个流程图:
```mermaid
graph LR
A[长方形] -- 链接 --> B((圆))
A --> C(圆角长方形)
B --> D{菱形}
C --> D
```
显示效果如下所示:
Flowchart流程图
```mermaid
flowchart TD
A[Start] --> B{Is it?};
B -->|Yes| C[OK];
C --> D[Rethink];
D --> B;
B ---->|No| E[End];
```
显示效果如下所示:
Tips
图片图床
给出几个链接,可以将图片上传到图床上,这样Markdown中的图片路径可以使用网上路径代替本地路径
更方便的做法
更方便的做法是直接绑定一个云账户,使用Typora编辑时候直接自动将图片上传为网络路径,具体做法可以参考以下两个网站,这里我使用的是阿里云的对象存储OSS
萌娘百科,你知道的太多了 ↩︎