microsoft / microsoft/vscode

[Feature] Markdown Preview: Table of Contents with persistent visibility & Code block language labels

Open
#332,300 0 comments 0 reactions 1 assignee Claimed by @hediet View on GitHub
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.