MarkDown基础
致谢
有少许补充和修改
md转word
在你编辑的那个md文件目录下打开命令行
pandoc -s 输入文件名.md -o 输出文件名.docx
标题
# 标题名字(井号的个数代表标题的级数)
一级标题使用1个#
二级标题使用2个#
三级标题使用3个#
四级标题使4用个#
五级标题使用5个#
六级标题使用6个#
# 最多支持六级标题#
编号
许多Markdown处理器支持标题的自定义ID - 一些Markdown处理器会自动添加它们。添加自定义ID允许您直接链接到标题并使用CSS对其进行修改。要添加自定义标题ID,请在与标题相同的行上用大括号括起该自定义ID。
### My Great Heading {#custom-id}
HTML看起来像这样:
<h3 id="custom-id">My Great Heading</h3>
文字
删除线
这就是 ~~删除线~~ (使用波浪号)
这就是 删除线 (使用波浪号)
斜体
这是用来 *斜体* 的 _文本_
这是用来 斜体 的 文本
加粗
这是用来 **加粗** 的 __文本__
这是用来 加粗 的 文本
斜体+加粗
这是用来 ***斜体+加粗*** 的 ___文本___
这是用来 斜体+加粗 的 文本
下划线
下划线是HTML语法
下划线
下划线(快捷键command
+u
,视频中所有的快捷键都是针对Mac系统,其他系统可自行查找)
高亮(需勾选扩展语法)
这是用来 ==斜体+加粗== 的文本
这是用来 斜体+加粗 的文本
下标(需勾选扩展语法)
水 H~2~O
双氧水 H~2~O~2~
水 H2O
双氧水 H2O2
上标(需勾选扩展语法)
面积 m^2^
体积 m^3^
面积 m2
体积 m3
表情符号
Emoji 支持表情符号,你可以用系统默认的 Emoji 符号( Windows 用户不一定支持,自己试下~)。 也可以用图片的表情,输入 :
将会出现智能提示。
一些表情例子
:smile: :laughing: :dizzy_face: :sob: :cold_sweat: :sweat_smile: :cry: :triumph: :heart_eyes: :relaxed: :sunglasses: :weary:
:+1: :-1: :100: :clap: :bell: :gift: :question: :bomb: :heart: :coffee: :cyclone: :bow: :kiss: :pray: :sweat_drops: :hankey: :exclamation: :anger:
😄 😆 😵 😭 😰 😅 😢 😤 😍 ☺️ 😎 😩 👍 👎 💯 👏 🔔 🎁 ❓ 💣 ❤️ ☕️ 🌀 🙇 💋 🙏 💦 💩 ❗️ 💢
( Mac: control
+command
+space
点选)
表格
使用 |
来分隔不同的单元格,使用 -
来分隔表头和其他行:
name | price
--- | ---
fried chicken | 19
cola|5
为了使 Markdown 更清晰,
|
和-
两侧需要至少有一个空格(最左侧和最右侧的|
外就不需要了)。
name | price |
---|---|
fried chicken | 19 |
cola | 5 |
为了美观,可以使用空格对齐不同行的单元格,并在左右两侧都使用 |
来标记单元格边界,在表头下方的分隔线标记中加入 :
,即可标记下方单元格内容的对齐方式:
| name | price |
| :------------ | :---: |
| fried chicken | 19 |
| cola | 32 |
name | price |
---|---|
fried chicken | 19 |
cola | 32 |
使用快捷键command
+opt
+T
更方便(段落→表格→插入表格,即可查看快捷键)
脚注
Here's a simple footnote,[^1] and here's a longer one.[^bignote]
[^1]: This is the first footnote.
[^bignote]: Here's one with multiple paragraphs and code.
Indent paragraphs to include them in the footnote.
`{ my code }`
Add as many paragraphs as you like.
Here’s a simple footnote,1 and here’s a longer one.2
Indent paragraphs to include them in the footnote.
{ my code }
Add as many paragraphs as you like.
引用
>“后悔创业”
“后悔创业”
>也可以在引用中
>>使用嵌套的引用
也可以在引用中
使用嵌套的引用
列表
无序列表–符号 空格
* 可以使用 `*` 作为标记
+ 也可以使用 `+`
- 或者 `-`
- 可以使用
*
作为标记
- 也可以使用
+
- 或者
-
有序列表–数字 .
空格
1. 有序列表以数字和 `.` 开始;
3. 数字的序列并不会影响生成的列表序列;
4. 但仍然推荐按照自然顺序(1.2.3...)编写。
-
有序列表以数字和
.
开始; -
数字的序列并不会影响生成的列表序列;
-
但仍然推荐按照自然顺序(1.2.3…)编写。
可以使用:数字\. 来取消显示为列表(用反斜杠进行转义)
复选框
- [x] 起床
* [ ] 洗漱
+ [ ] 吃早餐
- 起床
- 洗漱
- 吃早餐
- + * 效果相同
代码
代码块
```语言名称
public static void main(String[] args) {
}
行内代码
也可以通过 ``,插入行内代码(` 是 `Tab` 键上边、数字 `1` 键左侧的那个按键):
例如 `Markdown`
Markdown
转换规则
代码块中的文本(包括 Markdown 语法)都会显示为原始内容
分隔线
可以在一行中使用三个或更多的 *
、-
或 _
来添加分隔线(``):
***
------
___
跳转
外部跳转–超链接
格式为 [link text](link)
。
[帮助文档](https://support.typora.io/Links/#faq)
内部跳转–本文件内跳(Typora支持)
格式为 [link text](#要去的目的地--标题)
。
[我想跳转](#饼图(Pie))
Open Links in Typora
You can use
command+click
(macOS), orctrl+click
(Linux/Windows) on links in Typora to jump to target headings, or open them in Typora, or open in related apps.
自动链接
使用 <>
包括的 URL 或邮箱地址会被自动转换为超链接:
<https://www.baidu.com>
<123@email.com>
给链接增加 Title
链接title是当鼠标悬停在链接上时会出现的文字,这个title是可选的,它放在圆括号中链接地址后面,跟链接地址之间以空格分隔。
这是一个链接 [Markdown语法](https://markdown.com.cn "最好的markdown教程")。
这是一个链接 Markdown语法。
引用类型链接
引用样式链接是一种特殊的链接,它使URL在Markdown中更易于显示和阅读。参考样式链接分为两部分:与文本保持内联的部分以及存储在文件中其他位置的部分,以使文本易于阅读。
链接的第一部分格式
引用类型的链接的第一部分使用两组括号进行格式设置。第一组方括号包围应显示为链接的文本。第二组括号显示了一个标签,该标签用于指向您存储在文档其他位置的链接。
尽管不是必需的,可以在第一组和第二组括号之间包含一个空格。第二组括号中的标签不区分大小写,可以包含字母,数字,空格或标点符号。
以下示例格式对于链接的第一部分效果相同:
-
[hobbit-hole][1]
链接的第二部分格式
引用类型链接的第二部分使用以下属性设置格式:
- 放在括号中的标签,其后紧跟一个冒号和至少一个空格(例如
[label]:
)。 - 链接的URL,可以选择将其括在尖括号中。
- 链接的可选标题,可以将其括在双引号,单引号或括号中。
以下示例格式对于链接的第二部分效果相同:
-
[1]: https://en.wikipedia.org/wiki/Hobbit#Lifestyle
-
[1]: https://en.wikipedia.org/wiki/Hobbit#Lifestyle "Hobbit lifestyles"
-
[1]: https://en.wikipedia.org/wiki/Hobbit#Lifestyle 'Hobbit lifestyles'
-
[1]: https://en.wikipedia.org/wiki/Hobbit#Lifestyle (Hobbit lifestyles)
-
[1]: <https://en.wikipedia.org/wiki/Hobbit#Lifestyle> "Hobbit lifestyles"
-
[1]: <https://en.wikipedia.org/wiki/Hobbit#Lifestyle> 'Hobbit lifestyles'
-
[1]: <https://en.wikipedia.org/wiki/Hobbit#Lifestyle> (Hobbit lifestyles)
可以将链接的第二部分放在Markdown文档中的任何位置。有些人将它们放在出现的段落之后,有些人则将它们放在文档的末尾(例如尾注或脚注)。
图片
![自己起的图片名字](图片地址或者图片本地存储的路径)
网上的图片
![dogs](https://img0.baidu.com/it/u=76667871,2669032633&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=800)
本地图片
![friedChicken](friedChicken.jpg)
在同一个文件夹里(用相对路径)
![cola](../cola.jpg)
或者直接拷贝
利用Markdown画图(需勾选扩展语法)
markdown画图也是轻量级的,功能并不全。
Mermaid 是一个用于画流程图、状态图、时序图、甘特图的库,使用 JS 进行本地渲染,广泛集成于许多 Markdown 编辑器中。Mermaid 作为一个使用 JS 渲染的库,生成的不是一个“图片”,而是一段 HTML 代码。
(不同的编辑器渲染的可能不一样)
流程图(graph)
概述
graph 方向描述
图表中的其他语句...
关键字graph表示一个流程图的开始,同时需要指定该图的方向。
其中“方向描述”为:
用词 | 含义 |
---|---|
TB | 从上到下 |
BT | 从下到上 |
RL | 从右到左 |
LR | 从左到右 |
T = TOP,B = BOTTOM,L = LEFT,R = RIGHT,D = DOWN
最常用的布局方向是TB、LR。
graph TB;
A-->B
B-->C
C-->A
graph LR;
A-->B
B-->C
C-->A
流程图常用符号及含义
节点形状
表述 | 说明 | 含义 |
---|---|---|
id[文字] | 矩形节点 | 表示过程,也就是整个流程中的一个环节 |
id(文字) | 圆角矩形节点 | 表示开始和结束 |
id((文字)) | 圆形节点 | 表示连接。为避免流程过长或有交叉,可将流程切开。成对 |
id{文字} | 菱形节点 | 表示判断、决策 |
id>文字] | 右向旗帜状节点 |
单向箭头线段:表示流程进行方向
id即为节点的唯一标识,A~F 是当前节点名字,类似于变量名,画图时便于引用
括号内是节点中要显示的文字,默认节点的名字和显示的文字都为A
graph TB
A
B(圆角矩形节点)
C[矩形节点]
D((圆形节点))
E{菱形节点}
F>右向旗帜状节点]
graph TB
begin(出门)--> buy[买炸鸡]
buy --> IsRemaining{"还有没有炸鸡?"}
IsRemaining -->|有|happy[买完炸鸡开心]--> goBack(回家)
IsRemaining --没有--> sad["伤心"]--> goBack
连线
graph TB
A1-->B1
A2---B2
A3--text---B3
A4--text-->B4
A5-.-B5
A6-.->B6
A7-.text.-B7
A8-.text.->B8
A9===B9
A10==>B10
A11==text===B11
A12==text==>B12
子图表
使用以下语法添加子图表
subgraph 子图表名称
子图表中的描述语句...
end
graph TB
subgraph 买炸鸡前
begin(出门)--> buy[出门买炸鸡]
end
buy --> IsRemaining{"还有没有炸鸡?"}
IsRemaining --没有--> sad["伤心"]--> goBack(回家)
IsRemaining -->|有|happy[买完炸鸡开心]--> goBack
序列图(sequence diagram)
概述
sequenceDiagram
[参与者1][消息线][参与者2]:消息体
...
sequenceDiagram
为每幅时序图的固定开头
sequenceDiagram
Title: 买炸鸡
救救->>炸鸡店小哥: 还有炸鸡吗?
炸鸡店小哥-->>救救: 没有,要现炸
参与者(participant)
传统时序图概念中参与者有角色和类对象之分,但这里我们不做此区分,用参与者表示一切参与交互的事物,可以是人、类对象、系统等形式。中间竖直的线段从上至下表示时间的流逝。
sequenceDiagram
participant 参与者 1
participant 参与者 2
...
participant 简称 as 参与者 3 #该语法可以在接下来的描述中使用简称来代替参与者 3
participant <参与者名称>
声明参与者,语句次序即为参与者横向排列次序。
消息线
类型 | 描述 |
---|---|
-> | 无箭头的实线 |
–> | 无箭头的虚线 |
->> | 有箭头的实线(主动发出消息) |
–>> | 有箭头的虚线(响应) |
-x | 末端为叉的实线(表示异步) |
–x | 末端为叉的虚线(表示异步) |
处理中-激活框
从消息接收方的时间线上标记一小段时间,表示对消息进行处理的时间间隔。
在消息线末尾增加 +
,则消息接收者进入当前消息的“处理中”状态;
在消息线末尾增加 -
,则消息接收者离开当前消息的“处理中”状态。
sequenceDiagram
participant p99 as 救救
participant seller as 炸鸡店小哥
p99 ->> seller: 还有炸鸡吗?
seller -->> p99: 没有,要现炸。
p99 -x +seller:给我炸!
seller -->> - p99: 您的炸鸡好了!
注解(note)
语法如下
Note 位置表述 参与者: 标注文字
其中位置表述可以为
表述 | 含义 |
---|---|
right of | 右侧 |
left of | 左侧 |
over | 在当中,可以横跨多个参与者 |
sequenceDiagram
participant p99 as 救救
participant seller as 炸鸡店小哥
Note over p99,seller : 热爱炸鸡
Note left of p99 : 女
Note right of seller : 男
p99 ->> seller: 还有炸鸡吗?
seller -->> p99: 没有,要现炸。
p99 -x +seller : 给我炸!
seller -->> - p99: 您的炸鸡好了!
循环(loop)
在条件满足时,重复发出消息序列。(相当于编程语言中的 while 语句。)
sequenceDiagram
participant p99 as 救救
participant seller as 炸鸡店小哥
p99 ->> seller: 还有炸鸡吗?
seller -->> p99: 没有,要现炸。
p99 ->> +seller:给我炸!
loop 三分钟一次
p99 ->> seller : 我的炸鸡好了吗?
seller -->> p99 : 正在炸
end
seller -->> - p99: 您的炸鸡好了!
选择(alt)
在多个条件中作出判断,每个条件将对应不同的消息序列。(相当于 if 及 else if 语句。)
sequenceDiagram
participant p99 as 救救
participant seller as 炸鸡店小哥
p99 ->> seller : 现在就多少只炸好的炸鸡?
seller -->> p99 : 可卖的炸鸡数
alt 可卖的炸鸡数 > 3
p99 ->> seller : 买三只!
else 1 < 可卖的炸鸡数 < 3
p99 ->> seller : 有多少买多少
else 可卖的炸鸡数 < 1
p99 ->> seller : 那我明天再来
end
seller -->> p99 : 欢迎下次光临
可选(opt)
在某条件满足时执行消息序列,否则不执行。相当于单个分支的 if 语句。
sequenceDiagram
participant p99 as 救救
participant seller as 炸鸡店小哥
p99 ->> seller : 买炸鸡
opt 全都卖完了
seller -->> p99 : 下次再来
end
并行(Par)
将消息序列分成多个片段,这些片段并行执行。
sequenceDiagram
participant p99 as 救救
participant seller as 炸鸡店小哥
p99 ->> seller : 一个炸鸡,一杯可乐!
par 并行执行
seller ->> seller : 装可乐
and
seller ->> seller : 炸炸鸡
end
seller -->> p99 : 您的炸鸡好了!
饼图(Pie)
pie
title Pie Chart
"Dogs" : 386
"Cats" : 85
"Rats" : 150
"panda" : 200
甘特图(gantt)
title 标题
dateFormat 日期格式
section 部分名
任务名:参数一, 参数二, 参数三, 参数四,参数五
//参数一:crit(是否重要,红框框) 或者 不填
//参数二:done(已完成)、active(正在进行) 或者 不填(表示为待完成状态)
//参数三:取小名 或者 不填
//参数四:任务开始时间
//参数五:任务结束时间
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
section Critical tasks
Completed task in the critical line :crit, done, 2014-01-06,24h
Implement parser and jison :crit, done, after des1, 2d
Create tests for parser :crit, active, 3d
Future task in critical line :crit, 5d
Create tests for renderer :2d
Add to mermaid :1d
section Documentation
Describe gantt syntax :active, a1, after des1, 3d
Add gantt diagram to demo page :after a1 , 20h
Add another diagram to demo page :doc1, after a1 , 48h
section Last section
Describe gantt syntax :after doc1, 3d
Add gantt diagram to demo page :20h
Add another diagram to demo page :48h