Markdown编辑器的使用方法

本文目录

Markdown介绍
快捷键
1、标题
2、粗体/斜体/删除线/字体底色
3、上标/下标
4、无序排列
5、有序排列
6、待办事项
7、引用
8、脚注
9、自动注释
10、链接
- a) 地址链接
- b) 文字链接
11、图片链接
- a) 一般图片
- b) 带尺寸图片
- c) 图片居中
- d) 图片居中且带尺寸
12、参考式链接
13、表格
14、代码块
高端用法：
1、Latex数学公式
2、甘特图
4、Mermaid流程图
5、Flowchart流程图
导出与导入
离线写博客
最后

Markdown介绍

Markdown 是一种轻量级标记语言，它允许人们使用易读易写的纯文本格式编写文档，然后转换成格式丰富的HTML页面。这几年Markdown编辑器以其独到的优势迅速火起来了，很多写作平台都开始支持了。
Markdown语法常用的也就十个左右，Markdown编辑器深受技术人员和效率写手的喜爱，很多Markdown编辑器还可以轻松地将文本转换为pdf等格式。

快捷键

助记：其中四个命令是Ctrl+字母（同office里面一样），其余的都是Ctrl+shift+字母。

撤销：Ctrl + Z（同office一样）
重做：Ctrl + Y（同office一样）
标题：Ctrl + Shift + H（标题的英文是headline，所以取字母H）
加粗：Ctrl + B（同office一样）
插入链接：Ctrl + Shift + L（链接的英文是Link，所以取字母L）
插入代码：Ctrl + Shift + K（本来可以用Code的字母C，但是C被人用了，K是Keyword的意思，因为代码语法高亮显示，主要是显示keyword）
插入图片：Ctrl + Shift + G（图形是Graphic，取字母G）
有序列表：Ctrl + Shift + O（有序的是Order，取字母O）
无序列表：Ctrl + Shift + U（无序的是Unordered，取字母U）
横线：Ctrl + Shift + R（这个我也不知道为什么……）
斜体：Ctrl + I（同office一样）
引用：Ctrl + Shift + Q（引用是Quote，取字母Q）

1、标题

助记：#+空格，1个#号表示1级标题，6个#表示6级标题，#号越多字体越小。

# 标题1
## 标题2
### 标题3
#### 标题4
##### 标题5
###### 标题6

2、粗体/斜体/删除线/字体底色

**粗体是每边两个星号**

粗体是每边两个星号

*斜体是每边一个星号*

斜体是每边一个星号

~~删除线是每边两个波浪线~~

删除线是每边两个波浪线

==字体底色是每边两个等号==

字体底色是每边两个等号

3、上标/下标

助记：上标每边一个^符号

2^10^ 运算结果是 1024。

2¹⁰ 运算结果是 1024。

助记：下标每边一个~符号

H~2~O 就是水。

H₂O 就是水。

4、无序排列

助记：列表分为三种无序列表、有序列表、待办事项列表。
无序列表是：-（减号）+空格，或：*+空格，或：+（加号）+空格，效果都是一样的，样式只有小黑点一种。

- 无序
* 无序
+ 无序

无序
无序
无序

5、有序排列

助记：有序列表是：数字+.(英文句号)+空格，样式只有数字一种。

1. 有序
2. 有序
3.  有序

有序
有序
有序

6、待办事项

助记：计划事项是：-（减号）+空格+[+空格+]+空格
已完成事项：-（减号）+空格+[+字母x（大小写都可以）+]+空格

- [ ] 计划任务
- [x] 完成任务

计划任务
完成任务

7、引用

引用主要用于形成一个带底色的方框，表示引用其他的文字或说明。
助记：>(大于号)+空格

> 这里是引用的文字

这里是引用的文字

8、脚注

脚注是对某一段话，某一个词的备注说明，专业性表格或技术论文中经常使用。

助记(引用)：[^数字]

这是一段话[^1]
这是二段话[^2]

这是一段话¹
这是二段话²

助记：冒号[^数字]

[^1]:这是脚注1
[^2]:这是脚注2

脚注的内容可以写在任何地方，但预览或发布时会自动显示在页面最底下，并在上面添加一个分割线。

9、自动注释

脚注是对某一段话，某一个词的专有说明，而自动注释可以对文中所有出现的某个词进行说明，并以鼠标提示的方式进行说明。
助记：被说明的词前后空格或跟着标点符号，
注释内容：*[某个词]:要提示的说明文字

Markdown兼容标准的 HTML 语法。
*[HTML]:一种超文本标记语言、

Markdown兼容标准的 HTML 语法。

10、链接

助记：常用链接有三种，地址链接，文字链接，图片链接(参见下文单独的说明)

a) 地址链接

助记：<http开头的地址>

<https://www.baidu.com>

https://www.baidu.com

b) 文字链接

助记：[文字内容](http开头的地址)

[百度](https://www.baidu.com/)

百度

11、图片链接

a) 一般图片

助记：

![图片提示性文字，可不(图片地址)图片地址)]
在一般文字链接前面多了一个叹号！

例如：
![头像](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9hdmF0YXIuY3Nkbi5uZXQvMS9GL0YvM19kYXZpZGh6cS5qcGc?x-oss-process=image/format,png)
显示如下的头像图标：

b) 带尺寸图片

助记：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5kGfaApq-1574737893971)(图片地址 =尺寸)]，=号前面有空格
在末尾多了一个 =号

例如：
![头像](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9hdmF0YXIuY3Nkbi5uZXQvMS9GL0YvM19kYXZpZGh6cS5qcGc?x-oss-process=image/format,png# =130x130)
显示如下的头像图标：

c) 图片居中

助记：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vyyPPfts-1574737893978)(图片地址#pic_center)]，#号前面不能有空格

例如：
![头像](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9hdmF0YXIuY3Nkbi5uZXQvMS9GL0YvM19kYXZpZGh6cS5qcGc?x-oss-process=image/format,png#pic_center)
显示如下的头像图标：

d) 图片居中且带尺寸

助记：将上述两者结合即可

例如：
![头像](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9hdmF0YXIuY3Nkbi5uZXQvMS9GL0YvM19kYXZpZGh6cS5qcGc?x-oss-process=image/format,png#pic_center =130x130)
显示如下的头像图标：

12、参考式链接

CSDN目前不支持这种链接，它用的也比较少，使用上有点类似于脚注。脚注是给某段文字加文字性说明，参考式链接是给某段文字加链接。类似于HTML中的文章内部锚和命名。

13、表格

表格的语法格式如下：竖线表示表格每一列，横线以上是表头，其余表格线系统自动添加。

项目        | 价格
------- | ---
电脑      | ￥5600
电话  | ￥3500
PAD     | ￥2000

项目	价格
电脑	￥5600
电话	￥3500
PAD	￥2000

可以使用冒号来定义对齐方式：

使用 :---------: 居中（或者没有:号，默认也是居中）
使用 :----------居左
使用----------: 居右

项目       | 价格
:-------    | :---
电脑      | ￥5600
电话  | ￥3500
PAD     | ￥2000

项目	价格
电脑	￥5600
电话	￥3500
PAD	￥2000

14、代码块

助记：```开始，```结束，中间是代码，`是键盘数字1前面那个按键，开始标记后面可插入编程语言的名字，CSDN支持常见的十几多种编程语言，如图：

　```javascript//代码高亮显示例子var aa= 'this';var bb= 'that';let cc= aa+ bb;```

效果如下：

//代码高亮显示例子
var aa= 'this';
var bb= 'that';
let cc= aa+ bb;

高端用法：

1、Latex数学公式

CSDN可以使用latex语法来渲染数学公式，例如：

Gamma公式展示 $\Gamma(n) = (n-1)!\quad\forall
n\in\mathbb N$ 是通过欧拉积分
$$
\Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,.
$$

Gamma公式展示 KaTeX parse error: Undefined control sequence: \foralln at position 60: …) = (n-1)!\quad\̲f̲o̲r̲a̲l̲l̲n̲\in\mathbb NΓ(z)=∫0∞tz−1e−tdt.
更多latex数学符号详见：常用数学符号的 LaTeX 表示方法
kaTeX数学表达式参见：KaTeX

2、甘特图

一个常见的甘特图例子如下：

　```mermaidganttdateFormat  YYYY-MM-DDtitle Adding GANTT diagram functionality to mermaidsection 现有任务已完成               :done,    des1, 2014-01-06,2014-01-08进行中               :active,  des2, 2014-01-09, 3d计划一               :         des3, after des2, 5d计划二               :         des4, after des3, 5d```#甘特图代码例子

Mon 06Mon 13Mon 20已完成进行中计划一计划二现有任务Adding GANTT diagram functionality to mermaid

更多甘特图用法参考：参考文档

3、UML序列图
一个常见的UML序列图例子如下：

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

李四--&gt;&gt;张三: 打量着王五...
张三-&gt;&gt;王五: 很好... 王五, 你怎么样?
```
#UML序列图代码例子

张三李四王五你好！李四, 最近怎么样?你最近怎么样，王五？我很好，谢谢!我很好，谢谢!李四想了很长时间,文字太长了不适合放在一行.打量着王五...很好... 王五, 你怎么样?张三李四王五

更多UML序列图用法参考：参考文档

4、Mermaid流程图

一个常见的Mermaid流程图例子如下：

 ```mermaidgraph LRA[长方形] -- 链接 --> B((圆))A --> C(圆角长方形)B --> D{菱形}C --> D```#Mermaid流程图代码例子

链接

长方形

圆

圆角长方形

菱形

更多Mermaid流程图用法参考：参考文档

5、Flowchart流程图

一个常见的Flowchart流程图例子如下：

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

st-&gt;op-&gt;cond
cond(yes)-&gt;e
cond(no)-&gt;op
```
Flowchart流程图代码例子

Created with Raphaël 2.2.0开始我的操作确认？结束yesno

更多Flowchart流程图用法参考：参考文档

导出与导入

导出
当你完成了一篇文章的写作, 在上方工具栏找到文章导出按钮，生成一个.md文件或者.html文件进行本地保存。
导入
如果你想加载一篇你写过的.md文件或者.html文件，在上方工具栏可以选择导入功能进行对应扩展名的文件导入，然后继续你的创作。

离线写博客

即使用户在没有网络的情况下，也可以通过本编辑器离线写博客（直接在曾经使用过的浏览器中输入https://mp.csdn.net/即可。Markdown编辑器使用浏览器离线存储将内容保存在本地。
用户写博客的过程中，内容实时保存在浏览器缓存中，在用户关闭浏览器或者其它异常情况下，内容不会丢失。用户再次打开浏览器时，会显示上次用户正在编辑的没有发表的内容。
博客发表后，本地缓存将被删除。　
当然，用户可以选择把正在写的博客保存到服务器草稿箱，即使换浏览器或者清除缓存，内容也不会丢失。

最后

CSDN的markdown编辑器支持标准markdown的几乎全部功能，同时也有一些小的功能扩充，如图片拖拽、语法高亮支持的语言种类、即时预览、同步滚动等。当然市面上还有很多好用的markdown编辑器，欢迎交流分享，也欢迎对本文章内容提出补充和修改。

如果你喜欢其他的流行的markdown编辑器，请看我的另一篇文章《几款主流好用的markdown编辑器介绍》
如果你还喜欢传统的富文本编辑器，请看我的另一篇文章《几款主流好用的富文本编辑器（所见即所得常用编辑器）介绍》
如果想了解markdown编辑器和富文本编辑器的区别，请参考《markdown编辑器与富文本编辑器优缺点比较，哪个更好用》

转载请注明原文地址：https://blog.csdn.net/davidhzq/article/details/100904811

这是脚注1 ↩︎
这是脚注2 ↩︎