什么是脚注
脚注（Footnote）是出现在页面底部的注释或引用，通过上标数字与正文关联1脚注可以补充说明术语、概念或背景知识，而不打断正文的阅读节奏。。技术文档和学术论文中广泛使用。
基础语法
使用 GitHub Flavored Markdown 风格：
正文中使用 [^id] 引用脚注[^example]。
[^example]: 在文档任意位置定义脚注内容，会自动移到页面底部。效果：正文中使用 [^id] 引用脚注2在文档任意位置定义脚注内容，会自动移到页面底部。。
编号规则
脚注编号按照正文中首次出现的顺序分配3这样可以确保读者按阅读顺序理解脚注，即使定义顺序不同。，而不是定义顺序。
提到了 B[^beta] 和 A[^alpha]。
[^alpha]: 定义 A[^beta]: 定义 B显示为：B¹ 和 A²
多次引用
同一脚注可以被引用多次4脚注定义区会显示多个返回链接：↩¹ ↩²，分别对应每次引用。，每次引用都会生成独立的链接4脚注定义区会显示多个返回链接：↩¹ ↩²，分别对应每次引用。。
Docker[^docker] 是容器化平台... 后文又提到 Docker[^docker]。
[^docker]: Docker 定义富文本支持
脚注内容支持 粗体、斜体、代码、链接 等格式5也可以包含多段内容，但推荐保持简洁，避免过长的脚注干扰阅读。。
交互功能
桌面端
- Hover 预览：鼠标悬停在上标数字上，300ms 后显示 tooltip 预览脚注内容6Tooltip 会智能调整位置，避免超出视口边界。
- 点击跳转：点击上标数字跳转到页面底部的脚注定义
- 返回链接：点击 ↩ 返回正文中的引用位置
移动端
- 长按预览：在触屏设备上，长按上标数字 500ms 显示预览7滑动或抬起手指会取消预览。预览显示 2 秒后自动隐藏。
- 点击跳转：短按跳转到脚注定义区
- 平滑滚动：跳转时带有高亮动画
技术术语示例
在技术文章中，脚注特别适合解释术语：
- Docker8Docker 是一个开源的容器化平台，使用 Linux 内核特性（namespaces、cgroups）实现进程隔离。 使用容器化技术
- Promise9Promise 代表异步操作的最终结果，有三种状态：pending（待定）、fulfilled（已兑现）、rejected（已拒绝）。 是异步编程的解决方案
- TypeScript10TypeScript 在 JavaScript 基础上添加了静态类型系统，在编译时检查类型错误。 是 JavaScript 的超集
样式细节
| 元素 | 说明 |
|---|---|
| 上标数字 | 蓝色链接，0.82em 大小 |
| Hover 预览 | 卡片式 tooltip，最大宽度 320px |
| 脚注区 | 浅色背景，圆角卡片 |
| 返回链接 | 灰色箭头（↩），hover 时蓝色 |
无障碍支持
- 使用语义化 HTML 标签
- ARIA 角色标注（
role="doc-noteref"/role="doc-endnote"） - 支持屏幕阅读器
- 键盘导航友好
总结
脚注系统的核心特性11实现方式：自定义 remark 插件解析 Markdown，生成带 tooltip 的 HTML，配合 CSS 动画和原生 JavaScript 交互。：
- GitHub 风格语法
- 按引用顺序编号
- Hover 预览（桌面）
- 长按预览（移动）
- 多次引用支持
- 平滑滚动与高亮
- 无障碍访问
脚注可以补充说明术语、概念或背景知识，而不打断正文的阅读节奏。
↩在文档任意位置定义脚注内容，会自动移到页面底部。
↩这样可以确保读者按阅读顺序理解脚注，即使定义顺序不同。
↩也可以包含多段内容，但推荐保持简洁，避免过长的脚注干扰阅读。
↩Tooltip 会智能调整位置，避免超出视口边界。
↩滑动或抬起手指会取消预览。预览显示 2 秒后自动隐藏。
↩Docker 是一个开源的容器化平台，使用 Linux 内核特性（namespaces、cgroups）实现进程隔离。
↩Promise 代表异步操作的最终结果，有三种状态：pending（待定）、fulfilled（已兑现）、rejected（已拒绝）。
↩TypeScript 在 JavaScript 基础上添加了静态类型系统，在编译时检查类型错误。
↩实现方式：自定义 remark 插件解析 Markdown，生成带 tooltip 的 HTML，配合 CSS 动画和原生 JavaScript 交互。
↩
评论
GitHub 登录后可评论。
评论区会在滚动到这里时自动加载。