文章目录
前言
今日突然发现，虽然我一直使用csdn的Markdown编辑器但从未学习它。便写一篇博客记录学习内容方便查阅。
一、Markdown是什么？
Markdown是一种轻量级标记语言，创始人为约翰·格鲁伯（英语：John Gruber）。 它允许人们使用易读易写的纯文本格式编写文档，然后转换成有效的XHTML（或者HTML）文档。这种语言吸收了很多在电子邮件中已有的纯文本标记的特性。
由于Markdown的轻量化、易读易写特性，并且对于图片，图表、数学式都有支持，目前许多网站都广泛使用Markdown来撰写帮助文档或是用于论坛上发表消息。 如GitHub、Reddit、Diaspora、Stack Exchange、OpenStreetMap 、SourceForge、简书等，甚至还能被使用来撰写电子书。
一句话总结，它实际上是个非常简单、非常容易学习的排版语法。
二、Markdown基本语法
1.标题
行首插入 1 到 6 个 # ，对应到标题 1 到 6 阶，(可闭合)例如：
# 这是 H1 #
## 这是 H2
###### 这是 H6
效果：
2.列表
Markdown 支持有序列表和无序列表。
- 无序列表使用星号、加号或是减号作为列表标记：
* Red
* Green
* Blue
等同于：
+ Red
+ Green
+ Blue
也等同于：
- Red
- Green
- Blue
效果：
- Red
- Green
- Blue
- 有序列表则使用数字接着一个英文句点：
1. Bird
2. McHale
3. Parish
效果：
4. Bird
5. McHale
6. Parish
很重要的一点是，你在列表标记上使用的数字并不会影响输出的 HTML 结果
3.分隔线
你可以在一行中用三个以上的星号、减号、底线来建立一个分隔线，行内不能有其他东西。你也可以在星号或是减号中间插入空格。下面每种写法都可以建立分隔线：
* * *
***
*****
- - -
---------------------------------------
效果：
4.链接
Markdown 支持链接语法
This is [an example](http://example.com/ "Title") inline link.
效果：
This is an example inline link.
5.加粗
Markdown 使用星号（）和底线（_）作为标记强调字词的符号，被 * 或 _ 包围的字词会被转成用 标签包围，用两个或_包起来的话，则会被转成，例如：
*single asterisks*
_single underscores_
**double asterisks**
__double underscores__
效果：
single asterisks
double asterisks
6.图片
很明显地，要在纯文字应用中设计一个「自然」的语法来插入图片是有一定难度的。
Markdown 使用一种和链接很相似的语法来标记图片
详细叙述如下：
- 一个惊叹号 !
- 接着一个方括号，里面放上图片的替代文字
- 接着一个普通括号，里面放上图片的网址，最后还可以用引号包住并加上 选择性的 ‘title’ 文字。
效果 ：
7.反斜杠
Markdown 可以利用反斜杠来插入一些在语法中有其它意义的符号，例如：如果你想要用星号加在文字旁边的方式来做出强调效果（但不用 `` 标签），你可以在星号的前面加上反斜杠：
\*literal asterisks\*
效果：
*literal asterisks*
Markdown 支持以下这些符号前面加上反斜杠来帮助插入普通的符号：
\ 反斜线
` 反引号
* 星号
_ 底线
{} 花括号
[] 方括号
() 括弧
# 井字号
+ 加号
- 减号
. 英文句点
! 惊叹号
8.代办
- [ ] 写博客
【】中有X即为完成
效果：
- 玩给他爱
- 写博客
9.删除线
~~删除线格式~~
效果：
删除线格式
10.表格
| 表头 | 表头 |
| ---- | ---- |
| 单元格 | 单元格 |
| 单元格 | 单元格 |
效果：
| 姓名 | 性别 |
|---|---|
| 张三 | 男 |
11.Markdown 高级技巧
- 支持的 HTML 元素
不在 Markdown 涵盖范围之内的标签，都可以直接在文档里面用 HTML 撰写。
目前支持的 HTML 元素有：<kbd> <b> <i> <em> <sup> <sub> <br>等 ，如：
使用 <kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Del</kbd> 重启电脑
效果：
使用 Ctrl+Alt+Del 重启电脑
三、Typora的使用
1.安装
找到typora官网，点击download选择对于应版本下载安装包，安装。
2.使用 Typora 显示数学公式
当你需要在编辑器中插入数学公式时，可以使用两个美元符 $$ 包裹 TeX 或 LaTeX 格式的数学公式来实现。提交后，问答和文章页会根据需要加载 Mathjax 对数学公式进行渲染。如下：
1. 首先打开typora选择视图——源代码模式（如下图）：
2. 输入代码
$$
\mathbf{V}_1 \times \mathbf{V}_2 = \begin{vmatrix}
\mathbf{i} & \mathbf{j} & \mathbf{k} \\
\frac{\partial X}{\partial u} & \frac{\partial Y}{\partial u} & 0 \\
\frac{\partial X}{\partial v} & \frac{\partial Y}{\partial v} & 0 \\
\end{vmatrix}
${$tep1}{\style{visibility:hidden}{(x+1)(x+1)}}
$$
退出源代码模式
3. 效果
3. 使用 Typora 画图（类图、流程图、时序图）
首先进入源代码模式 然后输入 ```mermaid 然后敲击回车，即可初始化一张空白图，输入下列代码，后退出源代码模式即可展现效果。
- 流程图
语法解释：graph 关键字就是声明一张流程图，TD 表示的是方向，这里的含义是 Top-Down 由上至下。
graph TD;
A-->B;
A-->C;
B-->D;
- 时序图
语法解释：->> 代表实线箭头，-->> 则代表虚线。
sequenceDiagram
Alice->>John: Hello John, how are you?
John-->>Alice: Great!
- 状态图
语法解释：[*] 表示开始或者结束，如果在箭头右边则表示结束。
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()
}
- 甘特图
甘特图一般用来表示项目的计划排期，目前在工作中经常会用到。
语法也非常简单，从上到下依次是图片标题、日期格式、项目、项目细分的任务。
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
title Key elements in Product X
"Calcium" : 42.96
"Potassium" : 50.05
"Magnesium" : 10.01
"Iron" : 5
总结与参考资料
本文仅仅简单介绍了Markdown入门和Typora的使用方法，更多内容请自己查寻，希望能帮助到你。
参考资料
使用 Typora 画图（类图、流程图、时序图）
Mermaid
Markdown 语法说明 (简体中文版)
Typora 完全使用详解
Markdown 教程
1455
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
