Floating TOC for Markdown Preview
在 VSCode 内置 Markdown 预览中展示浮动目录（Floating TOC），类似 Chrome 的 SmartTOC 插件。
功能
- 展开 / 贴边吸附：目录面板可展开或吸附到预览右边缘，吸附时仅显示竖排 “TOC” 标签，点击标签重新展开。
- 滚动归属切换：默认由预览页面响应滚轮；鼠标移入 TOC 面板或点击面板后，滚轮滚动目录列表；鼠标移出面板或点击面板外部，恢复页面响应滚动。
- 当前标题高亮：随页面滚动自动高亮当前所在标题（首标题前高亮第一个，滚到页底高亮最后一个）；颜色使用 VSCode 主题变量，自动适配深色 / 浅色主题。
- 窄屏自动吸附：当预览宽度 ≤ 350px（面板宽 300 + 余量 50）时，页面滚动期间面板自动吸附，滚动停止约 250ms 后恢复之前的状态（展开或保持吸附）。
- 标题折叠：含子标题的条目前显示折叠箭头，点击收起/展开整个子树；折叠状态在文档编辑重建后保留；当前高亮标题被折叠时高亮其最近可见的祖先。
- 毛玻璃面板：半透明背景 + 背景模糊，透出预览内容。
- 滚动进度条：面板停靠边缘显示当前阅读位置在全文的比例。
- 快捷键：预览聚焦时按
Ctrl+Alt+T（macOS Cmd+Alt+T）切换面板展开/吸附（在 webview 内直接监听，只响应当前聚焦的预览窗口）。
外观自定义
面板宽度、毛玻璃强度等外观参数定义为 --ftoc-* CSS 变量，可通过 VSCode 的
markdown.styles 设置引入自定义 CSS 文件覆盖，例如：
/* my-markdown-style.css */
:root {
--ftoc-glass-opacity: 0.1; /* 毛玻璃背景不透明度（0~1），默认 0.03 */
--ftoc-glass-blur: 20px; /* 模糊半径，默认 12px */
--ftoc-saturate: 1.8; /* 饱和度，默认 1.8 */
}
#floating-toc {
--ftoc-position: left; /* 左停靠（默认 right） */
}
然后在设置中指向该文件："markdown.styles": ["/absolute/path/to/my-markdown-style.css"]。
注意：--ftoc-width（默认 300px）需与 media/preview.js 中的
PANEL_WIDTH 保持一致，否则窄屏自动吸附阈值会与面板实际宽度不符。
使用
- 在 VSCode 中打开本目录，按
F5 启动扩展开发宿主；或打包安装：
npx @vscode/vsce package
code --install-extension floating-toc-<version>.vsix
- 打开任意 Markdown 文件，按
Cmd+Shift+V（macOS）/ Ctrl+Shift+V 打开预览。
实现说明
- 通过官方贡献点
markdown.previewScripts / markdown.previewStyles 将脚本与样式注入内置 Markdown 预览 webview，无需 markdown-it 插件，TOC 直接作用于 VSCode 渲染的标题元素。
- 预览内容随编辑更新时，通过
MutationObserver 原地重建目录，并保留列表滚动位置、高亮项与折叠状态。
- 本插件为纯贡献点插件（无扩展宿主进程）：VSCode 没有将扩展配置/命令传入 Markdown 预览 webview 的通道，因此快捷键在 webview 内用原生 keydown 实现，外观自定义走官方支持的
markdown.styles CSS 覆盖通道。
| |
