[Obs＃28] 與Table of Contents外掛相關的幾個HTML小技巧

前言

除非你是標準的顏控，否則本次介紹的CSS技巧其實不建議使用，因為會破壞Markdown的單純性，會「污染」你的筆記文件…

Table of Contents

目錄標題置中

<p style="text-align:center"><mark>目 錄</mark></p>

目 錄

跳回頁首的幾個作法 [[Obs＃28 Table of Contents#^toc|]]

1. 基本想法：使用區塊代碼，在==目錄==文字後面加上區塊代碼^toc
2. 在各個段落開頭加上[[#^toc]]以跳至區塊^toc位置

[[#^toc| ]]

美化1

• 加上顯示文字：[[#^toc|回頁首]]
  [[Obs＃28 Table of Contents#^toc|回頁首]]
• 或用Emoji：[[#^toc|⬆️]]
  [[Obs＃28 Table of Contents#^toc|]]
• 會造成產生的目錄連結失敗

美化2

• 讓文字或Emoji靠右

<

p style=”text-align:right”>

<span style="text-align:right">
  <a class="internal-link" href="#^toc">⬆️</a>
</span>

發現的問題

• 匯出PDF時，內部連結皆無法點擊
• 無法產生PDF的書籤

教學影片

＃＃您可能也會有興趣的類似文章

• Obsidian(黑曜石) 高亮度顯示或變更文字顏色的3種方法 (0則留言, 2020/07/01)
• 自動產生文章目錄的WordPress外掛：jQuery Table of Contents (2則留言, 2010/06/13)
• 使用Marp以Markdown快速製作簡報，並匯出HTML、PPTX與PDF (3則留言, 2019/08/31)
• KindleGen與Markdown轉換為Mobi的Kindle電子書工具：m2m.exe (2則留言, 2015/08/30)
• 用Markdown寫書：使用mdBook超簡單 (0則留言, 2020/04/25)
• [WordPress 3] 以Child Theme機制修改Twenty Eleven佈景主題為中文版 (0則留言, 2012/01/19)
• [jQuery] 動態建立元素的事件觸發 (0則留言, 2015/10/25)
• [Obs＃25] 美化筆記的兩個外掛：Emoji Toolbar與Icons與自訂CSS樣式 (0則留言, 2021/01/30)
• 〔WordPress〕 前/後篇文章導航連結增加文章標題 (1則留言, 2012/03/12)
• WordPress瀏覽圖片的FancyBox外掛 (8則留言, 2010/07/10)
• 與銀湯匙Spoon漫步在雲端 (0則留言, 2011/08/07)
• [HTML&CSS] 鎖定左側功能選單，不隨頁面捲動 (0則留言, 2007/04/05)
• 第一個jqGrid範例：Local array (1則留言, 2010/02/13)
• dp.SyntaxHighlighter: 在網頁顯示美觀的程式碼 (2則留言, 2007/02/16)
• [WordPress] Google Chrome瀏覽器無法正確顯示SyntaxHighlighter外掛的程式碼 (1則留言, 2012/08/22)