Markdown编辑器语法与小技巧

Markdown是一种纯文本格式的标记语言，通过简单的标记语法，它可以使普通文本内容具有一定的格式。它作为工具主要为了提高效率和书写体验的，对于经常码字、文字排版等工作的人群比较适用，例如从事：博客写手、网站小编、出版业人士、小说作家、文档程序员等等。无论是技术大佬还是小白，都可以发布一些文章。那么针对于MarkDown编辑器，又有哪些语法或者是小技巧呢？下面我们就来扒一扒这些语法和小技巧。

1.标题

一共分为了六级标题，每级标题以 “#”的数量区分(注意：“#”与“标题”之前要有空格）

效果：

北京超图软件股份有限公司

# 北京超图软件股份有限公司

北京超图软件股份有限公司

## 北京超图软件股份有限公司

北京超图软件股份有限公司

### 北京超图软件股份有限公司

北京超图软件股份有限公司

#### 北京超图软件股份有限公司

北京超图软件股份有限公司

##### 北京超图软件股份有限公司

北京超图软件股份有限公司

###### 北京超图软件股份有限公司

2.文本样式

2.1 字体大小

效果：
北京超图软件股份有限公司

 <font size=4>北京超图软件股份有限公司</font>

2.2 字体颜色

效果：
北京超图软件股份有限公司

 <font color=blue>北京超图软件股份有限公司</font>

2.3 更改字体

效果1：
北京超图软件股份有限公司

 <font face="仿宋">北京超图软件股份有限公司</font>

效果2：
北京超图软件股份有限公司

 <font face="STCAIYUN"  color=blue  size =6>北京超图软件股份有限公司</font>

2.4 字体倾斜，加粗，标注等

效果：
北京超图软件股份有限公司

*北京超图软件股份有限公司*  

效果：
北京超图软件股份有限公司

**北京超图软件股份有限公司**

效果：
北京超图软件股份有限公司

==北京超图软件股份有限公司==

效果：
北京超图软件股份有限公司

~~北京超图软件股份有限公司~~

2.5 文本居中

效果1：

北京超图软件股份有限公司 效果2： 北京超图软件股份有限公司

 <center>北京超图软件股份有限公司</center>
 <center><font size=5>北京超图软件股份有限公司</font></center>

2.6 引用文本

效果1：

北京超图软件股份有限公司

> 北京超图软件股份有限公司

效果2：

北京超图软件股份有限公司

北京超图软件股份有限公司

北京超图软件股份有限公司 （以此类推）

>北京超图软件股份有限公司
>>北京超图软件股份有限公司
>>>北京超图软件股份有限公司 （以此类推）

2.7 文本背景色

效果：

北京超图软件股份有限公司

 

<table><tr><td bgcolor=#0089e5>北京超图软件股份有限公司</td></tr></table>

#0089e5也可以更改为blue或者red等

2.8 文本空格输入

效果：
北京超图软件股份   有限公司

北京超图软件股份   有限公司

2.9 文本角标

效果：
下角标：H₂O
上角标：2¹⁰

H~2~O
2^10^ 

2.10 文本注脚

效果：
超图软件。¹

超图软件。[^1]
[^1]: 北京超图软件股份有限公司

注意：两行都要写，解释字句的文字会在文章末尾出现。

2.11 文本名词解释

效果：
超图人精神

超图人精神
*[超图人精神]: “口碑至上”、“创新思维”、“工匠精神”

注意：“超图人精神”前后需要有空格

3.插入链接、图片、代码等

3.1 插入链接

效果：
北京超图软件股份有限公司

[北京超图软件股份有限公司](https://www.supermap.com/cn/)  

注意：地址要写全

3.2 插入图片

3.2.1 默认插入图片

效果：

![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/ab598be35d0f82b2e60cd93267189864.png)

也可以将图片复制粘贴进来
效果：

![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/2bcc1810b0ccea136cd88a58bd4c0c97.png)

这种方法插入的图片会带有csdn的水印，去除水印的方法：将png后的代码删掉

3.2.2 插入图片居中

效果：

![在这里插入图片描述](https://img-blog.csdnimg.cn/20190131114439182.png#pic_center)

后面加上“#pic_center”

3.2.3 插入带尺寸的图片

效果：

![在这里插入图片描述](https://img-blog.csdnimg.cn/20190131114439182.png#pic_center =400x300)

后面加上“ =300x300”（前面有个空格，其中x为英文小写字母x）
注意： 如果插入尺寸图片居中的话，#pic_center要写在前面

3.2.4 插入gif动态图

效果：

<div align="center"><img src="https://i-blog.csdnimg.cn/blog_migrate/423094843bb6ecdd8c055648652dbd41.gif"></div>

3.3 插入代码

效果：

// An highlighted block
var foo = 'bar';

```
// An highlighted block
var foo = 'bar';
```

或者直接按“Tab”键
也可以插入JavaScript代码，JavaScript为带有颜色的代码
效果：

// An highlighted block
var foo = 'bar';

```javascript
// An highlighted block
var foo = 'bar';
```

3.4 插入表格

3.4.1简单表格

效果：

项目	负责人
项目一	张三
项目二	李四
项目三	王五

项目    | 负责人
------  | -------
项目一  | 张三
项目二  | 李四
项目三  | 王五

3.4.2 表格文本居左、居中、居右

效果：

文本居左	文本居中	文本居右
北京超图软件股份有限公司	北京超图软件股份有限公司	北京超图软件股份有限公司

文本居左 | 文本居中 |文本居右
:------ | :------:| ------:
<font color=blue>北京超图软件股份有限公司</font>|<font size=2>北京超图软件股份有限公司</font>|**北京超图软件股份有限公司**

3.5 插入分隔行

效果：
北京超图软件股份有限公司

---

北京超图软件股份有限公司
	
---

注意：中间有一个空行

4. 列表

4.1 无序列表

效果：

• iDesktop
• iServer
• iObjects

- iDesktop
- iServer
- iObjects

注意：“-”符号后有一个空格

4.2有序列表

效果：
iDesktop 9.1.2新特性

1. 数据管理
   1.1 打开天地图
   1.2 支持TMS服务
2. 数据处理
3. 二三维标绘

iDesktop 9.1.2新特性
1. 数据管理
	1.1	打开天地图
	1.2	支持TMS服务
2. 数据处理
3. 二三维标绘

注意：“.”符号后有一个空格

4.3 Checkbox

效果：
已申请的试用许可清单

• iDesktop
• iServer
• iObjects

已申请的试用许可清单
- [x] iDesktop
- [x] iServer
- [ ] iObjects

注意：iObjects“[ ]”符号中有一个空格

---

1. 北京超图软件股份有限公司 ↩︎