Markdown编辑器的使用

第一节 Markdown简介

---

Markdown是一种轻量级标记语言，排版语法简洁，让人们更多地关注内容本身而非排版。它使用易读易写的纯文本格式编写文档，可与HTML混编，可导出 HTML、PDF 以及本身的 .md 格式的文件。因简洁、高效、易读、易写，Markdown被大量使用，如Github、Wikipedia、简书等。

---

页内跳转

在CSDN写博客时也可以选择 Markdown编辑器，但 Markdown 的基础语法中并没有页内跳转的相关知识点，而写博客时偶尔需要利用页内跳转使读者可以快速跳转到文章的某处，例如“回到顶部”、“目录”等。因为Markdown可以与HTML混编，所以可以使用 HTML 的语法来实现页内跳转。总共就两个步骤：①在要跳达的地方创建锚点；②在文章中引用锚点。

---

一、创建锚点

锚点：是在文章中的某个位置做标记
在HTML中，可以用id来定义位置，所以创建锚点就是创建一个id，语法如下：

<a id="article_top"></a>
1

这里是创建了一个id="article_top"的标签。

---

二、引用锚点

创建完锚点后，就相当于在文章的某个位置做了个标记，有了这个标记就可以使用 markdown 的语法(创建链接)引用这个位置，从而实现页内跳转。引用锚点本质上就是创建一个指向锚点的链接。语法如下：

[链接名称](#锚点id)
1

链接名称：是自己想定义的任何名称或描述，一般根据文章上下文确定。
锚点id：就是已经定义的锚点id。

注意：
锚点id前面还有一个#号。
锚点可以定义在文章的任意一行，引用锚点的链接也可以定义在文章任意位置。

---

三、实例讲解

下面给出了一份 Markdown 格式的文章，可以直接复制到Markdown编辑器去看看显示效果。
同时在3.2 显示效果也给出了 3.1 的文章对应的显示效果。

3.1 Markdown 格式文章

<a id="article_top"></a>文章顶部

标题：Markdown 怎么实现页内跳转的

内容：
一、创建锚点
二、引用锚点 
<a id="example"></a>三、实例讲解

总结:
一、xxx
二、xxx
三、xxx
	
[回到顶部](#article_top)

如果不太懂，可以直接看[实例讲解](#example)，把 Markdown 格式文章结合显示效果研究一下。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

3.2 显示效果

文章顶部

标题：Markdown 怎么实现页内跳转的

内容：
一、创建锚点
二、引用锚点
三、实例讲解

总结:
一、xxx
二、xxx
三、xxx

回到顶部

3.3 讲解

3.1 Markdown 格式文章中定义了2个锚点：锚点1(id=“article_top”)定义在文章顶部的前面；锚点2(id=“example”)定义在实例讲解的前面。同时文章也设置了两个引用锚点的链接：第一个链接是倒数第二行的回到顶部，引用了文章顶部的锚点；第二个链接是倒数最后一行的实例讲解，引用了实例讲解的锚点。在阅读文章时点击这2个链接时，会跳转到对应的锚点位置。

---

第二节 Markdown 文本样式

Markdown语法过于简洁，因此没有更改文本字体、字体大小、字体颜色的语法。但支持与HTML混编，使用HTML语法来改变字体、字体大小、字体颜色等。下面详细讲解一些。

---

1、Markdown现有的文本样式。

表中可见 Markdown 仅支持 斜体、加粗、标记、删除、粉色五类文本样式，下面介绍HTML的 font 标签，使编写的Markdown格式文本支持修改字体、改字体大小、改字体颜色。

---

2、HTML的font标签-改字体、字体颜色、字体大小。

讲这个标签前，先看下面的 Markdown 格式文本及显示效果

2.1、Markdown格式文本

<font face="仿宋">这是宋体</font>
<font face="楷体">这是楷体</font>
<font face="courier New">This is courier New</font>

<font face="仿宋" color=red>这是红色宋体</font>
<font face="楷体" color="blue">这是蓝色楷体</font>
<font face="courier New" color=	#20B2AA>This is LightSeaGreen courier New</font>

这是默认字体
<font face="仿宋" color=red size=4>这是红色4号宋体</font>
<font face="楷体" color="blue" size=5>这是蓝色5号楷体</font>
<font face="courier New" color=	#20B2AA size=6>This is LightSeaGreen courier New size 6</font>

1
2
3
4
5
6
7
8
9
10
11
12
13

2.2、显示效果

这是宋体
这是楷体
This is courier New

这是红色宋体
这是蓝色楷体
This is LightSeaGreen courier New

这是默认字体
这是红色4号宋体
这是蓝色5号楷体
This is LightSeaGreen courier New size 6

2.3、font标签解释

从2.1、Markdown格式文本可以看到font标签的基本应用及格式，font标签主要有三个属性face、color、size分别用来设置文本的字体、颜色、大小。这三个属性可以单个地使用，如果对使用不清楚的，可以把2.1、Markdown格式文本内容复制到markdown编辑器，然后自己修改着看看。

注意：
选择的字体，要markdown编辑器支持的，如果太罕见的字体可能会没有而显示默认的字体
字体颜色可以是英文表示的，也可以是#后面加rgb值表示，颜色和rgb值的可以参考颜色码对照表
字体大小只有1到7总共7个字号可以选择

3、HTML的mark标签-标记文本

markdown本身也有标记文本的语法，这里再提供一种内嵌html的写法，供读者对比使用。

3.1、Markdown格式文本

这是正常文本
==这是 markdown 的标记文本==
<mark>这是 HTML 的标记文本</mark>

1
2
3
4

3.2、显示效果

这是正常文本
这是 markdown 的标记文本
这是 HTML 的标记文本

---

4、HTML的strong标签-加粗文本

markdown本身也有加粗文本的语法，这里再提供一种内嵌html的写法，供读者对比使用。

4.1、Markdown格式文本

这是正常文本
**这是 markdown 的加粗文本**
<strong>这是 内嵌HTML 的加粗文本</strong>
1
2
3

4.2、显示效果

这是正常文本
这是 markdown 的加粗文本
这是 内嵌HTML 的加粗文本

---

5、HTML的em标签-斜体文本

markdown本身也有斜体文本的语法，这里再提供一种内嵌html的写法，供读者对比使用。

5.1、Markdown格式文本

这是正常文本
**这是 markdown 的斜体文本**
<strong>这是 内嵌HTML 的斜体文本</strong>
1
2
3

5.2、显示效果

这是正常文本
这是 markdown 的斜体文本
这是 内嵌HTML 的斜体文本

---

6、HTML的del标签-删除文本

markdown本身也有删除文本的语法，这里再提供一种内嵌html的写法，供读者对比使用。

6.1、Markdown格式文本

 这是正常文本
~~这是 markdown 的删除文本~~
<del>这是 内嵌HTML 的删除文本</del>
1
2
3

6.2、显示效果

这是正常文本
这是 markdown 的删除文本
这是 内嵌HTML 的删除文本

---

7、HTML的big、small标签-加大、减小字号

前面 2.HTML的font标签 介绍了怎样改字体大小，这里再介绍另一种写法，供读者对比使用。使用big标签字号比默认的大一号，使用small标签使字号比默认小一号

7.1、Markdown格式文本

<small>这是比默认字号小一号的文本</small>
这是默认字号文本
<big>这是比默认字号大一号的文本</big>
1
2
3

7.2、显示效果

这是比默认字号小一号的文本
这是默认字号文本
这是比默认字号大一号的文本

---

8、HTML的font、mark、strong、em、del、big、small混合使用

上面介绍的几个标签还可以混合使用，主要使用方式是在font标签前面加上其他标签，可以结合下面文本自己练习看看。

8.1、Markdown格式文本

这是默认字体
<font face="courier New" color=#1E90FF>这是道奇蓝色courier New字体</font>
<mark><font face="courier New" color=#1E90FF>这是高亮的道奇蓝色courier New字体</font></mark>
<mark><strong><font face="courier New" color=#1E90FF>这是高亮加粗的道奇蓝色courier New字体</font><strong></mark>
<mark><strong><big><font face="courier New" color=#1E90FF>这是高亮加粗大一号的道奇蓝色courier New字体<big></font><strong></mark>
<mark><strong><big><em><font face="courier New" color=#1E90FF>这是高亮加粗大一号斜体的道奇蓝色courier New字体<big></font><strong></mark>
1
2
3
4
5
6

8.2、显示效果

这是默认字体
这是道奇蓝色courier New字体
这是高亮的道奇蓝色courier New字体
这是高亮加粗的道奇蓝色courier New字体
这是高亮加粗大一号的道奇蓝色courier New字体
这是高亮加粗大一号斜体的道奇蓝色courier New字体

---

第三节 图片缩放缩放、对齐方式

Markdown编辑器提供了简单的插入图片的方法，但根据不同的编辑器，默认的方式可能不同，有些是默认左对齐，有些则是默认居中对齐，而且没有缩放功能，但也能满足大多数的写作需求。如果想要使用更丰富的关于插入图片的操作，可以采用内嵌HTML的方式来编写 Markdown 文件。下面先看一下csdn的markdown编辑器插入图片的方式，然后介绍一下使用 HTML 的方式来插入图片的方法。

---

一、CSDN的MD编辑器插入图片的方式：

不同的markdown编辑器可能有不同的显示效果，下面介绍的是CSDN的MD编辑器。
它插入图片语法：![图片描述](图片链接)

1.1 图片对齐方式

CSDN的MD编辑器直接点图片按钮插入图片的方式就是居中对齐的，按图片的实际尺寸显示，这是默认的图片插入方式。它会在图片链接后面加上#pic_center的字样，由此可以推断：左对齐对应#pic_left，右对齐对应#pic_right，下面直接看例子。

1.1.1 markdown格式文本

- 下图是居中显示-图片默认插入方式
![图片描述](https://alifei01.cfp.cn/static/sign-in/VCG211172512749.jpg#pic_center)
- 下图是左对齐显示-图片默认插入方式
![图片描述](https://alifei01.cfp.cn/static/sign-in/VCG211172512749.jpg#pic_left)
- 下图是右对齐显示-图片默认插入方式
![图片描述](https://alifei01.cfp.cn/static/sign-in/VCG211172512749.jpg#pic_right)
1
2
3
4
5
6

1.1.2 显示效果

• 下图是居中显示-图片默认插入方式
  
• 下图是左对齐显示-图片默认插入方式
  
• 下图是右对齐显示-图片默认插入方式
  

1.2 指定图片尺寸

CSDN的MD编辑器提供了带尺寸的图片的插入方式，就是在图片链接的最后加上空格、等号宽x高，例如添加30x30尺寸就是=30x30,注意等号前面有个空格。下面用markdown文本举个例子。上面那个图片原图是360x360的，下面把它按照180x180地尺寸添加进来看看效果。至于左对齐、右对齐的尺寸，自己结合着使用就行了。

1.2.1 markdown格式文本

![图片描述](https://img-blog.csdnimg.cn/img_convert/3ec2b34b2377b283e1b27f62f25d5f05.jpeg#pic_center_180x180)
1

1.2.2 显示效果

---

二、内嵌HTML语法实现插入图片

HTML插入图片的基础语法： <img src="图片链接" alt="图片alt" title="图片title">
使用HTML语法插入图片，默认是左对齐的，可以用<div>标签来改变其对齐方式，<div>标签定义一个区域，使用align属性可以改变定义的区域的对齐方式。其他属性参阅下面的例子，2.1 markdown格式文本可以直接拷贝到markdown编辑器去看效果。

在 HTML 中，
<img>标签用来定义图片，是空标签，意思是说，它只包含属性，并且没有闭合标签。
src指 “source”。源属性的值是图像的 URL 地址
alt属性用来为图像定义一串可替换的文本。无法载入图像时，替换文本告诉读者，他们失去的信息。
title属性描述了元素的额外信息 (作为工具条使用)
height(高度) 与 width(宽度) 属性用于设置图像的高度与宽度。
style属性规定元素的行内样式（inline style），定义图片时可以用来缩放
<div>标签
用来定义文档中的一个分隔区块或者一个区域部分
align属性用来对齐，它的值有left、right、center、justify

2.1 markdown格式文本

- `<img>`标签添加图片
<img src="https://img-blog.csdnimg.cn/img_convert/3ec2b34b2377b283e1b27f62f25d5f05.jpeg" alt="这是梦里的地方">
- `alt`属性 - 这里图片链接错误，图片无法载入，所以显示了`alt`属性的文本
<img src="https://img-blog.csdnimg.cn/" alt="这是梦里的地方">
- `height、width`属性 - 指定宽高为150
<img src="https://img-blog.csdnimg.cn/img_convert/3ec2b34b2377b283e1b27f62f25d5f05.jpeg" width=150 height=150>
- `<div>` 标签的`align`属性 - 使图片和文本居中，左对齐`left`，右对齐`right`
<div align=center>
<img src="https://img-blog.csdnimg.cn/img_convert/3ec2b34b2377b283e1b27f62f25d5f05.jpeg">
<br>梦里的地方</div>

1
2
3
4
5
6
7
8
9
10
11

2.2 显示效果

• <img>标签添加图片
  
• alt属性 - 这里图片链接错误，图片无法载入，所以显示了alt属性的文本
  
• height、width属性 - 指定宽高为150
  
• <div> 标签的align属性 - 使图片和文本居中，左对齐left，右对齐right

上面例子中还有个别属性没有使用，原因是csdn的MD编辑器不支持，没有效果，所以不展示了，总结起来就是图片的对齐方式和指定尺寸显示。我是前两天想使图片左对齐而去查找的资料，在此记录一下。

---

第四节 表格插入

一、markdown表格

markdown 的表格语法简单，使用三个或以上的连字符(—)创建每列的标题；使用管道(|)分隔每列；创建标题时在连字符两侧使用冒号(:)表示靠哪一侧对齐；使用反引号(`)可以强调文本，直接看例子：

• markdown格式文本

| Align `left`   | center align |   Align right |
| :------------- | :----------: | ------------: |
| `left`-aligned |   centered   | right-aligned |
| `左`对齐        |    中对齐     |         右对齐 |

1
2
3
4
5

• 显示效果

二、HTML表格

markdown的表格语法简单，功能也简单，有时表格需要设置背景色、跨行、跨列，markdown支持内嵌HTML的语法，所以可以用 HTML 表格来实现这样的需求。
HTML表格由 <table> 标签来定义，
表格的表头由<th>标签定义，
表格的每一行由 <tr> 标签定义，
每行被分割的单元格由 <td> 标签定义。
这几个标签都有一些自带的属性用来最终改变表格的整体风格，下面先看看这些属性，然后结合例子看看怎样制作精美的表格。

2.1 标签属性

• <table>标签的属性
  border属性用于设置表格的边框大小

• <th>、<td>标签的属性
  colspan属性表示一个格子可以跨几列
  rowspan属性表示一个格子可以跨几行
  bgcolor属性定义单元格的背景色，用十六进制rgb表示颜色
  width 属性表示单元格的宽度，可以用百分比表示，也可以用数值表示
  height属性表示单元格的高度，用数值表示
  align 属性表示对齐方式，取值有left、right、center

2.2 跨列单元格（合并单元格）

下面创建一个表格，使第一行的格子跨两格，只需要在第一行的单元格加属性colspan="2"，markdown代码如下：

<table border="2" >
	<tr >
		<td colspan="2">跨两个单元格</td>
	</tr>
	<tr >
		<td>第一格</td>
		<td>第二格</td>
	</tr>
</table>

1
2
3
4
5
6
7
8
9
10

2.3.1 显示效果

2.4 单元格内换行

下面创建一个表格，在第二个单元格里写入多行文字，只需要在每一行文字后面加入
就可以换行了

<table border="2" >
	<tr >
		<td>只有一行</td>
		<td>
			这是第一行<br>
			这是第二行<br>
			这是第三行<br>
		</td>
	</tr>
</table>

1
2
3
4
5
6
7
8
9
10
11

2.4.2 单元格内换行

### 2.5 单元格背景色 下面创建一个表格，给每个格子设置不同的背景色，只需要修改单元格的`bgcolor`属性，可以用系统识别的颜色，也可以使大写或小写的十六进制。

<table border="2" >
	<tr >
		<td bgcolor="red">红色</td>
		<td bgcolor="orange">橙色</td>
		<td bgcolor=#FFFF00>黄色</td>
		<td bgcolor=#00FF00>绿色</td>
		<td bgcolor=#0000ff>蓝色</td>
		<td bgcolor=#00ffff>靛色</td>
		<td bgcolor=#ff00ff>紫色</td>
	</tr>
</table>

1
2
3
4
5
6
7
8
9
10
11
12

2.5.2 显示效果

其余颜色均可通过英文代码、中文描述、十六进制、rgb值来进行输出

2.6 单元格的字体(颜色、大小、字体)

下面创建一个表格，使用font标签改变字体，第一个格子用4号红色楷体，第二个格子同时使用三种颜色字体

<table border="2" >
	<tr >
		<td width="50%"><font face="楷体" color=red size=4>4号红色楷体</font></td>
		<td>
			<font color=red>红</font><font color=green>绿</font><font color=blue>蓝</font>
		</td>
	</tr>
</table>

1
2
3
4
5
6
7
8
9

2.6.1 显示效果

2.7 单元格的里的<、>字符

<table border="2" >
	<tr >
		<td >关闭设备</td>
		<td align=left>
			<font face="courier New" font color=red>#include &ltunistd.h&gt</font><br/>
			<font face="courier New" font color=blue>close(framebuf_fd);</font><br/>
		</td>
	</tr>
</table>

1
2
3
4
5
6
7
8
9
10

2.7.1 显示效果

### 2.8 html表格的其他属性

<table border="2" >
	<tr>
		<th colspan="2" align="center">markdown表格</th>
		<th colspan="2" >html表格</th>
	</tr>
	<tr>
		<td width="10%" rowspan="4">语法</td>
		<td width="40%" align=left>标题->连字符(---)</td>
		<td  width="10%" rowspan="4" bgcolor=#FAEBD7>语法</td>
		<td align=right bgcolor=#FFB6C1>表格-><font color=red>table</font>标签</td>
	</tr>
	<tr>
		<td align=left>分隔每列->管道(|)</td>
		<td align=right bgcolor=#D8BFD8>标题-><font color=red>th</font>标签</td>
	</tr>
	<tr>
		<td align=left>对齐->冒号(:)</td>
		<td align=right bgcolor=#B0C4DE>行-><font color=red>tr</font>标签</td>
	</tr>
	<tr>
		<td align =left>强调->反引号(`)</td>
		<td align=right bgcolor=#AFEEEE>列-><font color=red>td</font>标签</td>
	</tr>
</table>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

在上面markdown代码中，可以看到还使用了前面文章说过的 <font> 标签，可以使表格的字体更丰富

第五节 Markdown快捷键

在Markdown的使用中存在着许许多多的快捷键，在CSDN 等浏览器平台的md编辑其中，由于部分快捷键与浏览器自带的冲突，所以在使用中并未大规模使用（至少本人没有）

一：菜单栏

• 文件：alt+F
• 编辑：alt+E
• 段落：alt+P
• 格式：alt+O
• 视图：alt+V
• 主题：alt+T
• 帮助：alt+H

二：文件

• 新建：Ctrl+N
• 新建窗口：Ctrl+Shift+N
• 打开：Ctrl+O
• 快速打开：Ctrl+P
• 保存：Ctrl+S
• 另存为：Ctrl+Shift+S
• 偏好：Ctrl+,
• 关闭：Ctrl+W

三：编辑

• 撤销：Ctrl+Z-
• 重做：Ctrl+Y
• 剪切：Ctrl+X
• 复制：Ctrl+C
• 粘贴：Ctrl+V
• 全选 ：Ctrl+A
• 选中当前行/句：Ctrl+L
• 选中当前格式文本：Ctrl+E
• 选中当前词：Ctrl+D
• 跳转到文首：Ctrl+Home
• 跳转到所选内容：Ctrl+J
• 跳转到文末：Ctrl+End
• 查找：Ctrl+F
• 查找下一个：F3
• 查找上一个：Shift+F3
• 替换：Ctrl+H

四：段落

• 标题：Ctrl+1/2/3/4/5
• 段落：Ctrl+0
• 增大标题级别：Ctrl+=
• 减少标题级别：Ctrl±
• 表格：Ctrl+T
• 代码块：Ctrl+Shift+K
• 公式块：Ctrl+Shift+M
• 引用：Ctrl+Shift+Q
• 有序列表：Ctrl+Shift+[
• 无序列表：Ctrl+Shift+]
• 增加缩进：Ctrl+]
• 减少缩进：Ctrl+[

五：格式

• 加粗：Ctrl+B
• 斜体：Ctrl+I
• 下划线：Ctrl+U
• 代码：Ctrl+Shift+`
• 删除线：Alt+Shift+5
• 超链接：Ctrl+K
• 图像：Ctrl+Shift+I
• 清除样式：Ctrl+