A table of contents for the Inkdrop Markdown preview: lines that follow your reading position and a panel of links on hover.
- Lines. Each heading is a short line at the right edge of the preview. Deeper headings get shorter lines, and the lines of the sections on screen are highlighted as you scroll. Long outlines are compressed to fit the preview.
- Panel. Hover over the lines and a panel slides out with the headings as links. The heading you are reading is shown in the accent color; click any heading to scroll to it.
- Clean outline. Footnote headings and headings hidden in a closed
<details>are left out, and the outline updates as the note changes. - Clear text. While the lines are shown, the preview gets extra padding on the right so they never cover the note.
- Theme and accessibility. Follows the active theme, works with the keyboard and respects the system's reduced motion setting.
Inkdrop for desktop, version ≥ 6.1.3 and < 7. Inkdrop doesn't support plugins on mobile.
Install the plugin with ipm, Inkdrop's package manager:
ipm install pretty-tocYou can also search for pretty-toc in the Install tab of the Preferences window. See
Extend Inkdrop with plugins for details.
Open a note in preview or side-by-side mode. The lines appear at the right edge of the preview once the note has at least two headings.
| Action | Mouse | Keyboard |
|---|---|---|
| Open the panel | Hover over the lines | Run pretty-toc:open |
| Move between headings | ↑ / ↓, Home / End | |
| Jump to a heading | Click it | Enter |
| Close the panel | Move the cursor away | Esc |
| Show or hide the lines | Preview context menu | Run pretty-toc:toggle |
The lines can also be reached with Tab: Enter, Space or ↓ then opens the panel.
| Command | macOS | Windows and Linux |
|---|---|---|
pretty-toc:open |
Cmd+Option+L | Ctrl+Shift+Alt+L |
pretty-toc:toggle |
Cmd+Option+O | Ctrl+Shift+Alt+O |
Both commands are also in the Plugins › Pretty TOC menu.
Open Preferences › Plugins › pretty-toc on macOS, or File › Settings › Plugins › pretty-toc on Windows and Linux.
| Setting | Default | Description |
|---|---|---|
| Show table of contents | on | Changed by pretty-toc:toggle |
| Deepest heading level | 4 | Headings below this level (1–6) are left out |
| Minimum number of headings | 2 | Notes with fewer headings get no table of contents |
| Smooth scrolling | on | Animate the jump to a heading |
If the lines don't appear, or pretty-toc:open does nothing, check that:
- The preview is showing. Edit mode hides it, and the lines with it.
- Show table of contents is on.
- The note has enough headings. Only headings that end up in the outline count toward Minimum
number of headings, so those below Deepest heading level or hidden in a closed
<details>don't.
Building requires Node.js ^22.18.0, ^24.11.0 or ≥ 26, pnpm and ipm.
git clone https://github.com/inkwadra/pretty-toc.git
cd pretty-toc
pnpm install
pnpm build # production build into lib/
ipm link --dev # symlink into dev/packages in your Inkdrop data directoryPlugins in dev/packages load only in Development Mode: turn it on in the General tab of
Inkdrop's Preferences (File › Settings on Windows and Linux).
After rebuilding, reload Inkdrop with Cmd+Option+Shift+R on macOS, or Ctrl+Alt+R on Windows and Linux.
| Command | Purpose |
|---|---|
pnpm dev |
Rebuild on change |
pnpm lint |
Lint with oxlint |
pnpm format |
Format with oxfmt |
pnpm format:check |
Check the formatting |
The project has no automated tests, so try changes in Inkdrop before opening a pull request.
The component is added to the mde layout, next to the editor, and reads the headings (with the
ids Inkdrop's rehype-slug gives them) straight from the rendered preview.
Bugs and ideas are welcome in GitHub Issues.