You just wrote a README file. But does it actually look right?
Learning how to view Markdown in VSCode takes about 30 seconds, yet many developers skip this step and push broken formatting to their repositories.
Visual Studio Code includes a built-in preview feature that renders your .md files instantly. No extensions required.
This guide covers everything: keyboard shortcuts for the live preview pane, side-by-side editing, customizing preview settings, and fixing common display issues.
By the end, you’ll preview Markdown files faster than you can type “Ctrl+Shift+V.”
How to View Markdown in VSCode
Viewing Markdown in VSCode is the process of rendering .md files as formatted text using the built-in preview feature or keyboard shortcuts.
Users need this when writing README files, creating technical documentation, or drafting content for the web.
This guide covers 4 steps requiring about 2 minutes and Visual Studio Code version 1.80 or later.
Prerequisites
Before you start, make sure you have these ready:
- Visual Studio Code version 1.80 or later installed on Windows, macOS, or Linux
- A Markdown file with the .md or .markdown file extension saved on your system
- Basic familiarity with keyboard shortcuts
- Time estimate: 2 minutes
If you need help setting up your web development IDE, check the official VSCode download page first.
Step One: How Do You Open a Markdown File in VSCode?
Open your .md file through File > Open File, drag and drop it into the editor, or use Ctrl+O (Cmd+O on Mac). The editor tab displays the filename with syntax highlighting for headings, links, and code blocks.
Action
- File path: File > Open File > select your .md file
- Drag method: Drag the file directly into the VSCode window
- Result: File opens with Markdown syntax highlighting active
Purpose
The code editor needs the file loaded before the preview pane can render anything.
VSCode automatically detects the .md extension and applies proper text formatting rules.
Step Two: How Do You Open Markdown Preview in a New Tab?
Press Ctrl+Shift+V (Cmd+Shift+V on Mac) to open a full preview window in a separate editor tab. You can also access this through the Command Palette by typing “Markdown: Open Preview” and selecting it from the list.
Action
- Keyboard shortcut: Ctrl+Shift+V (Windows/Linux) or Cmd+Shift+V (Mac)
- Command Palette path: View > Command Palette > type “Markdown: Open Preview”
- Result: Preview opens in a new tab showing rendered formatted text
Purpose
Full-tab preview mode works best when you want maximum screen space for reviewing your document.
Good for final reviews before committing software documentation to your repository.
Step Three: How Do You Open Side-by-Side Markdown Preview?
Press Ctrl+K, then V (Cmd+K V on Mac) to open the live preview pane next to your source code. The split view shows real-time editing with automatic scroll sync between both panels.
Action
- Keyboard shortcut: Ctrl+K V (Windows/Linux) or Cmd+K V (Mac)
- Alternative: Right-click the editor tab > select “Open Preview to the Side”
- Result: Editor and preview pane display side-by-side with synchronized scrolling
Purpose
Side-by-side preview lets you see changes reflected instantly as you type.
Most developers prefer this for active documentation writing since you catch formatting errors immediately.
Step Four: How Do You Customize Markdown Preview Settings?
Access preview customization through File > Preferences > Settings, then search for “markdown.preview” to find all available options.
You can also edit settings directly by learning how to open settings.json in VSCode.
Action
- Settings path: File > Preferences > Settings > search “markdown.preview”
- Scroll sync toggle: markdown.preview.scrollPreviewWithEditor (true/false)
- Custom styles: Add CSS paths to markdown.styles array in settings.json
Purpose
Workspace settings let you control scroll sync behavior, font sizes, and line height in the preview pane.
Custom CSS styling matches your preview rendering to your project’s documentation standards.
Verification
Confirm your markdown preview setup works correctly by checking these indicators:
- Preview pane displays formatted headings, bullet lists, and hyperlinks
- Real-time updates appear when editing the .md file
- Scroll positions sync between editor and preview window (if enabled)
- Images and code blocks render with proper syntax highlighting
Double-click any line in the preview to jump directly to that section in your source code.
Troubleshooting
Preview Shows Raw Text Instead of Formatted Output
Check that your file extension is .md or .markdown, not .txt.
Restart VSCode and disable any conflicting extensions temporarily.
Preview Does Not Update When Editing
Open Settings and search “markdown.preview.doubleClickToSwitchToEditor” to verify auto-refresh is enabled.
Close and reopen the preview pane with Ctrl+Shift+V.
Images Not Displaying in Preview
Use relative paths from the Markdown file location, not absolute system paths.
Check preview security settings: Command Palette > “Markdown: Change Preview Security Settings” > select “Allow insecure local content” if needed.
Preview Pane Opens But Shows Blank Content
Your file might be empty or contain only whitespace.
Try adding a simple heading like “# Test” to confirm the markdown rendering engine works.
Extensions for Advanced Preview
The built-in preview handles most needs, but these extensions add extra features:
- Markdown All in One (yzhang.markdown-all-in-one): Table of contents generation, auto-completion, linting, and keyboard shortcuts
- Markdown Preview Enhanced (shd101wyy.markdown-preview-enhanced): Mermaid diagrams, KaTeX math equations, PDF export
- Markdown Preview GitHub Styling (bierner.markdown-preview-github-styles): Matches GitHub Flavored Markdown appearance exactly
Install through the Extension Marketplace: Ctrl+Shift+X, search the extension name, click Install.
Related Processes
After setting up your Markdown viewer, these guides help you work faster:
- How to connect VSCode to GitHub for pushing documentation changes
- How to format code in VSCode for consistent styling
- How to open terminal in VSCode for running build commands
- How to comment in VSCode for annotating your files
The Document Outline view in File Explorer shows your header hierarchy for quick navigation through large files.
FAQ on How To View Markdown In Vscode
What Is the Keyboard Shortcut to Preview Markdown in VSCode?
Press Ctrl+Shift+V (Cmd+Shift+V on Mac) to open the preview in a new tab. For side-by-side preview, use Ctrl+K then V. Both shortcuts work on any .md or .markdown file without extensions.
Can I View Markdown Side-by-Side With the Editor?
Yes. Press Ctrl+K V to open the live preview pane next to your source code. The split view updates in real-time as you type, with synchronized scrolling between both panels.
Why Is My Markdown Preview Not Showing?
Check your file extension is .md or .markdown. Restart Visual Studio Code if the preview pane stays blank. Disable conflicting extensions temporarily and verify your VSCode version is 1.80 or later.
How Do I Enable Scroll Sync Between Editor and Preview?
Open Settings (Ctrl+,) and search “markdown.preview.scrollPreviewWithEditor.” Set it to true. The companion setting “scrollEditorWithPreview” syncs scrolling in both directions for seamless document navigation.
What Extensions Improve Markdown Preview in VSCode?
Markdown All in One adds table of contents and auto-completion. Markdown Preview Enhanced supports Mermaid diagrams and KaTeX math. Markdown Preview GitHub Styling matches GitHub Flavored Markdown appearance exactly.
Can I Customize the Markdown Preview Style?
Yes. Add custom CSS file paths to the “markdown.styles” array in your settings.json. You can change fonts, colors, line height, and code block styling to match your project’s documentation standards.
Does VSCode Support GitHub Flavored Markdown?
The built-in preview supports CommonMark plus some GitHub extensions like tables and task lists. Install the Markdown Preview GitHub Styling extension for complete GitHub Flavored Markdown rendering with identical appearance.
How Do I Preview Markdown in a New Tab Instead of Split View?
Use Ctrl+Shift+V (Cmd+Shift+V on Mac) to open the preview as a separate editor tab. This gives you the full window width for reviewing formatted text before committing to source control.
Why Are Images Not Displaying in My Markdown Preview?
Use relative paths from your Markdown file location. Absolute paths often fail. Check preview security settings through Command Palette > “Markdown: Change Preview Security Settings” if local images remain blocked.
Can I Export Markdown to PDF From VSCode?
Not with built-in features. Install Markdown Preview Enhanced or Markdown PDF extension for export options. These support PDF, HTML, and image output directly from your rendered preview pane.
Conclusion
Knowing how to view Markdown in VSCode transforms your documentation workflow from guesswork to precision.
You now have the keyboard shortcuts memorized. Ctrl+Shift+V for full-tab preview, Ctrl+K V for split view.
The built-in markdown rendering engine handles most formatting needs without extra extensions. But tools like Markdown All in One and Markdown Preview Enhanced add syntax highlighting for diagrams, math equations, and export options when projects demand more.
Customize your workspace settings to match scroll sync preferences. Use the Document Outline in File Explorer to navigate large files by header hierarchy.
Your README files deserve better than broken formatting. Preview before you push.
Many of his resources are available on various design marketplaces and for free on Codepen.
Over the years, he's worked with a range of clients and contributed to design publications like Design Your Way, Designmodo, WebDesignerDepot, WPDean, Speckyboy, and Slider Revolution among others.
- CSS Cheat Sheet - May 18, 2026
- How to Set Up VSCode for Python Development - May 16, 2026
- How Using One Platform Can Simplify Order Fulfillment - May 15, 2026
