Markdown (CSDN) MD编辑器（一）- 实现页内跳转

目录
一、创建锚点
二、引用锚点
三、实例讲解

---

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

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

一、创建锚点

锚点：是在文章中的某个位置做标记。如果将一篇文章比作一条有多户人家的巷子，创建锚点就好比是给其中一户人家安装门牌号。

在HTML中，可以用id来定义位置，所以创建锚点就是创建一个id，语法如下：

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

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

二、引用锚点

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

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

链接名称：是自己想定义的任何名称或描述，一般根据文章上下文确定。
锚点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 格式文章结合显示效果研究一下。

3.2 显示效果

文章顶部

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

内容：

一、创建锚点

二、引用锚点

三、实例讲解

总结:

一、xxx

二、xxx

三、xxx

回到顶部

如果不太懂，可以直接看实例讲解，把 Markdown 格式文章结合显示效果研究一下。

3.3 讲解

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

相关系列文章：
Markdown编辑器(一) - 实现页内跳转
Markdown编辑器(二) - 文本样式(更改字体、字体大小、字体颜色、加粗、斜体、高亮、删除线)
Markdown编辑器(三) - 图片缩放、指定尺寸、居中、左对齐、右对齐
Markdown编辑器(四) - 漂亮表格(表格背景色、跨行、跨列、多行)