天天看点

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

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

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

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

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

如下图中的目录一样。

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

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

markdown实现

生成目录的方法:

<code>* [1.语法示例](#1)</code>

<code>* [1.1图片](#1.1)</code>

<code>* [1.2换行](#1.2)</code>

<code>* [1.3强调](#1.3)</code>

生成效果:

<a href="http://www.cnblogs.com/johntsai/p/4027229.html#1">1.语法示例</a>

<a href="http://www.cnblogs.com/johntsai/p/4027229.html#1.1">1.1图片</a>

<a href="http://www.cnblogs.com/johntsai/p/4027229.html#1.2">1.2换行</a>

<a href="http://www.cnblogs.com/johntsai/p/4027229.html#1.3">1.3强调</a>

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

<code>&lt;h2 id="1"&gt;1.语法示例&lt;/h2&gt;</code>

<code>这是第一段</code>

<code>&lt;h3 id="1.1"&gt;1.1图片&lt;/h3&gt;</code>

<code>这是第一段第一节</code>

<code>&lt;h3 id="1.2"&gt;1.2换行&lt;/h3&gt;</code>

<code>这是第一段第二节</code>

<code>&lt;h3 id="1.1"&gt;1.3强调&lt;/h3&gt;</code>

<code>这是第一段第三节</code>

这是第一段

这是第一段第一节

这是第一段第二节

这是第一段第三节

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

2.html标签实现

定义一个锚(id):<code>&lt;span id="jump"&gt;跳转到的地方&lt;/span&gt;</code>

使用markdown语法:<code>[点击跳转](#jump)</code>

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

<a href="http://www.cnblogs.com/johntsai/p/4027229.html#jump">点击跳转</a>

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

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