美文网首页Markdown工具癖程序员
MarkDown中实现目录页面内跳转

MarkDown中实现目录页面内跳转

作者: 科研者 | 来源:发表于2017-10-28 10:39 被阅读1917次

MarkDown中页面内跳转经常用于目录跳转,为了解决在MarkDown中实现页面内跳转,我特意研究了以下实现方式;

备注: 简书中的MarkDown好像不支持页面内跳转;

目录

一. 链接的定义
   1. 行内式链接
   2. 参考式链接
二. 标题的定义
   1. 类Setex形式的标题
   2. 类Atx形式的标题
三. 页面内跳转
   1. 锚点的定义
   2. 锚点目标的定义

内容


在MarkDown中是通过 链接标题 来实现页面内跳转的,所以先讲下MarkDown中 链接标题 的语法;

一、链接的定义

Markdown 支持两种形式的链接语法: 行内式和参考式两种形式。

1. 行内式链接

语法:

行内式链接 = [内容](地址 "标题")

说明:

  • 标题 是可选的,可以用单引号 或 双引号;

转换成HTML后,会生成如下标签:

<a href="地址" title="标题">内容</a>

2. 参考式链接

语法:

参考式链接 = [内容][参考标识符]
参考标识符 = [标识符]: 地址 "标题"

说明:

  • 参考式链接参考标识符 的定义没有先后顺序;
  • [内容][参考标识符] 之间可以有一个空格;
  • 标题 是可选的,可以用单引号、双引号或是圆括弧包着;

转换成HTML后,会生成如下标签:

<a href="地址" title="标题">内容</a>

二、标题的定义

Markdown 支持两种标题的语法:类Setext形式 和 类atx形式;

1. 类Setex形式的标题

类Setext形式标题的定义是用底线的形式,可以利用任何个数的符号 =(最高级标题)和 -(第2级标题)来做底线,格式为:

标题内容
====

标题内容
----

说明:

  • 底线的符号个数为大于或等于1

2. 类Atx形式的标题

类 Atx 形式标题的定义则是在行首插入 1 到 6 个 # ,对应到标题 1 到 6 阶,格式为:

# 1级标题内容
## 2级标题内容
### 3级标题内容
#### 4级标题内容
##### 5级标题内容
###### 6级标题内容

三、页面内跳转

MarkDown中是通过定义链接的方式来定义跳转的,跳转也称为锚点,跳转的目标称为锚点目标锚点锚点目标 的定义格式如下:

1. 锚点的定义

锚点就是一个链接,另外,由于在MarkDown中可以直接写HTML,所以在MarkDown中实现锚点有两种方式:MarkDown方式 和 HTML方式;

1.1 MarkDown锚点

MarkDown锚点就是一个[MarkDown链接][链接的定义],只是链接地址的格式为:

链接地址 = #目标内容

1.2 HTML锚点

HTML锚点就是一个a链接,格式为:

<a href="#目标内容">内容</a>

注意:

  • HTML锚点 的目标锚点只能是 [标签形式的锚点目标][标签形式的锚点目标]

2. 锚点目标的定义

锚点目标有2种定义方式:MarkDown形式 和 标签形式;

2.1 MarkDown形式的锚点目标

MarkDown形式的锚点目标的定义其实就是[标题][标题的定义]的定义,即:任何级别的标题可以直接作为锚点目标;

标题内容 = 目标内容

注意:

  • [锚点][锚点的定义]的 目标内容 中不能有大家字母和空格,所以如果锚点目标的 目标内容 中有大写字母或空格,则需要在定义锚点中的 目标内容 时,把大写字母改成小写字母,把空格改成 -
  • [锚点][锚点的定义]的 目标内容 中不能含有以下字符:
    • 半角点(即英文中的句号).

2.2 标签形式的锚点目标

因为MarkDown链接会被转成a标签,并且MarkDown中也可以写标签,所以可以利用HTML的锚点机制直接定义一个带 id 特性的标签作为锚点目标,然后把MarkDown中的锚点地址的目标内容设置为 id 特性的值;这样便可以实现页面内跳转;

这种形式的锚点目标的定义格式为:

<标签名 id="目标内容">元素内容</标签名>

注意:

  • 标签形式的锚点目标的id特性值中是不能含有中文字符;

相关文章

  • MarkDown中实现目录页面内跳转

    MarkDown中页面内跳转经常用于目录跳转,为了解决在MarkDown中实现页面内跳转,我特意研究了以下实现方式...

  • Markdown 如何实现页面内跳转

    在文档中内容特别多的时候特别有用,点击目录下的文字,可以跳转到响应位置,阅读完毕后,再跳转回目录。 点击目录下名称...

  • 页面重定向

    本域名内实现目录重定向 利用php文件中的header 跳转到指定页面 使用.Htaccess文件实现301重定向...

  • markdown 页面内跳转

    在写markdown文档时,有的时候我们会分层级结构,比如下面这样 这时候你有个需求:你想在1.跳转到三级目录这里...

  • markdown笔记

    MarkDwon实现页面内跳转 1. 语法 先定义一个锚(id) 然后使用markdown的语法 2. 示例: g...

  • Bag of Tricks for Efficient Text

    本文目录(仅做浏览用,简书中的MarkDown暂时不支持页面内跳转)一、Fasttext算法综述二、原理介绍及优化...

  • Markdown页面内自动跳转

    超链接: 目录1[#jump1]跳转到:### 1. 目录1

  • Markdown-页面内跳转

  • 实现MarkDown页面内跳转遇到的坑

    在github上写说明文档时,偶尔会遇到一个页面很多文字的情况,这时候通常需要在顶部加一个目录导航,格式类似下面这...

  • Flutter - 页面跳转(路由)、传值

    Flutter 中页面跳转通过 Navigator 和 Route 来实现。 一、页面跳转 1,常规路由页面跳转...

网友评论

  • e8959c45ac38:说的是很全面,但要是有例子的话就更好了。

本文标题:MarkDown中实现目录页面内跳转

本文链接:https://www.haomeiwen.com/subject/ecwjpxtx.html