Markdown Preview Selection Sync
Automatically sync text selection from Markdown preview to your source editor.
Why Use This?
When working with AI assistants like Claude Code, Copilot, or other tools that read your editor selection, you often want to reference specific content from your markdown preview. This extension bridges that gap by automatically selecting the corresponding source lines when you select text in the preview.
Features
- ✨ Automatic Selection Sync: Select text in the preview, see it selected in the source
- 🎯 Block-Level Precision: Selects the corresponding lines in your markdown source
- 🚀 Zero Configuration: Works out of the box with VS Code's markdown preview
- 🔄 Multi-File Support: Handles multiple markdown files and preview tabs
- ⚡ Lightweight: Minimal performance impact, no external dependencies
How It Works
- Open a markdown file and its preview:
- Side-by-side: Ctrl+K V or Cmd+K V (preview opens in split editor)
- Separate tab: Alt+Click on preview icon (preview opens in new tab)
- Select any text in the preview by clicking and dragging
- Release the mouse button
- The extension automatically selects the corresponding lines in your source editor
- Your cursor moves to the source editor with the selection highlighted
Works with both preview modes:
- ✅ Side-by-side preview (split editor group)
- ✅ Separate tab preview (dedicated preview tab)
Use Cases
- AI Assistants: Quickly reference preview content when chatting with Claude, Copilot, or other AI tools
- Content Review: Easily jump to source lines while reviewing rendered content
- Documentation: Navigate between preview and source while editing docs
- Collaboration: Point team members to specific content during reviews
Installation
From VS Code Marketplace
- Open VS Code
- Go to Extensions (Ctrl+Shift+X or Cmd+Shift+X)
- Search for "Markdown Preview Selection Sync"
- Click Install
Extension Settings
This extension contributes the following settings:
markdownPreviewSelectionSync.requireModifierKey: Require holding a modifier key (Ctrl/Cmd/Alt) while selecting text to trigger sync. When enabled, normal text selection works without syncing. (Default: false)markdownPreviewSelectionSync.modifierKey: Which modifier key to use when requireModifierKey is enabled. Options: ctrl, alt, meta (Cmd on Mac, Windows key on Windows/Linux). (Default: ctrl)markdownPreviewSelectionSync.maxSearchLines: Maximum number of lines to search when finding multi-line selections. (Default: 50)
Example: Enable Ctrl+Click activation
To prevent accidental selection syncing and only trigger when holding Ctrl:
- Open VS Code Settings (Ctrl+, or Cmd+,)
- Search for "Markdown Preview Selection Sync"
- Enable "Require Modifier Key"
- Select your preferred modifier key (Ctrl, Alt, or Meta)
Now selections will only sync when you hold the modifier key while selecting text in the preview.
Contributing
Contributions are welcome! Please see the Development Instructions for setup and development workflow.
License
MIT - See LICENSE file for details
Author
Alexander Zanfir
Enjoy using Markdown Preview Selection Sync! If you find it useful, please leave a rating on the VS Code Marketplace.
