Markdown的基本语法
参考来源:Markdown 教程 、手把手教会你使用Markdown 、Cmd Markdown
01、标题
1.1、# 号使用
使用 # 号可以表示 1-6 级标题,一级标题对应一个 # 号,随着 # 的个数递增,一级标题字号最大,六级标题字号最小。
代码如下:
# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题
1.2、= - 使用
也可以使用 = 和 - 标记一级和二级标题
代码:
一级标题
=======
二级标题
-------
注意:
-
最后一个 # 字符与标题中间留一个空格
-
标题应该置于行首,如果放入表格中可能无法正确解析
02、字体
2.1、斜体、粗体、粗斜体
星号和下划线都可以,单是斜体,双是粗体,三是粗斜体。
代码 | 效果 |
---|---|
*斜体* | 斜体 |
_斜体_ | 斜体 |
**粗体** | 粗体 |
__粗体__ | 粗体 |
***粗斜体*** | 粗斜体 |
___粗斜体___ | 粗斜体 |
快捷键:
- 加粗 Ctrl + B
- 斜体 Ctrl + I
03、换行
3.1、三种换行方式
Markdown 换行的方式有很多种:
- 直接在一句话后敲两个空格
- 两句话之间加一个空行
- 如果在编辑的时候,想让一行文字显示的时候换行,就在中间加 <br/>
04、区块引用
4.1、区块引用 >
Markdown 中区块引用通过符号 > 来实现。> 符号后的空格,可有可无。
在引用的区块内,允许换行存在,换行并不会终止引用的区块。如果要结束引用,需要一行空白行,来结束引用的区块。
代码:
>引用
效果:
引用
4.2、区块引用嵌套
此外,引用还可以嵌套使用:
代码:
>引用
>>引用的引用
>>>引用的引用的引用
效果:
引用
引用的引用
引用的引用的引用
05、链接
5.1、外链接
Markdown中插入链接的使用方式是:
代码:
[链接名称](链接地址)
<链接地址>
即是:
[我的博客](https://blog.xxxxxxx/xxxxxxxxxx)
或者
<https://blog.xxxxxxx/xxxxxxxxxx>
效果:
5.2、高级链接
可以通过变量来设置一个链接,变量赋值在文档末尾进行。
代码:
这个链接用 3 作为网址变量 [Google][3]
这个链接用 abc 作为网址变量 [ABC][abc]
然后在文档的结尾为变量赋值(网址)
[1]: http://www.google.com/
[abc]: http://www.abc.com/
效果:
这个链接 3 作为网址变量 Google
这个链接用 abc 作为网址变量 ABC
06、图片
6.1、图片语法格式
Markdown 中插入图片的使用方式是:
代码:
![alt 属性文本](图片地址)
![alt 属性文本](图片地址 "可选标题")
![图片的替代文字,可写可不写,但是中括号要有](图片地址,本地链接或者URL地址。)
![图片的替代文字,可写可不写,但是中括号要有](图片地址,本地链接或者URL地址。"选择性的title文字")
6.2、图片网址变量
可以像网址那样对图片网址使用变量:
代码:
这个链接用 4 作为网址变量 [ABCD][4].
然后在文档的结尾为变量赋值(网址)
[4]: https://abcd.com/images/abcd.png
效果:
这个链接用 4 作为网址变量 ABCD
然后在文档的结尾为变量赋值(网址)
6.3、改变图片参数
也可以修改位置和图片大小:
代码:
![图片描述,可写可不写,但是中括号要有](图片地址,本地链接或者URL地址#pic_center空格 =长x宽)
或
<img src="https://abcd.com/images/abcd.png" width="60%">
注意:
- 等号前有空格,是 x 不是 \*
- 可使用 Ctrl + v 粘贴图片
07、列表
7.1、有序/无序列表
列表分为有序列表和无序列表
- 无序列表,使用 * 、+ 、- ,再加一个空格作为列表的标记
- 有序列表,使用数字并加上 . 号,再加一个空格作为列表的标记
代码:
* 无序列表 1
+ 无序列表 2
- 无序列表 3
1. 有序列表 1
2. 有序列表 2
3. 有序列表 3
效果:
- 无序列表 1
- 无序列表 2
- 无序列表 3
-
有序列表 1
-
有序列表 2
-
有序列表 3
7.2、列表嵌套
如果想要控制列表的层级,则需要再列表符号前使用 Tab
代码:
+ 无序列表 1
+ 无序列表 2
+ 无序列表 2.1
+ 无序列表 2.2
1. 有序列表 1
1.1 有序列表 1.1
2. 有序列表 2
2.1 有序列表2.1
效果:
- 无序列表 1
- 无序列表 2
- 无序列表 2.1
- 无序列表 2.2
-
有序列表 1
1.1 有序列表 1.1 -
有序列表 2
2.1 有序列表 2.1
7.3、列表中使用区块
如果要在列表项目内放进区块,那么就需要在 > 前添加四个空格的缩进。
代码:
* 11111
> 22222
> 33333
* 44444
效果:
- 11111
22222
33333 - 44444
7.4、在区块中使用列表
代码:
> 区块中使用列表
> 1. 第一项
> 2. 第二项
> + 第一项
> + 第二项
> + 第三项
效果:
区块中使用列表
- 第一项
- 第二项
- 第一项
- 第二项
- 第三项
7.5、定义型列表
- 名词 1
- 定义 1(左侧有一个可见的冒号和四个不可见的空格)
- 代码块 2
- 这是代码块的定义(左侧有一个可见的冒号和四个不可见的空格)
代码块(左侧有八个不可见的空格)
08、分割线
8.1、分割线语法
Markdown中给出了多种分割线的样式,我们可以使用分割线让文章结构更加的清晰。
分割线的使用,可以在一行中用三个以上的 - 或者 * 或者 _ 来建立一个分割线,行内不能有其他东西。可以在星号或是减号中间插入空格,但是注意:在分割线上的上面空一行。
代码:
---
***
- - -
* * *
效果:
注意:在写分割线前,要空一行之后写,否则会导致前一行字体放大。
09、删除线
9.1、删除线语法
删除线的的使用,可以在要添加删除线的文字前后添加两个波浪线 ~~
代码:
~~这是删除的文字~~
效果:
这是删除的文字
10、下划线
10.1、下划线语法
下划线的使用和 HTML 中<u>
标签类似,在需要添加下划线的文字首尾添加 <u>文本</u>
代码:
<u>添加下划线</u>
效果:
添加下划线
11、代码块
Markdown中代码块有两种:
11.1、一个函数或代码片段
如果在一行内需要引用代码,即是段落上的一个函数或片段的代码,只需要用反引号 ` 引起来就好了。
代码:
`abc` def
效果:
abc
def
11.2、代码区块 ```
如果是在一个块内需要引用代码,则在需要引用的代码块的前一行和后一行使用三个反引号,同时在前一个反引号后写入代码的语言。可以指定一种语言,也可以不指定。
代码:
```
#include<iostream>
using namespace std;
int main(){
cout<<"abc def"<<endl;
return 0;
}
```
效果:
#include<iostream>
using namespace std;
int main(){
cout<<"abc def"<<endl;
return 0;
}
11.3、代码区块 Tab键
代码区块使用四个空格或者一个制表符(Tab 键)
11.4、加强的代码块
支持四十一种编程语言的语法高亮的显示,行号显示。
非代码示例:
$ pip install xxxxx
C++ 示例:
#include<iostream>
using namespace std;
int main(){
cout<<"abc def"<<endl;
return 0;
}
11.5、支持语言
支持以下语言:
bash
c,clojure,cpp,cs,css
dart,dockerfile, diff
erlang
go,gradle,groovy
haskell
java,javascript,json,julia
kotlin
lisp,lua
makefile,markdown,matlab
objectivec
perl,php,python
r,ruby,rust
scala,shell,sql,swift
tex,typescript
verilog,vhdl
xml
yaml
12、表格
12.1、表格及对齐方式
表格使用 | 来分割不同的单元格,使用 - 来分割表头和其他行。
:-
将表头及单元格内容左对齐-:
将表头及单元格内容右对齐:-:
将表头及单元格内容居中
代码:
| 学号 | 班级 | 姓名 |
| --- | -----:| :----: |
| 01 | 1 | 张三 |
| 02 | 2 | 李四 |
| 02 | 2 | 王五 |
效果:
学号 | 班级 | 姓名 |
---|---|---|
01 | 1 | 张三 |
02 | 2 | 李四 |
02 | 2 | 王五 |
13、脚注
13.1、脚注语法
脚注是对文本的备注,我们时长在论文中看到脚注,在Markdown中的使用方法
代码:
使用 Markdown[^1]可以效率的书写文档, 直接转换成 HTML[^2], 你可以使用 Typora[^T] 编辑器进行书写。
[^1]:Markdown是一种纯文本标记语言
[^2]:HyperText Markup Language 超文本标记语言
[^T]:NEW WAY TO READ & WRITE MARKDOWN.
使用 Markdown[1]可以效率的书写文档, 直接转换成 HTML[2].
注意:脚注自动被搬运到最后面,请到文章末尾查看,并且脚注后方的链接可以直接跳转回到加注的地方。
14、特殊符号
14.1、转义
对于Markdown中的语法符号,前面家反斜线 \ 即可显示符号本身。
代码:
\\
\*
\_
\+
\.
等等
效果:
\
*
_
+
.
Markdown 支持以下这些符号前面加上反斜杠来帮助插入普通的符号:
\ 反斜线
` 反引号
* 星号
_ 下划线
{} 花括号
[] 方括号
() 小括号
# 井字号
+ 加号
- 减号
. 英文句点
! 感叹号
15、支持 HTML 标签
15.1、HTML 标签
不在 Markdown 涵盖范围之内的标签,都可以直接在文档里面用 HTML 撰写。
目前支持的 HTML 元素有:<kbd> <b> <i> <em> <sup> <sub> <br>
等 。
代码:
使用 <kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Del</kbd> 重启电脑
效果:
使用 Ctrl+Alt+Del 重启电脑
15.2、内嵌图标
更多的图标可以参看 font-awesome 官方网站。
代码:
<i class="icon-weibo"></i>
<i class="icon-baidu"></i>
15.3、HTML 表格实例
代码:
<table>
<tr>
<th rowspan="2">值班人员</th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
</tr>
<tr>
<td>李强</td>
<td>张明</td>
<td>王平</td>
</tr>
</table>
效果:
值班人员 | 星期一 | 星期二 | 星期三 |
---|---|---|---|
李强 | 张明 | 王平 |
16、公式
16.1、公式语法
Markdown Preview Enhanced 使用 KaTeX 或者 MathJax 来渲染数学表达式。
KaTeX 拥有比 MathJax 更快的性能,但是它却少了很多 MathJax 拥有的特性。你可以查看 KaTeX supported functions/symbols 来了解 KaTeX 支持那些符号和函数。
默认下的分隔符:
$...$ 或者 \(...\) 中的数学表达式将会在行内显示。
$$...$$ 或者 \[...\] 或者 ```math 中的数学表达式将会在块内显示。
访问 MathJax 参考更多使用方法。
代码:
$$
\begin{Bmatrix}
a & b \\
c & d
\end{Bmatrix}
$$
\[\begin{Bmatrix}
a & b \\
c & d
\end{Bmatrix}
\]17、标签分类
17.1、标签语法
在编辑区任意行的列首位置输入以下代码给文稿标签:
标签: 数学 英语 Markdown
或者
Tags: 数学 英语 Markdown
标签: 数学 英语 Markdown
Tags: 数学 英语 Markdown
18、流程图
语法参考:流程图语法参考
18.1、横向流程图
横向流程图源码格式:
```mermaid
graph LR
A[方形] -->B(圆角)
B --> C{条件a}
C -->|a=1| D[结果1]
C -->|a=2| E[结果2]
F[横向流程图]
```
效果:
graph LR A[方形] -->B(圆角) B --> C{条件a} C -->|a=1| D[结果1] C -->|a=2| E[结果2] F[横向流程图]18.2、竖向流程图
竖向流程图源码格式:
```mermaid
graph TD
A[方形] --> B(圆角)
B --> C{条件a}
C --> |a=1| D[结果1]
C --> |a=2| E[结果2]
F[竖向流程图]
```
效果:
graph TD A[方形] --> B(圆角) B --> C{条件a} C --> |a=1| D[结果1] C --> |a=2| E[结果2] F[竖向流程图]18.3、标准流程图 (竖向)
标准流程图源码格式:
```flow
st=>start: 开始框
op=>operation: 处理框
cond=>condition: 判断框(是或否?)
sub1=>subroutine: 子流程
io=>inputoutput: 输入输出框
e=>end: 结束框
st->op->cond
cond(yes)->io->e
cond(no)->sub1(right)->op
```
18.4、标准流程图 (横向)
标准流程图源码格式(横向):
```flow
st=>start: 开始框
op=>operation: 处理框
cond=>condition: 判断框(是或否?)
sub1=>subroutine: 子流程
io=>inputoutput: 输入输出框
e=>end: 结束框
st(right)->op(right)->cond
cond(yes)->io(bottom)->e
cond(no)->sub1(right)->op
```
19、UML 时序图 / 序列图
语法参考:序列图语法参考
19.1、UML 时序图
UML 时序图源码样例:
```sequence
对象A->对象B: 对象B你好吗?(请求)
Note right of 对象B: 对象B的描述
Note left of 对象A: 对象A的描述(提示)
对象B-->对象A: 我很好(响应)
对象A->对象B: 你真的好吗?
```
19.2、UML 时序图 (复杂)
UML 时序图源码复杂样例:
代码:
```sequence
Title: 标题:复杂使用
对象A->对象B: 对象B你好吗?(请求)
Note right of 对象B: 对象B的描述
Note left of 对象A: 对象A的描述(提示)
对象B-->对象A: 我很好(响应)
对象B->小三: 你好吗
小三-->>对象A: 对象B找我了
对象A->对象B: 你真的好吗?
Note over 小三,对象B: 我们是朋友
participant C
Note right of C: 没人陪我玩
```
19.3、UML 标准时序图
UML 标准时序图样例:
代码:
```mermaid
%% 时序图例子,-> 直线,-->虚线,->>实线箭头
sequenceDiagram
participant 张三
participant 李四
张三->王五: 王五你好吗?
loop 健康检查
王五->王五: 与疾病战斗
end
Note right of 王五: 合理 食物 <br/>看医生...
李四-->>张三: 很好!
王五->李四: 你怎么样?
李四-->王五: 很好!
```
效果:
%% 时序图例子,-> 直线,-->虚线,->>实线箭头 sequenceDiagram participant 张三 participant 李四 张三->王五: 王五你好吗? loop 健康检查 王五->王五: 与疾病战斗 end Note right of 王五: 合理 食物 <br/>看医生... 李四-->>张三: 很好! 王五->李四: 你怎么样? 李四-->王五: 很好!20、甘特图
语法参考:甘特图语法参考
20.1、甘特图
甘特图内在思想简单。基本是一条线条图,横轴表示时间,纵轴表示活动(项目),线条表示在整个期间上计划和实际的活动完成情况。它直观地表明任务计划在什么时候进行,及实际进展与计划要求的对比。
甘特图样例:
代码:
```mermaid
%% 语法示例
gantt
dateFormat YYYY-MM-DD
title 软件开发甘特图
section 设计
需求 :done, des1, 2014-01-06,2014-01-08
原型 :active, des2, 2014-01-09, 3d
UI设计 : des3, after des2, 5d
未来任务 : des4, after des3, 5d
section 开发
学习准备理解需求 :crit, done, 2014-01-06,24h
设计框架 :crit, done, after des2, 2d
开发 :crit, active, 3d
未来任务 :crit, 5d
耍 :2d
section 测试
功能测试 :active, a1, after des3, 3d
压力测试 :after a1 , 20h
测试报告 : 48h
```
效果:
%% 语法示例 gantt dateFormat YYYY-MM-DD title 软件开发甘特图 section 设计 需求 :done, des1, 2014-01-06,2014-01-08 原型 :active, des2, 2014-01-09, 3d UI设计 : des3, after des2, 5d 未来任务 : des4, after des3, 5d section 开发 学习准备理解需求 :crit, done, 2014-01-06,24h 设计框架 :crit, done, after des2, 2d 开发 :crit, active, 3d 未来任务 :crit, 5d 耍 :2d section 测试 功能测试 :active, a1, after des3, 3d 压力测试 :after a1 , 20h 测试报告 : 48h21、Mermaid 流程图 & 序列图
语法参考:Mermaid 流程图语法参考
21.1、Mermaid 流程图
代码:
```graphLR
A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
C -->|Two| E[Result two]
```
语法参考:Mermaid 序列图语法参考
21.2、Mermaid 序列图
代码:
```sequence
Alice->John: Hello John, how are you?
loop every minute
John-->Alice: Great!
end
```
22、待办事宜 Todo 列表
22.1、待办事宜列表
使用带有 [ ] 或 [x] (未完成或已完成)项的列表语法撰写一个待办事宜列表,并且支持子列表嵌套以及混用Markdown语法,例如:
- [ ] **Cmd Markdown 开发**
- [ ] 改进 Cmd 渲染算法,使用局部渲染技术提高渲染效率
- [ ] 支持以 PDF 格式导出文稿
- [x] 新增Todo列表功能 [语法参考](https://github.com/blog/1375-task-lists-in-gfm-issues-pulls-comments)
- [x] 改进 LaTex 功能
- [x] 修复 LaTex 公式渲染问题
- [x] 新增 LaTex 公式编号功能 [语法参考](http://docs.mathjax.org/en/latest/tex.html#tex-eq-numbers)
- [ ] **七月旅行准备**
- [ ] 准备邮轮上需要携带的物品
- [ ] 浏览日本免税店的物品
- [x] 购买蓝宝石公主号七月一日的船票
对应显示如下待办事宜 Todo 列表:
23、总结
这篇博客仅仅作为本人学习过程笔记,便于遗忘后快速回看。所参考的具体文档已经在博客开头列出。