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

简介: 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编辑器(三) - 图片缩放、指定尺寸、居中、左对齐、右对齐


目录
相关文章
|
4月前
|
Ubuntu Linux 测试技术
Linux系统之部署轻量级Markdown文本编辑器
【10月更文挑战第6天】Linux系统之部署轻量级Markdown文本编辑器
215 1
Linux系统之部署轻量级Markdown文本编辑器
|
16天前
|
Linux UED C++
MarkEdit:相信做技术的同学都会喜欢这个编辑器的,MarkEdit编辑器,让Markdown编辑变得简单而强大,超赞~~~
嗨,大家好,我是小华同学。MarkEdit是一款跨平台的Markdown编辑器,支持Windows、macOS和Linux,提供实时预览、快捷键、自定义主题和插件系统等核心功能。它适用于日常笔记、技术文档、博客写作、学术论文和电子书制作等多种场景。
109 31
|
3月前
|
人工智能 移动开发 前端开发
Markdown-to-Image:开源的在线 Markdown 转海报编辑器
Markdown-to-Image 是一款开源的在线 Markdown 转海报编辑器,能够将 Markdown 文本内容转换为图像,适用于创建社交媒体帖子、海报和其他视觉内容。该工具支持多种输出格式,并允许用户自定义样式,适用于多种应用场景。
175 4
Markdown-to-Image:开源的在线 Markdown 转海报编辑器
|
6月前
|
存储 安全 数据安全/隐私保护
Django 后端架构开发:富文本编辑器权限管理与 UEditor 、Wiki接入,实现 Markdown 文本编辑器
Django 后端架构开发:富文本编辑器权限管理与 UEditor 、Wiki接入,实现 Markdown 文本编辑器
233 0
|
5月前
|
JavaScript 前端开发 API
vue3 v-md-editor markdown编辑器(VMdEditor)和预览组件(VMdPreview )的使用
本文介绍了如何在Vue 3项目中使用v-md-editor组件库来创建markdown编辑器和预览组件。文章提供了安装步骤、如何在main.js中进行全局配置、以及如何在页面中使用VMdEditor和VMdPreview组件的示例代码。此外,还提供了一个完整示例的链接,包括编辑器和预览组件的使用效果和代码。
vue3 v-md-editor markdown编辑器(VMdEditor)和预览组件(VMdPreview )的使用
|
6月前
|
前端开发 Python
60行Python代码开发在线markdown编辑器
60行Python代码开发在线markdown编辑器
88 2
|
9月前
|
存储 Linux 编译器
vim编辑器和gcc/g++编辑器的使用讲解
vim编辑器和gcc/g++编辑器的使用讲解
178 2
|
7月前
|
开发工具
vi编辑器,现在vi\vim是文本文件进行编辑的最佳选择,Vim是vi的加强的版本,兼容vi的所有指令,vim编辑器有三种工作模式,一开始进入的是命令模式,命令模式i是插入的意思,两下y+p复制内容
vi编辑器,现在vi\vim是文本文件进行编辑的最佳选择,Vim是vi的加强的版本,兼容vi的所有指令,vim编辑器有三种工作模式,一开始进入的是命令模式,命令模式i是插入的意思,两下y+p复制内容
|
8月前
|
开发工具
Vim 编辑器:高效文本编辑的瑞士军刀
**Vim 概览:** Vim 是一个功能丰富的文本编辑器,以其高度可定制性著称。文章介绍了 Vim 的高效使用技巧,包括快捷打开文件、命令行模式下的常用命令、查找与替换、删除和复制文本。还讨论了配置 `.vimrc` 文件以自定义设置,如改变 leader 键、设置缩进和高亮,并展示了安装插件如 vim-airline 和 vim-snazzy 的方法。通过这些技巧,用户能提升 Vim 使用效率。
94 5
|
8月前
|
Ubuntu 搜索推荐 Linux
Linux的Vim编辑器详解
Linux的Vim编辑器详解

热门文章

最新文章