[Feature] Markdown Preview: Table of Contents with persistent visibility & Code block language labels
- Dominant language
- TypeScript
- Stars
- 193k
- Forks
- 42.4k
- PR merge metrics
- PR metrics pending
Description
This issue tracks the implementation of two new features for the Markdown preview. **A PR has already been created implementing these features.**
Features Requested
**1. Table of Contents (TOC) Sidebar**
Requirements:
- Display a collapsible sidebar on the left of the Markdown preview showing all document headings (h1–h6)
- Indent entries by heading level
- Highlight the active heading based on scroll position in the preview
- Toolbar button to toggle TOC visibility with checkbox state
- Persistence: Remember visibility preference across:
- Preview tab close/reopen
- VS Code restart
- Resizable sidebar width (drag handle), persisted across sessions
- Context key `markdown.tocVisible` for keybinding/menu integration
Auto-scroll behavior:
- When scrolling the document, the TOC panel should scroll minimally to keep the active entry visible (with small edge gap)
- Clicking a TOC entry manually should navigate without scrolling the TOC panel
- First/last headings should be able to reach the true top/bottom of the TOC panel (no visual gap when selected)
**2. Code Block Language Labels**
Requirements:
- Display a language badge in the top-right corner of fenced code blocks
- Theme-aware styling using design tokens (`--vscode-editorCodeBlockLabel-background/foreground`)
- Works in light, dark, and high contrast themes
#### Related PR
PR #332274
Contributor guide
Assessment
This issue has not been assessed yet.