Typora Markdown语法
目录
在段落中填写 [TOC] 以显示全文内容的目录结构，简书上显示不了目录，流程图，但是Typera工具上是可以的哦！本文概要如下：
- 快捷键
- 基本语法(标题、字体、引用、列表、插入(图片、链接、代码块、表情)
- latex数学公式
- flow流程图
- mermaid流程图、时序图、甘特图
快捷键
| 功能 | mac |
|---|---|
| 标题 | command + 1/2/3/4/5/6 —> 1,2,3,4,5,6级标题 |
| 加粗 | command + B |
| 斜体 | command + I |
| 下划线 | command + U |
| 横线 | command + shift + - |
| 引用 | command + option + Q |
| 有序列表 | command + option + O |
| 无序列表 | command + option + U |
| 任务列表 | command + option + X |
| 插入表情 | command + control + space(空白键) |
| 插入表格 | command + option + T |
| 表格内新增行 | enter + shift / command + enter |
| 表格内删除行 | command + shift + L |
| 插入图片 | 直接拖曳 或 command + option + i （填入图片的路径) |
| 插入数学公式 | command + option + B |
| 插入链接 | command + K / command + option + L —> command + 鼠标单击 访问 |
| 插入代码块 | command + option + C (各种前后端编程语言，流程图、甘特图、时序图) |
| 显示/隐藏源码 | command + / |
| 显示/隐藏大纲 | command + shift + B |
| 搜索 | command + F |
| 选择行 | command + L |
| 选择单词 | command + D |
| 全屏 | command + control + F |
| 撤销 | command + Z |
| 关闭窗口 | command + H |
| 关闭Typora | command + Q / W |
mac下快捷键符号标记
mac keybord
基本语法
字体
*斜体文本*
_斜体文本_
**加粗文本**
***斜体加粗文本***
~~下划线文本~~
斜体文本
斜体文本
加粗文本
斜体加粗文本
下划线文本
标题
# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题
multi title
图片
# 图片链接
mallAI
链接
# 自动链接
<https://www.mallai.top>
# 参考式链接
[标记]:链接地址 "标题"
# 只显示文本的超链接
[文本](链接地址)
# 链接访问: command + 单击
分割线
***
---
___
代码块
```语言类型```
```python``` # 指定python语言
```mermaid``` # 指定流程图、时序图、甘特图语言
```flow``` # 指定流程图语言
```html``` # 指定内嵌html，可在html文档中被渲染
`文本` # 单行
单行文本
print('hello word')
<h2 style="font-size: 24px">
这是二级标题
</h2>
graph LR
这是流程图1 --> 这是流程图2
引用
>引用文本
*连续引用*
>引用文本1
>引用文本2
>引用文本3
*带空格引用*
>引用文本1
>
>引用文本3
*嵌套引用*
>>>引用文本1
>>引用文本2
>引用文本3
*引用其他元素*
>#####引用五级标题
>```python```引用代码块
引用文本
连续引用
引用文本1
引用文本2
引用文本3
带空格引用
引用文本1
引用文本3
嵌套引用
引用文本1
引用文本2
引用文本3
引用其他元素
引用五级标题
print('hello world')引用代码块
有序列表
使用数字和一个英文句点表示有序列表。
注意：英文句点后面一定要有一个空格，起到缩进的作用。
可以和标题等其他markdown元素一起使用
-
有序列表文本1
-
有序分级文本1
-
-
有序列表文本2
无序列表
使用 *，+，- 表示无序列表。
注意：符号后面一定要有一个空格，起到缩进的作用。
可以和标题等其他markdown元素一起使用
-
*产生的列表
-
+号产生的列表
-
-号产生的列表
-
-
表格
# 基本格式, -|-|-|默认居左对齐
学号|姓名|分数
-|-|-|
小明|男|75
小红|女|79
# 指定表格单元格对齐方式
冒号在左边表示左对齐，右边表示有对齐，两边都有表示居中。
:-|:-:|-:
| 学号 | 姓名 | 分数 |
|---|---|---|
| 小明 | 男 | 75 |
| 小红 | 女 | 79 |
锚点
锚点其实就是页内超链接。比如我这里写下一个锚点，点击回到目录目录需要添加锚点标记: 目录{#index}，就能跳转到目录。 在目录中点击这一节，就能跳过来。格式[文本](锚点标记)
跳转到目录
注脚
[^注脚名字]:注脚文本
表情
:表情符号: 表情快捷键: command + control + E
:smile: :smiley: :smirk:
Latex数学公式
行间公式: $$公式$$
快捷键: command + option + B
数学符号
小写希腊字母:
\alpha \theta \pi \beta \phi \lambda \omega \xi \eta \epsilon \delta
空格和换行:
\quad \\
关系运算符:
\times = \neq \ne \leq \le \geq \ge > \sim \simeq \subset \subseteq \in \notin \propto
其他符号:
... \dots; ... \cdots \vdots \ddots \forall \exists
指数和下标
指数: a^{指数项}
下标: a_{下标项}
平方根运算
平方根: \sqrt{开根号项}
n次方根: \sqrt[n]{开根号项}
分数运算符
\frac{分子}{分母}
\frac{1}{x}
积分运算符
积分运算: \int_{下限}^{上限} --> \int_{0}^{\frac{\pi}{2}}
求和运算: \sum_{起始值}^{终止值} --> \sum_{i=1}^{n}
乘积运算: \prod_\epsilon
矩阵运算
\left[\begin{array}{c}
1 & 2 & 3
\end{array}\right]
\times
\left[\begin{array}{c}
1 \\
2 \\
3
\end{array}\right]
= 14
向量运算
单个向量: \vec a
从A到B向量: \overrightarrow{AB}
反向从A到B: \overleftarrow{AB}
水平大括号
\underbrace{表达式}_{底部数据} --> \underbrace{a + b + \cdots + z}_{26}
空格和换行
空格: \quad
换行: \\
水平线
上水平线: \overline{m+n}
下水平线: \underline{m+n}
Flow流程图
创建: ```flow```
语法：流程图语法分为两个部分: 前面部分用来定义流程图元素，后面部分用来连接流程图元素，指定流程图的执行走向
tag=>type: content:>url
| 标签 | 描述 |
|---|---|
| tag | 流程图元素, 在第二段连接元素时会用到。名称可以任意,一般为流程的英文缩写和数字的组合。 |
| type | 确定标签类型, =>后面表示类型。由于标签的名称可以任意指定，所以要依赖type来确定标签的类型, 标签的类型有6种: start end operation subroutine condition inputoutput |
| content | 流程图文本框中描述内容, :后面表示内容, 中英文均可。特别注意，冒号与文本之间一定要有个空格 |
| url | 一个连接，与框框中的文本相绑定，:>后面就是对应的 url 链接，点击文本时可以通过链接跳转到 url 指定页面 |
开始
st=>start: 开始
操作
op1=>operation: 操作、执行说明
条件
cond=>condition: 确认？
结束
e=>end: 结束
URL
e=>点击结束跳转:>https://www.mallai.top/
连接元素
连接流程图直接用->来连接两个元素，几点说明如下：
- 使用
->来连接两个元素
- 对于
condition类型，有yes和no两个分支，如示例中的cond(yes)和cond(no) - 每个元素可以制定分支走向，默认
向下，也可以用right指向右边，如示例中sub1(right)
st->op1->cond
cond(yes)->io->e
cond(no)->sub1(right)->op1
案例
st=>start: 开始
e=>end: 结束
c1=>condition: 条件A?
c2=>condition: 条件B?
c3=>condition: 条件C?
io=>inputoutput: 输入输出D
e1=>operation: mallAI:>https://www.mallai.top
e2=>subroutine: 子文件
st->c1(no)->e
c1(yes,right)->c2
c2(no)->e
c2(yes,right)->c3
c3(no)->e
c3(yes,right)->io
io->e1
e1->e2
e2(left)->e
flow
mermaid流程图
创建: ```mermaid```
声明图表
声明流程图，可以声明上下结构, 下上结构，左右结构，右左结构
- TB - top bottom
- BT - bottom top
- RL - right left
- LR - left right
- TD - same as TB
graph TD
Start --> Stop
graph LR
Start --> Stop
graph LR
A[Hard edge] --> B[Round edge]
B --> C{Decision}
C --> |One| D[Result One]
C --> |Two| E[Result Two]
节点形状
node表示流程图元素节点，由以下两种表示形式
graph LR
id # 默认为正方形，id为元素内文本
id[text] # id表示流程图元素唯一标识用于连接，text为元素内文本
| 节点和形状 | 描述 |
|---|---|
| id | 默认为正方形，id为元素内文本 |
| id[text] | 正方形 |
| id(text) | 圆角正方形 |
| id((text)) | 圆形 |
| id>text] | 半方框 |
| id{text} | 条件判断框 |
连接形式
A --> B # 箭头
A --- B # 无箭头实线
A -- text -- B # AB连线中添加注释
A --> |text|B # AB连线中添加注释
A-.->B # 虚线箭头
A -. text .- B # 添加注释的虚线箭头
A ==> B # 加粗箭头
A == text ==> B # 加注释加粗的箭头
graph LR
A[A] --> B(Bib)
B --> E{E}
E -- hello ---F{F}
F -->|yes|M
F -->|no|N
A --> C((circle))
C --> D>D]
D --> |NICE|H(H)
H ==> I
d --> I
f --> d
D --> f
mermaid
节点样式
graph LR
id1(Start)-->id2(Stop)
style id1 fill: #f9f,stroke:#333,stroke-width:4px
style id2 fill: #ccf,stroke:#f66,stroke-width:2px,stroke-dasharray: 5, 5
graph LR
id1(Start)-->id2(Stop)
style id1 fill: #f9f,stroke:#333,stroke-width:2px
style id2 fill: #ccf,stroke:#f66,stroke-width:2px,stroke-dasharray: 5, 5
声明子图
采用subgraph title … end可以将该区域流程图框在一个大框中
graph TB
...
subgraph one
...
end
graph TB
c1-->b1
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
mermaid_sub
mermaid时序图
创建: ```mermaid```
声明时序图
sequenceDiagram
Alice->>John: Hello John, how are you?
John-->>Alice: Great!
sequenceDiagram
Alice->>John: Hello John, how are you?
John-->>Alice: Great!
声明先后顺序
sequenceDiagram
participant John # 声明先后顺序
participant Alice
Alice->>John: Hello John, how are you?
John-->>Alice: Great!
sequenceDiagram
participant John
participant Alice
Alice->>John: Hello John, how are you?
John-->>Alice: Great!
设置别名
sequenceDiagram
participant A as Alice
participant J as John
A->>J: Hello John, how are you?
J->>A: Great!
sequenceDiagram
participant A as Alice
participant J as John
A->>J: Hello John, how are you?
J-->>A: Great!
消息连接样式
[Actor][Arrow][Actor]:Message text
| Type | Description |
|---|---|
| -> | 无箭头实线: Solid line without arrow |
| --> | 无箭头虚线: Dotted line without arrow |
| ->> | 有箭头实线: Solid line with arrowhead |
| -->> | 有箭头虚线: Dotted line with arrowhead |
| -x | 实线末端带x: Solid line with a cross at the end (async) |
| --x | 虚线末端带x: Dotted line with a cross at the end (async) |
备注文本
sequenceDiagram
participant John
participant Alice
Note right of John: Right Text
Note left of Alice: Left Text
Note over Alice: Over Text
sequenceDiagram
participant John
participant Alice
John ->> Alice: hello Alice
Alice ->> John: hello John
Note right of John: Right Text of John
Note left of Alice: Left Text of Alice
Note over Alice: Over Text of Alice
Note over John: Over Text of John
mermaid_seq
设置循环
sequenceDiagram
Alice->John: Hello John, how are you?
loop Every minute
John-->Alice: Great!
end
sequenceDiagram
Alice->John: Hello John, how are you?
loop 每五分钟
John-->Alice: 问候一句Great!
end
sequence时序图
创建: ```seq``` or ```sequence
语法:
Alice -> Bob: hello bob, how are you?
Bob -> carol: hello carol, i miss you?
carol -> ulrica: hello ulrica
carol -> Bob: hehe
Alice -> Bob: hello bob, how are you?
Bob -> carol: hello carol, i miss you?
carol -> ulrica: hello ulrica
carol -> Bob: hehe
sequence
mermaid甘特图
创建: ```mermaid```
声明甘特图
gantt
# 标题
title 标题
# 时间格式
dateFormat YYYY-MM-DD
# 任务模块
section 任务标题1
# 具体任务和时间
task1 :a1, 2014-01-01, 30d
task2 :after a1 , 20d
section 任务标题2
task1 :2014-01-12 , 12d
task2 : 24d
gantt
title 项目开发流程
dateFormat YYYY-MM-DD
section 需求分析
背景分析 :a1, 2014-01-04, 20d
原型图设计 :after a1 , 20d
需求文档 :after a1 , 20d
section 产品设计
UI设计 :2014-01-12 , 12d
图标设计 : 24d
语法详解
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
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
gantt
