CSDN的markdown编辑器详细使用说明、语法快速索引手册

最新推荐文章于 2024-04-25 12:14:07 发布

豆豆技术派

最新推荐文章于 2024-04-25 12:14:07 发布

阅读量2.9k

点赞数 19

分类专栏：编辑器文章标签： markdown 文本编辑编辑器语法

本文链接：https://blog.csdn.net/davidhzq/article/details/100904811

版权

编辑器专栏收录该内容

4 篇文章 7 订阅

订阅专栏

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://avatar.csdn.net/1/F/F/3_davidhzq.jpg)
显示如下的头像图标：

b) 带尺寸图片

助记：

![图片提示性文字，可不写](图片地址 =尺寸)，=号前面有空格
在末尾多了一个 =号

例如：
![头像](https://avatar.csdn.net/1/F/F/3_davidhzq.jpg =130x130)
显示如下的头像图标：

c) 图片居中

助记：

![图片提示性文字，可不写](图片地址#pic_center)，#号前面不能有空格

例如：
![头像](https://avatar.csdn.net/1/F/F/3_davidhzq.jpg#pic_center)
显示如下的头像图标：

d) 图片居中且带尺寸

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

例如：
![头像](https://avatar.csdn.net/1/F/F/3_davidhzq.jpg#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公式展示 $\Gamma(n) = (n-1)!\quad\forall n\in\mathbb N$ 是通过欧拉积分
$\Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,.$
更多latex数学符号详见：常用数学符号的 LaTeX 表示方法
kaTeX数学表达式参见：KaTeX

2、甘特图

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

　```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
	        计划二               :         des4, after des3, 5d
　```
	#甘特图代码例子

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

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

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

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

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

4、Mermaid流程图

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

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

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

5、Flowchart流程图

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

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

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

更多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 ↩︎

豆豆技术派

关注

19
点赞
踩
68

收藏

觉得还不错? 一键收藏
4
评论
CSDN的markdown编辑器详细使用说明、语法快速索引手册

标签：markdown，文本编辑，编辑器，开源Markdown编辑器Markdown 其实在 2004 年就有了，不过之前一直很小众，这几年随着相关应用平台的发展，Markdown以其独到的优势迅速火起来了。Markdown编辑器使用一套格式标记语言来对文档内容进行排版和格式显示。而Markdown的标记很少，常用的也就十个左右，它是一种非常轻量的标记语言。Markdown编辑器深受技术人员...
复制链接

扫一扫