Markdown 自我学习教程
前提
由于有的时候需要编写技术需求文档、使用文档、测试文档,又加上最近使用Markdown比较多,所以积累了一些经验。本人主要通过以下几个参考链接中学习了一部分,并总结了一点自己写的东西,与大家共同分享。同时由于在简书的Markdown文本编辑器中, 脚注、MathJax、流程图、时序图、甘特图、任务列表(Task lists)、HTML部分标签等等暂不支持,所以这部分Markdown语言的显示效果我用在其他软件上显示的结果图片来进行展示,各位如果想练习一下,可以在其他平台或者软件上使用,我这边使用更多的是Typora 。
Markdown 简介
Markdown 是一种轻量级标记语言,它允许人们使用易读易写的纯文本格式编写文档。
Markdown 语言在 2004 由约翰·格鲁伯(英语:John Gruber)创建。
Markdown 编写的文档可以导出 HTML 、Word、图像、PDF、Epub 等多种格式的文档。
Markdown 编写的文档后缀为 .md, .markdown。
Markdown 标题
- 使用 # 号可表示 1-6 级标题,一级标题对应一个 # 号,二级标题对应两个 # 号,以此类推。
# 号后,记得空一格再加标题文本。
# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题
显示效果如下所示:
多级标题展示.png
- 使用 = 和 - 标记一级和二级标题
首先输入标题文字,然后shift + enter
另起一行, 输入两个或两个以上 “ = / - ” ,示例语法格式如下:
我展示的是一级标题
=================
我展示的是二级标题
-----------------
显示效果如下所示:
一二级标题展示.png
Markdown 链接
链接使用方法如下:
[链接名称](链接地址)
或者
<链接地址>
显示效果如下所示:
链接名称包含测试连接:百度一下
直接使用链接地址:https://www.baidu.com
- 高级链接
我们可以通过变量来设置一个链接,变量赋值在文档末尾进行:
这个链接用 10 作为网址变量 [Google][10]
然后在文档的结尾为变量赋值(网址)
[10]: http://www.google.com/
显示效果如下所示:
这个链接用 10 作为网址变量 Google
然后在文档的结尾为变量赋值(网址)
Markdown 列表
Markdown 支持有序列表和无序列表。
无序列表使用星号 (*) 、加号 (+) 或是减号 (-) 作为列表标记,这些标记后面要添加一个空格,然后再填写内容:
* 第一项
* 第二项
* 第三项
+ 第一项
+ 第二项
+ 第三项
- 第一项
- 第二项
- 第三项
显示效果如下所示:
- 第一项
- 第二项
- 第三项
- 第一项
- 第二项
- 第三项
- 第一项
- 第二项
- 第三项
有序列表使用数字并加上 . 号来表示,如:
1. 第一项
2. 第二项
3. 第三项
显示效果如下所示:
- 第一项
- 第二项
- 第三项
列表嵌套
列表嵌套只需在子列表中的选项前面添加四个空格即可:
1. 第一项:
- 第一项嵌套的第一个元素
- 第一项嵌套的第二个元素
2. 第二项:
- 第二项嵌套的第一个元素
- 第二项嵌套的第二个元素
显示效果如下所示:
- 第一项:
- 第一项嵌套的第一个元素
- 第一项嵌套的第二个元素
- 第二项:
- 第二项嵌套的第一个元素
- 第二项嵌套的第二个元素
Markdown 图片
Markdown 图片语法格式如下:
![属性文本](图片地址)
![属性文本](图片地址 "可选标题")
- 开头一个感叹号 !
- 接着一个方括号,里面放上图片的替代文字
- 接着一个普通括号,里面放上图片的网址,最后还可以用引号包住并加上选择性的 'title' 属性的文字。
显示效果如下所示:
气球
Markdown 还没有办法指定图片的高度与宽度,如果你需要的话,你可以使用普通的 <img> 标签。
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1606320455463&di=cbb2b7ee092d955b8a2b576abd4b53d0&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F16%2F09%2F09%2F2157d2ba871765e.jpg" alt="气球" width="30%" />
显示效果如下所示:
使用img标签控制气球的大小.png
Markdown 区块引用
>这是区块引用示例
另外区块引用是可以嵌套的,一个 > 符号是最外层,两个 > 符号是第一层嵌套,以此类推:
“>”后无需加空格。
显示效果如下所示:
这是区块引用示例
最外层
第一层嵌套
第二层嵌套
Markdown 内联代码
`内联代码`
显示效果如下所示:
git clone
Markdown 下划线
<u>下划线</u>
显示效果如下所示:
下划线.png
Markdown 删除线
~~删除线~~
显示效果如下所示:
这是删除线
Markdown 分割线
你可以在一行中用三个以上的星号、减号、底线来建立一个分隔线,行内不能有其他东西。你也可以在星号或是减号中间插入空格。下面每种写法都可以建立分隔线。
***
* * *
*****
- - -
----------
---
显示效果如下所示:
Markdown 脚注
脚注是对文本的补充说明。
Markdown 脚注的格式如下:
[^要注明的文本]
显示效果如下所示:
今天天气怎么样 [1]。
MarkDown 文本
1. 斜体文本
*斜体文本1*
_斜体文本2_
显示效果如下所示:
斜体文本1
斜体文本2
2. 加粗文本
**加粗文本** 或 __加粗文本__,加粗文本用两个*或两个_包围文本。
加粗斜体则用三个*或三个_包围文本。
例如:
**加粗字体1**
__加粗字体2__
***加粗斜体文本1***
___加粗斜体文本2___
显示效果如下所示:
加粗字体1
加粗字体2
加粗斜体文本1
加粗斜体文本2
3. 更改字体、大小、颜色
<font face="黑体">我是黑体字</font>
<font face="微软雅黑">我是微软雅黑</font>
<font face="STCAIYUN">我是华文彩云</font>
<font color=red>我是红色</font>
<font color=#008000>我是绿色</font>
<font color=Blue>我是蓝色</font>
<font size=5>我是尺寸</font>
<font face="黑体" color=green size=5>我是黑体,绿色,尺寸为5</font>
显示效果如下所示:
字体的样式与大小与颜色.png
4. 为文本添加背景色
<table><tr><td bgcolor=green>背景色yellow</td></tr></table>
显示效果如下所示:
绿色背景.png
Markdown 表格
Markdown 制作表格使用 | 来分隔不同的单元格,使用 - 来分隔表头和其他行。
| 表头 | 表头 |
| ---- | ---- |
| 单元格 | 单元格 |
| 单元格 | 单元格 |
显示效果如下所示:
表头 | 表头 |
---|---|
单元格 | 单元格 |
单元格 | 单元格 |
对齐方式
我们可以设置表格的对齐方式:
-
-: 设置内容和标题栏居右对齐。
-
:- 设置内容和标题栏居左对齐。
-
:-: 设置内容和标题栏居中对齐。
设置如下:
| 左对齐 | 右对齐 | 居中对齐 |
| :-----| ----: | :----: |
| 单元格 | 单元格 | 单元格 |
| 单元格 | 单元格 | 单元格 |
显示效果如下所示:
左对齐 | 右对齐 | 居中对齐 |
---|---|---|
单元格 | 单元格 | 单元格 |
单元格 | 单元格 | 单元格 |
Markdown 上下标
上标:H<sub>2</sub>O
下标:x<sup>2</sup>
显示效果如下所示:
上标:H2O
下标:x2
Markdown 勾选框
- [x] task list 1
- [x] task list 2
- [x] task list 3
- [ ] task list 3-1
- [ ] task list 3-2
- [ ] task list 3-3
显示效果如下所示:
勾选框.pngMarkdown 转义
Markdown 使用了很多特殊符号来表示特定的意义,如果需要显示特定的符号则需要使用转义字符,Markdown 使用反斜杠转义特殊字符:
**正常显示星号**
\*\* 正常显示星号 \*\*
显示效果如下所示:
正常显示星号
** 正常显示星号 **
Markdown 支持以下这些符号前面加上反斜杠来帮助插入普通的符号:
\ 反斜线
` 反引号
* 星号
_ 下划线
{} 花括号
[] 方括号
() 小括号
# 井字号
+ 加号
- 减号
. 英文句点
! 感叹号
Markdown 支持的 HTML 元素
不在 Markdown 涵盖范围之内的标签,都可以直接在文档里面用 HTML 撰写。
目前支持的 HTML 元素有:<kbd> <b> <i> <em> <sup> <sub> <br>
等 ,如:
使用 <kbd>Command</kbd>+<kbd>C键</kbd> 将所选项拷贝到剪贴板
显示效果如下所示:
粘贴.png
Markdown 公式
当你需要在编辑器中插入数学公式时,可以使用两个美元符 $$ 包裹 TeX 或 LaTeX 格式的数学公式来实现。举例方程组公式,如下:
$$
\begin{cases}
a_1x+b_1y+c_1z=d_1\\
a_2x+b_2y+c_2z=d_2\\
a_3x+b_3y+c_3z=d_3\\
\end{cases}
$$
- 方程组公式需要cases环境:起始、结束处以{cases}声明。
显示效果如下所示:
Markdown 画图
1. 流程图
\```mermaid
graph LR
A[方形] -->B(圆角)
B --> C{条件a}
C -->|a=1| D[结果1]
C -->|a=2| E[结果2]
F[横向流程图]
\```
-
重要提示:上述"```mermaid":第一行内容与最后一行内容,表示当前使用的语言为mermaid。使用时请去掉 \ 反斜杠。
显示效果如下所示:
流程图.png
2. 时序图(顺序图)
\```sequence
对象A->对象B: 对象B你好吗?(请求)
Note right of 对象B: 对象B的描述
Note left of 对象A: 对象A的描述(提示)
对象B-->对象A: 我很好(响应)
对象A->对象B: 你真的好吗?
\```
-
重要提示:上述"```sequence":第一行内容与最后一行内容,表示当前使用的语言为sequence。使用时请去掉 \ 反斜杠。
显示效果如下所示:
时序图.png
3. 甘特图
\```mermaid
%% 语法示例
gantt
dateFormat YYYY-MM-DD
title 使用mermaid语言定制甘特图
section 普通任务
已完成的任务 :done, des1, 2021-01-06,2021-01-08
正在进行的任务 :active, des2, 2021-01-09, 3d
待完成任务1 : des3, after des2, 5d
待完成任务2 : des4, after des3, 5d
section 关键任务
已完成的关键任务 :crit, done, 2021-01-06,24h
已完成的关键任务2 :crit, done, after des1, 2d
正在进行的关键任务 :crit, active, 3d
待完成的关键任务 :crit, 5d
待完成任务 :2d
待完成任务2 :1d
section 文档编写
描述甘特图语法 :active, a1, after des1, 3d
完成甘特图实例1 :after a1 , 20h
完成甘特图实例2 :doc1, after a1 , 48h
\```
-
重要提示:上述"```mermaid":第一行内容与最后一行内容,表示当前使用的语言为mermaid。使用时请去掉 \ 反斜杠。
显示效果如下所示:
甘特图.png
Markdown 参考
-
天气晴朗! ↩