MarkDown技巧:兩種方式實現頁內跳轉
阿新 • • 發佈:2019-02-16
跳轉到的地方未看完全文請忽略這個:)
最近,無論是在部落格園還是在自己的部落格寫文章,都是用的MarkDownPad2寫的。喜歡MarkDown這種簡單直觀的寫作方式。
但是寫文章時,突然發現如果寫了一篇很長的文章,要是沒有目錄的話。閱讀起來十分不便。頁內跳轉就能很好的解決這個問題。
如下圖中的目錄一樣。
Google了一下,有兩種方式在MarkDown中實現這兩個功能:
- 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標籤實現
- 定義一個錨(id):
<span id="jump">跳轉到的地方</span>
- 使用markdown語法:
[點選跳轉](#jump)
在文章末尾設定一個錨,然後跳轉到文章開始的地方。