markdown使用指南
优点：
1、因为是纯文本，所以只要支持Markdown的地方都能获得一样的编辑效果，可以让作者摆脱排版的困扰，专心写作。
2、操作简单。比如:WYSIWYG编辑时标记个标题，先选中内容，再点击导航栏的标题按钮，选择几级标题。要三个步骤。而Markdown只需要在标题内容前加#即可
缺点：
1、需要记一些语法（当然，是很简单。五分钟学会）。
2、有些平台不支持Markdown编辑模式。
常用语法
最常见的Markdown格式选项和键盘快捷键 [2] :
| 输出后的效果 | Markdown | 快捷键 |
|---|---|---|
| Bold | text | Ctrl/⌘ + B |
| Emphasize | text | Ctrl/⌘ + I |
| Link | title | Ctrl/⌘ + K |
| Inline Code | code |
Ctrl/⌘ + Shift + K |
| Image | !alt | Ctrl/⌘ + Shift + I |
| List | * item | Ctrl + L |
| Blockquote | > quote | Ctrl + Q |
| H1 | # Heading | |
| H2 | ## Heading | Ctrl/⌘ + H |
| H3 | ### Heading | Ctrl/⌘ + H (x2) |
标题
标题能显示出文章的结构。行首插入1-6个 # ，每增加一个 # 表示更深入层次的内容，对应到标题的深度由 1-6 阶。
- H1 :# Header 1
- H2 :## Header 2
- H3 :### Header 3
- H4 :#### Header 4
- H5 :##### Header 5
- H6 :###### Header 6
效果如下：
这是一级标题
这是二级标题
这是三级标题
这是四级标题
这是五级标题
这是六级标题
文本样式
（带“*”星号的文本样式，在原版Markdown标准中不存在，但在其大部分衍生标准中被添加）
- 链接 :Title
- 加粗 :*Bold*
- 斜体字 :Italics
- *****高亮 :==text==
- 段落 : 段落之间空一行
- 换行符 : 一行结束时输入两个空格
- 列表 :* 添加星号成为一个新的列表项。
- 引用 :> 引用内容
- 内嵌代码 :
alert('Hello World'); - 画水平线 (HR) :--------
- 方框：- [ ] -
示例：
**这是加粗的文字**
*这是倾斜的文字*`
***这是斜体加粗的文字***
~~这是加删除线的文字~~
效果如下：
这是加粗的文字
这是倾斜的文字
这是斜体加粗的文字
这是加删除线的文字
引用
在引用的文字前加>即可。引用也可以嵌套，如加两个>>三个>>>
n个...
貌似可以一直加下去，但没神马卵用
示例：
>这是引用的内容
>>这是引用的内容
>>>>>>>>>>这是引用的内容
效果如下：
这是引用的内容
这是引用的内容
这是引用的内容
分割线
三个或者三个以上的 - 或者 * 都可以。
示例：
---
----
***
*****
____
效果如下：
图片
使用Markdown将图像插入文章，你需要在Markdown编辑器输入 ![]() 。 这时在预览面板中会自动创建一个图像上传框。你可以从电脑桌面拖放图片(.png, .gif, .jpg)到上传框, 或者点击图片上传框使用标准的图像上传方式。 如果你想通过链接插入网络上已经存在的图片，只要单击图片上传框的左下角的“链接”图标，这时就会呈现图像URL的输入框。想给图片添加一个标题, 你需要做的是将标题文本插图中的方括号，e.g;![This is a title]().
语法：
图片alt就是显示在图片下面的文字，相当于对图片内容的解释。
图片title是图片的标题，当鼠标移到图片上时显示的内容。title可加可不加
示例：
效果如下：
上传本地图片直接点击导航栏的图片标志，选择图片即可
脚注
脚注不存在于标准Markdown中。
使用这样的占位符号可以将脚注添加到文本中:[^1]. 另外，你可以使用“n”而不是数字的[^n]所以你可以不必担心使用哪个号码。在您的文章的结尾，你可以如下图所示定义匹配的注脚，URL将变成链接:
`这里是脚注[^1]``[^1]: 这里是脚注的内容` `这里是脚注[^n]``[^n]: 这里是脚注的内容`
写代码
添加内嵌代码可以使用一对回勾号 alert('Hello World').对于插入代码, Ghost支持标准的Markdown代码和GitHub Flavored Markdown (GFM) [3] 。标准Markdown基于缩进代码行或者4个空格位:
<header>
<h1>{{title}}</h1>
</header>
GFM 使用三个回勾号```
`´´´``<``header``>`` ``<``h1``>{{title}}</``h1``>``</``header``>``´´´`
例子
链接
`This is a paragraph that contains a [link to example]()`
列表格式
`This paragraph contains a list of items.` `* Item 1` `* Item 2` `* Item three`
使用Markdown 引用文本：
`This paragraph has a quote` `> That is pulled out like this``from the text my post.`
表格
一、 极简方式
name | 价格 | 数量
-|-|-
香蕉 | $1 | 5 |
苹果 | $1 | 6 |
草莓 | $1 | 7 |
呈现方式
| name | 价格 | 数量 |
|---|---|---|
| 香蕉 | $1 | 5 |
| 苹果 | $1 | 6 |
| 草莓 | $1 | 7 |
二、简单方法
name | 111 | 222 | 333 | 444
- | :-: | :-: | :-: | -:
aaa | bbb | ccc | ddd | eee|
fff | ggg| hhh | iii | 000|
呈现方式
| name | 111 | 222 | 333 | 444 |
|---|---|---|---|---|
| aaa | bbb | ccc | ddd | eee |
| fff | ggg | hhh | iii | 000 |
三、原生方法
name | 111 | 222 | 333 | 444
:-: | :-: | :-: | :-: | :-:
aaa | bbb | ccc | ddd | eee|
fff | ggg| hhh | iii | 000|
呈现方式
| name | 111 | 222 | 333 | 444 |
|---|---|---|---|---|
| aaa | bbb | ccc | ddd | eee |
| fff | ggg | hhh | iii | 000 |
三、区别
简单方法虽然是稍微简单了些，但是前后因为没有格式所以第一列和最后一列没有居中，对于极简方式来说还相当繁琐。极简方式简单，但是都是左对齐。原生方式格式更美观。个人意见强迫症患者请用原生方式，其他请随意。
四、语法说明
1）|、-、:之间的多余空格会被忽略，不影响布局。
2）默认标题栏居中对齐，内容居左对齐。
3）-:表示内容和标题栏居右对齐，:-表示内容和标题栏居左对齐，:-:表示内容和标题栏居中对齐。
4）内容和|之间的多余空格会被忽略，每行第一个|和最后一个|可以省略，-的数量至少有一个。
Mathjax 公式
可以创建行内公式，例如：$\Gamma(n) = (n-1)!\quad\forall n\in\mathbb N$
或者块级公式，
$$ x = \dfrac{-b \pm \sqrt{b^2 - 4ac}}{2a} $$
点击保存后的效果：
diff
diff # 下面是案例 + 新增的内容 - 删减的内容
mermaid
https://zhuanlan.zhihu.com/p/172635547
Mermaid 支持绘制非常多种类的图，常见的有时序图、流程图、类图、甘特图等等。下面分享一下如何绘制这些图，语法非常容易掌握。
先在 Typora 中，输入 ```mermaid 然后敲击回车，即可初始化一张空白图。
Graph
https://blog.csdn.net/Subson/article/details/78054689
graph LR
A –-> B
graph LR
A --> B
流程图的定义仅由graph开始，但是方向的定义不止一种。
- TB（ top bottom）表示从上到下
- BT（bottom top）表示从下到上
- RL（right left）表示从右到左
- LR（left right）表示从左到右
- TD与TB一样表示从上到下
节点
有以下几种节点和形状：
默认节点 A
文本节点 B[bname]
圆角节点 C(cname)
圆形节点 D((dname))
非对称节点 E>ename]
菱形节点 F{fname}
以上大写字母表示节点，name表示它的名字，如下图。默认节点的A同时表示该节点和它的名字，例如上图的A和B。
graph TB
A
B[Bname]
C(Cname)
D((Dname))
E>Ename]
F{Fname}
graph TB
A
B[Bname]
C(Cname)
D((Dname))
E>Ename]
F{Fname}
连线
节点间的连接线有多种形状，而且可以在连接线中加入标签：
箭头连接 A1–>B1
开放连接 A2—B2
标签连接 A3–text—B3 或者 A3—|text|B3
箭头标签连接 A4–text –>B4 或者 A4–>|text|B4
虚线开放连接 A5.-B5 或者 A5-.-B5 或者 A5..-B5
虚线箭头连接 A6.->B6 或者 A6-.->B6
标签虚线连接 A7-.text.-B7
标签虚线箭头连接 A8-.text.->B8
粗线开放连接 A9===B9
粗线箭头连接 A10==>B10
标签粗线开放连接 A11==text===B11
标签粗线箭头连接 A12==text==>B12
graph TB
A1-->B1
A2---B2
A3--test---B3
A4--text-->B4
A5-.-B5
A5-.-B5
A6-.->B6
A7-.test.-B7
A8-.test.->B8
A9===B9
A10==>B10
A11==test===B11
A12==test==>B12
graph TB
A1-->B1
A2---B2
A3--test---B3
A4--text-->B4
A5-.-B5
A5-.-B5
A6-.->B6
A7-.test.-B7
A8-.test.->B8
A9===B9
A10==>B10
A11==test===B11
A12==test==>B12
Gliffy Diagram
流程图1
语法解释：graph 关键字就是声明一张流程图，TD 表示的是方向，这里的含义是 Top-Down 由上至下。
```mermaid
graph TD;
A-->B;
A-->C;
B-->D;
```
graph TD;
A-->B;
A-->C;
B-->D;
流程图2
```flow
flow
st=>start: Start
e=>end: End
op1=>operation: My Operation
sub1=>subroutine: My Subroutine
cond=>condition: Yes or No?
io=>inputoutput: catch something...
st->op1->cond
cond(yes)->io->e
cond(no)->sub1(right)->op1
```
保存后效果：
flow
st=>start: Start
e=>end: End
op1=>operation: My Operation
sub1=>subroutine: My Subroutine
cond=>condition: Yes or No?
io=>inputoutput: catch something...
st->op1->cond
cond(yes)->io->e
cond(no)->sub1(right)->op1
注意：
- 关键词（start、end、operation、subroutine、condition和inputoutput）后的冒号后要紧跟一个空格。
- 使用->来连接两个元素，对于condition类型，有yes和no两个分支，如示例中的cond(yes)和cond(no)。
更多关于流程图的语法说明：http://adrai.github.io/flowchart.js/
流程图3
graph TB
graph TB
st(开始)-->op[操作]
op-->co{是或不是}
co--no-->sub((子程序))
sub-->op
co--yes-->out>输出]
out-->en(结束)
时序图1
语法解释：->> 代表实线箭头，-->> 则代表虚线。
```mermaid
sequenceDiagram
Alice->>John: Hello John, how are you?
John-->>Alice: Great!
```
sequenceDiagram
Alice->>John: Hello John, how are you?
John-->>Alice: Great!
时序图2
```mermaid
sequence
Alice->Bob: Hello Bob, how are you?
Note right of Bob: Bob thinks
Bob-->Alice: I am good thanks!
```
保存后效果：
Alice->Bob: Hello Bob, how are you?
Note right of Bob: Bob thinks
Bob-->Alice: I am good thanks!
更多关于时序图的语法说明：http://bramp.github.io/js-sequence-diagrams/
状态图
语法解释：[*] 表示开始或者结束，如果在箭头右边则表示结束。
```mermaid
stateDiagram
[*] --> s1
s1 --> [*]
```
stateDiagram
[*] --> s1
s1 --> [*]
类图
语法解释：<|-- 表示继承，+ 表示 public，- 表示 private，学过 Java 的应该都知道。
classDiagram
Animal <|-- Duck
Animal <|-- Fish
Animal <|-- Zebra
Animal : +int age
Animal : +String gender
Animal: +isMammal()
Animal: +mate()
class Duck{
+String beakColor
+swim()
+quack()
}
class Fish{
-int sizeInFeet
-canEat()
}
class Zebra{
+bool is_wild
+run()
}
classDiagram
Animal <|-- Duck
Animal <|-- Fish
Animal <|-- Zebra
Animal : +int age
Animal : +String gender
Animal: +isMammal()
Animal: +mate()
class Duck{
+String beakColor
+swim()
+quack()
}
class Fish{
-int sizeInFeet
-canEat()
}
class Zebra{
+bool is_wild
+run()
}
甘特图
甘特图一般用来表示项目的计划排期，目前在工作中经常会用到。
语法也非常简单，从上到下依次是图片标题、日期格式、项目、项目细分的任务。
gantt
title 工作计划
dateFormat YYYY-MM-DD
section Section
A task :a1, 2020-01-01, 30d
Another task :after a1 , 20d
section Another
Task in sec :2020-01-12 , 12d
another task : 24d
gantt
title 工作计划
dateFormat YYYY-MM-DD
section Section
A task :a1, 2020-01-01, 30d
Another task :after a1 , 20d
section Another
Task in sec :2020-01-12 , 12d
another task : 24d
饼图
饼图使用 pie 表示，标题下面分别是区域名称及其百分比。
pie
title Key elements in Product X
"Calcium" : 42.96
"Potassium" : 50.05
"Magnesium" : 10.01
"Iron" : 5
pie
title Key elements in Product X
"Calcium" : 42.96
"Potassium" : 50.05
"Magnesium" : 10.01
"Iron" : 5
导出
绘制好的图片可以选择菜单/文件/导出，导出为图片或者网页格式。在网页中图片是以 SVG 格式渲染的，你可以复制 SVG 内容，导入到 SVG 的图片编辑器中进一步操作。
Mermaid 官方有一个在线的工具，可以导出 SVG 和 PNG。
https://mermaid-js.github.io/mermaid-live-editor/
字体颜色
使用代码
```
<font color=red>你的内容
```
效果:
你的内容
html折叠
缺点：不能使用换行符
http://www.jquerycn.cn/a_35792
使用代码
<details>
<summary>安装脚本</summary>
<pre>
测试内容
效果：
安装脚本
测试内容安装脚本
``` 测试内容 ```Typora模板
C:\Users\xxx\AppData\Roaming\Typora\github.css
拷贝到：
C:\Users\xxx\AppData\Roaming\Typora\themes下0