Markdown Auto Preview Toggle
A simple VS Code extension that provides a status bar button to toggle auto-preview mode for markdown files. See source code here
Quick demo showing the toggle functionality in action
Features
- Status Bar Toggle: A convenient button in the status bar to quickly toggle markdown auto-preview
- Visual Indicator: The button shows different icons and colors based on the current state:
- 👁️ (eye) with highlighted background when auto-preview is enabled
- 👁️🗨️ (eye-closed) when auto-preview is disabled
- Global Setting: Changes are applied globally using VS Code's
workbench.editorAssociations setting
- Automatic State Detection: The extension detects the current state on startup and updates accordingly
Auto-Preview Enabled
|
Auto-Preview Disabled
|
How It Works
The extension toggles the workbench.editorAssociations setting for *.md files between:
- Enabled:
"*.md": "vscode.markdown.preview.editor" - Markdown files open in preview mode by default
- Disabled: No association (removed) - Markdown files open in the editor normally
Usage
Installation
Option 1: VS Code Marketplace (Recommended)
- Open VS Code
- Go to Extensions (Ctrl+Shift+X)
- Search for "Markdown Auto Preview Toggle"
- Click Install
Option 2: Direct Link
Quick Start
- Look for the eye icon in the status bar (bottom right)
- Click the button to toggle between auto-preview enabled/disabled
- The icon and background will update to reflect the current state
- A notification will confirm the change
Alternative: Command Palette
You can also use the command palette (Ctrl+Shift+P / Cmd+Shift+P) and search for "Toggle Markdown Auto Preview".
Development
To run and test this extension:
- Open this folder in VS Code
- Press
F5 to open a new Extension Development Host window
- In the new window, look for the eye icon in the status bar
- Open the included
test-markdown.md file to test the functionality
Extension Settings
This extension modifies the following VS Code setting:
workbench.editorAssociations: Controls which editor to use for specific file types
- When enabled:
"*.md": "vscode.markdown.preview.editor"
- When disabled: The
*.md association is removed
Commands
markdown-auto-preview-toggle.toggle: Toggle Markdown Auto Preview
Troubleshooting:
- Why do I click and it doesn't update the preview
Verify that the settings.json for the workspace doesn't contain the following settings:
{
"workbench.editorAssociations": {
"*.md": "vscode.markdown.preview.editor"
},
}
If present, delete them.
Release Notes
0.0.1
Initial release with basic toggle functionality:
- Status bar button for quick access
- Visual state indicators
- Global setting management
- Automatic state detection
Following extension guidelines
Ensure that you've read through the extensions guidelines and follow the best practices for creating your extension.
Working with Markdown
You can author your README using Visual Studio Code. Here are some useful editor keyboard shortcuts:
- Split the editor (
Cmd+\ on macOS or Ctrl+\ on Windows and Linux).
- Toggle preview (
Shift+Cmd+V on macOS or Shift+Ctrl+V on Windows and Linux).
- Press
Ctrl+Space (Windows, Linux, macOS) to see a list of Markdown snippets.
Enjoy!
