1. 程式人生 > >MarkDown技巧:兩種方式實現頁內跳轉

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

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

最近,無論是在部落格園還是在自己的部落格寫文章,都是用的MarkDownPad2寫的。喜歡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)

在文章末尾設定一個錨,然後跳轉到文章開始的地方。

點選跳轉