MarkDown技巧：兩種方式實現頁內跳轉

MarkDown技巧：兩種方式實現頁內跳轉

本人郵箱：[e-mail],歡迎交流討論。
歡迎轉載，轉載請注明網址:http://www.cnblogs.com/JohnTsai
個人博客地址:http://johntsaiandroid.github.io

---

跳轉到的地方未看完全文請忽略這個:)

最近，無論是在博客園還是在自己的博客寫文章，都是用的MarkDownPad2寫的。喜歡MarkDown這種簡單直觀的寫作方式。

但是寫文章時，突然發現如果寫了一篇很長的文章，要是沒有目錄的話。閱讀起來十分不便。頁內跳轉就能很好的解決這個問題。

如下圖中的目錄一樣。

Google了一下，有兩種方式在MarkDown中實現這兩個功能:

1. MarkDown實現

生成目錄的方法:

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

* [1.1圖片](#1.1)

* [1.2換行](#1.2)

* [1.3強調](#1.3)

生成效果:

• 1.語法示例
  • 1.1圖片
  • 1.2換行
  • 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!