MarkDown技巧:两种方式实现页内跳转

时间:2023-03-08 16:35:03

MarkDown技巧:两种方式实现页内跳转

本人邮箱:JohnTsai.Work@gmail.com,欢迎交流讨论。
欢迎转载,转载请注明网址:http://www.cnblogs.com/JohnTsai
个人博客地址:http://johntsaiandroid.github.io


跳转到的地方未看完全文请忽略这个:)

最近,无论是在博客园还是在自己的博客写文章,都是用的MarkDownPad2写的。喜欢MarkDown这种简单直观的写作方式。




MarkDown技巧:两种方式实现页内跳转

但是写文章时,突然发现如果写了一篇很长的文章,要是没有目录的话。阅读起来十分不便。页内跳转就能很好的解决这个问题。

如下图中的目录一样。
MarkDown技巧:两种方式实现页内跳转

Google了一下,有两种方式在MarkDown中实现这两个功能:

  1. MarkDown实现

生成目录的方法:

* [1.语法示例](#1)

* [1.1图片](#1.1)

* [1.2换行](#1.2)

* [1.3强调](#1.3)

生成效果:

在正文中,只要将章节标题的id对应上去即可:

<h2 id="1">1.语法示例</h2>

这是第一段

这是第一段

这是第一段

这是第一段

这是第一段

<h3 id="1.1">1.1图片</h3>

这是第一段第一节

这是第一段第一节

这是第一段第一节

这是第一段第一节

这是第一段第一节

<h3 id="1.2">1.2换行</h3>

这是第一段第二节

这是第一段第二节

这是第一段第二节

这是第一段第二节

这是第一段第二节

<h3 id="1.1">1.3强调</h3>

这是第一段第三节

这是第一段第三节

这是第一段第三节

这是第一段第三节

这是第一段第三节

生成效果:

1.语法示例

这是第一段

这是第一段

这是第一段

这是第一段

这是第一段

1.1图片

这是第一段第一节

这是第一段第一节

这是第一段第一节

这是第一段第一节

这是第一段第一节

1.2换行

这是第一段第二节

这是第一段第二节

这是第一段第二节

这是第一段第二节

这是第一段第二节

1.3强调

这是第一段第三节

这是第一段第三节

这是第一段第三节

这是第一段第三节

这是第一段第三节

点击目录,发现可以页内跳转了。

2.html标签实现

  1. 定义一个锚(id):<span id="jump">跳转到的地方</span>
  2. 使用markdown语法:[点击跳转](#jump)

在文章末尾设置一个锚,然后跳转到文章开始的地方。

点击跳转

如果喜欢,觉得有收获,请点推荐,谢谢!

给我打赏,buy me a cup of coffee!

MarkDown技巧:两种方式实现页内跳转