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

最新推荐文章于 2024-07-08 09:30:00 发布

This is bill

最新推荐文章于 2024-07-08 09:30:00 发布

阅读量1.1k

点赞数 1

分类专栏：技巧

技巧专栏收录该内容

140 篇文章 2 订阅

订阅专栏

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

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

id="iframe_0.022781837498769164" src="data:text/html;charset=utf8,%3Cimg%20id=%22img%22%20src=%22http://ww3.sinaimg.cn/large/8942f980gw1elc1jxqdyhj20rz0cqtbt.jpg?_=4027229%22%20style=%22border:none;max-width:960px%22%3E%3Cscript%3Ewindow.onload%20=%20function%20()%20%7Bvar%20img%20=%20document.getElementById('img');%20window.parent.postMessage(%7BiframeId:'iframe_0.022781837498769164',width:img.width,height:img.height%7D,%20'http://www.cnblogs.com');%7D%3C/script%3E" frameborder="0" scrolling="no" style="box-sizing: border-box; border-style: none; border-width: initial; width: 960px; height: 437px;">

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

如下图中的目录一样。
id="iframe_0.7495881342329085" src="data:text/html;charset=utf8,%3Cimg%20id=%22img%22%20src=%22http://ww1.sinaimg.cn/large/8942f980gw1elc2idr8paj20wc0fldgz.jpg?_=4027229%22%20style=%22border:none;max-width:960px%22%3E%3Cscript%3Ewindow.onload%20=%20function%20()%20%7Bvar%20img%20=%20document.getElementById('img');%20window.parent.postMessage(%7BiframeId:'iframe_0.7495881342329085',width:img.width,height:img.height%7D,%20'http://www.cnblogs.com');%7D%3C/script%3E" frameborder="0" scrolling="no" style="box-sizing: border-box; border-style: none; border-width: initial; width: 960px; height: 463px;">

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

MarkDown实现

生成目录的方法:

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

* [1.1图片](#1.1)

* [1.2换行](#1.2)

* [1.3强调](#1.3)

生成效果:

1.语法示例

在正文中，只要将章节标题的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>

这是第一段第三节

这是第一段第三节

这是第一段第三节

这是第一段第三节

这是第一段第三节