提示氣泡與縮寫（Tooltips）

技術文件常有很多縮寫，新手可能看不懂。Zensical 結合幾個 Markdown 擴充，讓你可以加上提示氣泡、縮寫說明，甚至建立全站共用的詞彙表（glossary）。

zensical.toml 設定

[project.markdown_extensions]
abbr = {}
attr_list = {}
pymdownx.snippets = {}

改善的提示氣泡

預設情況下，title 屬性是瀏覽器的原生提示，樣式很陽春。啟用 content.tooltips 後，Zensical 會改用漂亮的提示氣泡：

[project.theme]
features = [
  "content.tooltips",
]

啟用後，下列元素都會使用新的提示氣泡：

• 內容：帶有 title 的元素、標題的永久連結、程式碼複製按鈕
• 頁首：首頁按鈕、頁首標題、色彩切換、程式庫連結
• 導覽：被縮短（...）的連結

本教學網站已啟用，把滑鼠移到下面的範例上看看。

替連結加上提示氣泡

Markdown 的連結語法本來就能指定 title：

原始程式

[把滑鼠移上來](https://example.com "我是提示氣泡！")

輸出結果

把滑鼠移上來

參考式連結也可以：

[把滑鼠移上來][example]

[example]: https://example.com "我是提示氣泡！"

其他元素則用 Attribute Lists 加上 title：

原始程式

:material-information-outline:{ title="重要資訊" }

輸出結果

縮寫（Abbreviations）

縮寫的定義語法很像註腳：以 * 開頭，接著是方括號裡的詞，冒號後面是完整說明。整份文件中所有符合的詞都會加上提示：

原始程式

HTML 規格是由 W3C 維護的。

*[HTML]: Hyper Text Markup Language
*[W3C]: World Wide Web Consortium

輸出結果

HTML 規格是由 W3C 維護的。

全站詞彙表（Glossary）

每頁都重複寫縮寫定義很麻煩。可以把定義集中放在一個檔案，再用 Snippets 的 auto_append 自動附加到所有頁面。

步驟 1：建立 includes/abbreviations.md

*[HTML]: Hyper Text Markup Language
*[W3C]: World Wide Web Consortium

步驟 2：在 zensical.toml 設定自動附加

[project.markdown_extensions.pymdownx.snippets]
auto_append = [
  "includes/abbreviations.md",
]

總結

註腳的提示氣泡見 註腳。

參考資料

• Tooltips - Zensical