Markdown编辑器

---

Markdown 是一种常见的 标记语言 (非编程语言)，它能帮助我们快速排版文档。以下为Markdown的一些基本语法知识。

1、标题

Markdown中有六种标题，用#表示，字体大小逐渐递减

@[TOC](这里写目录标题)
# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题 

2、换行

使用html中的换行标签<br/>

3、分割线

Markdown中有两种分割方式：

• 用 *** 表示
• 使用html标签<hr/>

4、转义

当我们在符号前加上 \ 它就会转义，不会产生应有效果

\> 这里不是引用
\# 这里不是标题

5、文本样式

*强调文本* _强调文本_ （斜体）

**加粗文本** __加粗文本__

==标记文本== （高亮）

~~删除文本~~

> 引用文本

H~2~O 是液体。

2^10^ 运算结果是 1024.

斜体
粗体

6、待办事项

 - [ ] 未完成事项
 - [x] 已完成事项

• 未完成事项
• 已完成事项

7、超链接与图片

二者区别为一个 ! 的区别。

格式：
[显示文本 ](链接)
![图片无法显示时，显示的文字](图片链接)

示例：
链接——[优快云](https://www.youkuaiyun.com/)
图片——![程序员小猴](https://i-blog.csdnimg.cn/blog_migrate/2c5626d1121945cb84be5bc1cdd2de45.gif)
带尺寸图片——![程序员小猴](https://i-blog.csdnimg.cn/blog_migrate/2c5626d1121945cb84be5bc1cdd2de45.gif =30x30)
居中图片——![程序员小猴](https://i-blog.csdnimg.cn/blog_migrate/2c5626d1121945cb84be5bc1cdd2de45.gif#pic_center)
居中且带尺寸图片——![程序员小猴](https://i-blog.csdnimg.cn/blog_migrate/2c5626d1121945cb84be5bc1cdd2de45.gif#pic_center =30x30)

链接: 优快云

图片:

带尺寸的图片:

居中的图片:

居中并且带尺寸的图片:

8、代码

格式：
```key
code
```

public void test

9、列表

无序列表文字前面加-，有序加数字，注意空格！

无序列表：
- 项目1
  - 项目1.1
  - 项目1.2

有序列表：
1. 项目1
2. 项目2
3. 项目3

创建一个自定义列表

Markdown
:  Text-to-HTML conversion tool

Authors
:  John
:  Luke

Markdown

Text-to- HTML conversion tool

Authors

John

Luke

10、表格

格式:
标题1|标题2|标题3
-----|-----|----
内容1|内容2|内容3
内容4|内容4|内容4

一个简单的表格的创建：

项目	Value
电脑	$1600
手机	$12
导管	$1

设定内容居中、居左、居右

使用:---------:居中
使用:----------居左
使用----------:居右

第一列	第二列	第三列
第一列文本居中	第二列文本居右	第三列文本居左

SmartyPants

SmartyPants将ASCII标点字符转换为“智能”印刷标点HTML实体。例如：

TYPE	ASCII	HTML
Single backticks	'Isn't this fun?'	‘Isn’t this fun?’
Quotes	"Isn't this fun?"	“Isn’t this fun?”
Dashes	-- is en-dash, --- is em-dash	– is en-dash, — is em-dash

11、注脚

一个具有注脚的文本。[^2]
[^2]: 注脚的解释

示例：一个具有注脚的文本。¹

12、注释

Markdown将文本转换为HTML。
*[HTML]:   超文本标记语言

示例：Markdown将文本转换为 HTML。

13、功能快捷键

撤销：Ctrl/Command + Z
重做：Ctrl/Command + Y
加粗：Ctrl/Command + B
斜体：Ctrl/Command + I
标题：Ctrl/Command + Shift + H
无序列表：Ctrl/Command + Shift + U
有序列表：Ctrl/Command + Shift + O
检查列表：Ctrl/Command + Shift + C
插入代码：Ctrl/Command + Shift + K
插入链接：Ctrl/Command + Shift + L
插入图片：Ctrl/Command + Shift + G
查找：Ctrl/Command + F
替换：Ctrl/Command + G

14、LaTeX数学公式

参考文档
Gamma公式展示 $\Gamma (n)=(n-1)!\forall n\in \mathbb{N}$ 是通过 Euler integral 欧拉积分

$$\Gamma (z)={\int }_0^{\infty }{t}^{z-1}{e}^{-t}dt.$$

你可以找到更多关于的信息 LaTeX 数学表达式here.

15、甘特图功能

```mermaid
gantt
        dateFormat  YYYY-MM-DD
        title Adding GANTT diagram functionality to mermaid
        section 现有任务
        已完成               :done,    des1, 2014-01-06,2014-01-08
        进行中               :active,  des2, 2014-01-09, 3d
        计划中               :         des3, after des2, 5d

• 关于 甘特图 语法，参考 这儿,

16、UML 图表

可以使用UML图表进行渲染。 Mermaid. 例如下面产生的一个序列图：

```mermaid
sequenceDiagram
张三 ->> 李四: 你好！李四, 最近怎么样?
李四-->>王五: 你最近怎么样，王五？
李四--x 张三: 我很好，谢谢!
李四-x 王五: 我很好，谢谢!
Note right of 王五: 李四想了很长时间, 文字太长了<br/>不适合放在一行.

李四-->>张三: 打量着王五...
张三->>王五: 很好... 王五, 你怎么样?

```mermaid
graph LR
A[长方形] -- 链接 --> B((圆))
A --> C(圆角长方形)
B --> D{菱形}
C --> D

这将产生一个流程图。:

• 关于 Mermaid 语法，参考 这儿,

17、类图

参考文档

```mermaid
classDiagram
    Class01 <|-- AveryLongClass : Cool
    <<interface>> Class01
    Class09 --> C2 : Where am i?
    Class09 --* C3
    Class09 --|> Class07
    Class07 : equals()
    Class07 : Object[] elementData
    Class01 : size()
    Class01 : int chimp
    Class01 : int gorilla
    class Class10 {
        >>service>>
        int id
        size()
    }

18、FLowchart流程图

我们依旧会支持flowchart的流程图：

```mermaid
flowchat
st=>start: 开始
e=>end: 结束
op=>operation: 我的操作
cond=>condition: 确认？

st->op->cond
cond(yes)->e
cond(no)->op

• 关于 Flowchart流程图 语法，参考 这儿.

Markdown编辑器——Typora

• Typora

Typora界面简洁、主题精美、支持多平台。Typora是一款轻便简洁的Markdown编辑器,支持即时渲染技术,这也是与其他Markdown编辑器最显著的区别.重点是免费!

Download：Windows版官网下载
Theme：可以到Typora官网下载自己喜欢的 主题 （压缩包形式）

下载好主题后，在Typora中选择：主题 - 打开主题文件夹，将“解压缩的文件”放进去即可，接下来在主题中就能看见自己的主题啦！

---

1. 注脚的解释 ↩︎