本文已参与「新人创作礼」活动，一起开启掘金创作之路。
前言
在校生小张，第一次发稀土掘金，水一期markdown！ 以前一直用记事本、word去做笔记，之后转为了onenote，但是它的服务器是微软，所以同步笔记有时候会失败。最近发现了typora这个软件，仅200M，使用上比word快捷很多倍，对写文章，博客，做代码笔记的朋友非常友好。 typora安装包 提取码：2580 也可以自行去官网下载typora
标题
# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题
字体
*倾斜*
**加粗**
***斜体加粗***
_斜体文本_
__粗体文本__
___粗斜体文本___
~~删除线~~
==高亮==
我是^上标^
我是~下标~（注意英文字符)
<span style='color:文字颜色;background:背景颜色;font-size:文字大小;font-family:字体;'>文字</span>。颜色可以使用RGB、英文、#十六进制
<font size=6 color="violet" face="黑体">字体颜色为紫罗兰，大小为6</font>
<p align="left/right/center">左对齐</p>
分割线
+++
---
***
脚注
创建脚注格式类似这样 [^RUNOOB]。
[^RUNOOB]: 菜鸟教程 -- 学的不仅是技术，更是梦想！！！
创建脚注格式类似这样 1
页面内跳转
需要按住ctrl点击
[内容](#标题)
<a href="#第二种跳转">内容</a>
<a name="第二种跳转">内容</a>
页面链接地址
网页
[百度](www.baidu.com)
<www.baidu.com>
本地文件
[打开入门markdown](./LinkTest.md) 绝对地址相对地址都可以
图片
<img src="img/1.jpg" width="" height="" style="float:left/right/center"/>
本地图片可以直接复制
网页右击查看图片链接即可
数学公式
第一种内联公式：$数学公式$
第二种外联公式(公式内换行\\)：
$$
数学公式
$$
我是^上标^
我是~下标~（注意英文字符)
根号\sqrt{} \sqrt[]{}
$下水平线：\underline{a+b}$
$上水平线：\overline{a+b}$
上下水平大括号:
\overbrace{} \underbrace{}
在括号上添加说明:
$\overbrace{x_1+x_2+x_3}^{3个元素}$
$\underbrace{x_1+x_2+x_3}_{3个元素}$
其他Typora数学公式汇总（Markdown） - 知乎 (zhihu.com)
列表
无序列表 +、-、*都可以
+ 一二三四五
- 上山打老虎
* 老虎没达到
有序列表
1.一二三四五
2.上山打老虎
3.老虎没达到
4.打到小松鼠
表格
| ------ | ------ | ------ | ------ | :----: |
| 上山 | 上山 | 上山 | 上山 | 上山 |
| 打老虎 | 打老虎 | 打老虎 | 打老虎 | 打老虎 |```
不在代码模式下，按回车
```
:-表示左对齐
-:表示右对齐
:-:表示中间对齐
引用
>>上山大老虎
>>
>>>老虎没达到
>
>>>>打到小松鼠
代码块
代码
`代码`
代码框
```
我是代码框
```
插入表情
我们可以使用:emoji:的语法来插入表情，比如：
:happy:的语法为:happy:
🦀的语法为:crab:
🐴的语法为:horse:
插入目录
当我们为使用标题将文分章节后，可以在输入[toc]命令的地方自动根据标题生成目录
HTML
目前支持的 HTML 元素有：<kbd> 粗体<b> 斜体<i> 或 <em> 上角标<sup> 换行<br> 块元素<div> 行内元素<span> 段落<p>
自定义文本<font> 图片<img>
<kbd>Alt</kbd>
Alt
任务
任务列表 - [空格]空格
任务列表 - []
图
纵向流程图
graph TD;
A-->B;
A-->C;
B-->D;
graph TD;
A-->B;
A-->C;
B-->D;
横向流程图
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[横向流程图]
标准流程图 纵向
st=>start: 开始框
op=>operation: 处理框
cond=>condition: 判断框(是或否?)
sub1=>subroutine: 子流程
io=>inputoutput: 输入输出框
e=>end: 结束框
st->op->cond
cond(yes)->io->e
cond(no)->sub1(right)->op
标准流程图 横向
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
时序图
sequenceDiagram
Alice->>John: Hello John, how are you?
John-->>Alice: Great!
sequenceDiagram
Alice->>John: Hello John, how are you?
John-->>Alice: Great!
UML时序图源码样例
对象A->对象B: 对象B你好吗?（请求）
Note right of 对象B: 对象B的描述
Note left of 对象A: 对象A的描述(提示)
对象B-->对象A: 我很好(响应)
对象A->对象B: 你真的好吗？
sequenceDiagram
对象A->>对象B: 对象B你好吗?（请求）
Note right of 对象B: 对象B的描述
Note left of 对象A: 对象A的描述(提示)
对象B-->>对象A: 我很好(响应)
对象A->>对象B: 你真的好吗？
UML时序图源码复杂样例
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: 没人陪我玩
sequenceDiagram
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: 没人陪我玩
UML标准时序图样例
%% 时序图例子,-> 直线，-->虚线，->>实线箭头
sequenceDiagram
participant 张三
participant 李四
张三->王五: 王五你好吗？
loop 健康检查
王五->王五: 与疾病战斗
end
Note right of 王五: 合理 食物 <br/>看医生...
李四-->>张三: 很好!
王五->李四: 你怎么样?
李四-->王五: 很好!
%% 时序图例子,-> 直线，-->虚线，->>实线箭头
sequenceDiagram
participant 张三
participant 李四
张三->王五: 王五你好吗？
loop 健康检查
王五->王五: 与疾病战斗
end
Note right of 王五: 合理 食物 <br/>看医生...
李四-->>张三: 很好!
王五->李四: 你怎么样?
李四-->王五: 很好!
状态图
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()
}
甘特图
甘特图一般用来表示项目的计划排期，目前在工作中经常会用到。
语法也非常简单，从上到下依次是图片标题、日期格式、项目、项目细分的任务。
crit表示加红框，已做done，正在做active，未作after
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
%% 语法示例
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
测试报告 : 48h
饼图
饼图使用 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
快捷键
- ctrl+ 增加标题等级
- ctrl+shift+加号/减号可以对整体页面进行放大/缩小
- 键盘右侧home定位到第一行，end定位到文章末尾
- ctrl+shift+【 有序列表，ctrl+shift+】对段落标小点（无序列表）
- ctrl+横排数字键n，可将字体设置为n级标题
- 选择对应语言，shift+tab整理代码
Pandoc
利用插件转出PDF、word、图片、HTML、EPUB等格式
链接 提取码：2580
安装软件
1）首先打开下载好的安装包 pandoc-2.0.1.1-windows.msi
2）不用更改设置，傻瓜式操作，下一步下一步完成
3）软件安装成功
测试是否安装成功 1）打开CMD命令提示符
2）输入pandoc --version命令
3）会显示出pandoc的版本信息，则说明安装成功了
之后在typora配置pandon文件路径,这个是我的默认路径(C:\Users\86158\AppData\Local\Pandoc\pandoc.exe)
Footnotes
-
122 ↩
