Summarize this article with:
You just wrote a README file. But does it actually look right?
Learning how to preview Markdown in VSCode saves you from pushing broken formatting to GitHub.
The built-in preview feature renders your .md files instantly, no extensions needed.
Visual Studio Code ships with native Markdown support that handles headings, code blocks, tables, and images out of the box.
This guide walks you through opening the preview pane, enabling side-by-side editing, and customizing the display settings.
You will also find troubleshooting fixes for common rendering issues and a comparison of popular Markdown extensions when you need more features.
Takes about 2 minutes to set up.
How to Preview Markdown in VSCode
Previewing Markdown in VSCode is the process of rendering .md files as formatted HTML directly inside the editor window.
Writers, developers, and documentation teams need this when editing README files, technical documentation, or any Markdown document.
This guide covers 3 steps requiring about 2 minutes and Visual Studio Code version 1.0 or later.
Prerequisites
Before you start, make sure you have the following ready:
- VSCode version 1.0+ (built-in Markdown support included)
- A Markdown file with .md extension
- Basic familiarity with the editor interface
- Time needed: 2 minutes
No extensions required for basic preview functionality.
The editor ships with native Markdown rendering out of the box.
Step One: How Do You Open a Markdown File in VSCode?
Open your .md file in the editor using File > Open File, drag-and-drop, or the keyboard shortcut Ctrl+O (Windows/Linux) or Cmd+O (macOS).
The file appears in the editor window with syntax highlighting for Markdown formatting.
Action
- Launch VSCode from your desktop or terminal
- Navigate to File > Open File in the menu bar
- Select your .md document from the file browser
Purpose
You need the Markdown file open before the preview pane can render its contents.
Step Two: How Do You Open the Built-in Markdown Preview?
Press Ctrl+Shift+V on Windows/Linux or Cmd+Shift+V on macOS to open the preview in a new tab, replacing your current view with the rendered output.
The preview panel displays your Markdown document as formatted HTML with proper headings, lists, code blocks, and images.
Action
- With your .md file open, press the keyboard shortcut Ctrl+Shift+V or Cmd+Shift+V
- Alternative: Open Command Palette (Ctrl+Shift+P) and type “Markdown: Open Preview”
- Alternative: Click the preview icon (split rectangle with magnifying glass) in the top-right editor toolbar
Purpose
The full-tab preview mode lets you see exactly how your Markdown renders without the source code visible.
Step Three: How Do You Enable Side-by-Side Markdown Preview?
Press Ctrl+K V on Windows/Linux or Cmd+K V on macOS to open a split view with source code on the left and live preview on the right.
Changes you make in the editor appear instantly in the preview pane with scroll sync enabled by default.
Action
- With your Markdown file active, press Ctrl+K then release and press V
- Alternative: Right-click the file tab and select “Open Preview to the Side”
- The editor splits into two panels showing source and rendered output
Purpose
Side-by-side mode is ideal for real-time editing since you can write and preview simultaneously.
Most developers prefer this split editor layout when working on software documentation or README files.
Step Four: How Do You Customize Markdown Preview Settings?
Access preview settings through File > Preferences > Settings, then search “markdown preview” to configure font size, line height, and custom CSS styling.
You can also edit these values directly in your settings.json file.
Action
- Open Settings: Ctrl+, (Windows/Linux) or Cmd+, (macOS)
- Search for “markdown.preview” in the search bar
- Adjust these common settings:
markdown.preview.fontSize– default is 14markdown.preview.lineHeight– default is 1.6markdown.preview.scrollPreviewWithEditor– enables scroll syncmarkdown.preview.markEditorSelection– highlights current line in preview
Purpose
Custom settings let you match the preview appearance to your project’s documentation style or your personal reading preferences.
Verification
Your Markdown preview works correctly when:
- Headings display with proper hierarchy (H1 largest, H6 smallest)
- Bold and italic text render with correct formatting
- Code blocks show syntax highlighting
- Images and links display properly
- Lists maintain correct indentation and bullet styles
Scroll through your document in the source editor.
The preview pane should follow along if scroll sync is enabled.
Troubleshooting
Issue: Preview Not Rendering Correctly
Solution: Check your Markdown syntax for errors, especially unclosed code blocks or malformed links.
Run linting with a Markdown extension to catch formatting mistakes.
Issue: Preview Panel Not Appearing
Solution: Verify the file has a .md or .markdown extension.
Try resetting the editor layout: View > Editor Layout > Single.
Then reopen the preview with Ctrl+Shift+V.
Issue: Custom CSS Not Applying
Solution: Add custom styles via markdown.styles in settings.json, pointing to an array of CSS file paths.
Reload the window after changes: Ctrl+Shift+P > “Developer: Reload Window”.
Issue: Images Not Displaying
Solution: Use relative paths from your Markdown file’s location or absolute URLs.
Check that image files exist in the referenced directory.
Alternative Methods
VSCode’s built-in preview handles most use cases, but extensions offer additional features.
Markdown Preview Enhanced
Adds PDF export, Mermaid diagrams, LaTeX math, and presentation mode.
Install from VS Code Marketplace: search “Markdown Preview Enhanced” in the Extensions panel.
Markdown All in One
Includes keyboard shortcuts for formatting, auto-completion, table of contents generation, and GitHub Flavored Markdown support.
Best for users who write Markdown documentation frequently.
Comparison
| Feature | Built-in Preview | Markdown Preview Enhanced | | — | — | — | | Basic rendering | Yes | Yes | | PDF export | No | Yes | | Mermaid diagrams | No | Yes | | Setup required | None | Extension install |
Related Processes
Once you’ve mastered Markdown preview, explore these related VSCode features:
- View Markdown files with different rendering options
- Format code in VSCode for consistent styling across your codebase
- Connect VSCode to GitHub to push your documentation directly
- Compare two files to review Markdown changes
For larger documentation projects, consider source control management to track revisions across your team.
FAQ on How To Preview Markdown In VSCode
What Is the Keyboard Shortcut to Preview Markdown in VSCode?
Press Ctrl+Shift+V on Windows and Linux or Cmd+Shift+V on macOS to open the preview in a new tab.
This replaces your current editor view with the rendered Markdown output.
Can I Preview Markdown Side by Side in VSCode?
Yes. Press Ctrl+K V (Windows/Linux) or Cmd+K V (macOS) to open a split view.
The source code appears on the left, the live preview on the right with scroll sync enabled.
Does VSCode Have Built-in Markdown Preview?
Visual Studio Code includes native Markdown support without any extensions.
The built-in preview pane renders headings, lists, code blocks, images, and links directly inside the editor window.
How Do I Enable Live Preview for Markdown in VSCode?
Open your .md file and use the side-by-side shortcut for real-time rendering.
Changes appear instantly in the preview panel as you type, making it ideal for documentation editing.
Why Is My Markdown Preview Not Working in VSCode?
Check that your file has a .md or .markdown extension.
Verify there are no syntax errors like unclosed code blocks. Try reloading the window with Ctrl+Shift+P and selecting “Developer: Reload Window”.
Can I Customize the Markdown Preview Appearance in VSCode?
Open Settings and search for “markdown.preview” to adjust font size, line height, and scroll behavior.
Add custom CSS files through the markdown.styles setting in your configuration.
What Extensions Improve Markdown Preview in VSCode?
Markdown Preview Enhanced adds PDF export, Mermaid diagrams, and LaTeX math rendering.
Markdown All in One provides formatting shortcuts and GitHub Flavored Markdown support from the VS Code Marketplace.
Does VSCode Markdown Preview Support GitHub Flavored Markdown?
The built-in preview supports CommonMark syntax by default.
For full GitHub Flavored Markdown features like task lists and tables, install the Markdown All in One extension from Microsoft.
How Do I Export Markdown to PDF from VSCode?
The native preview does not include PDF export.
Install Markdown Preview Enhanced, then right-click in the preview pane and select “Export” to generate PDF, HTML, or image files.
Can I Preview Markdown Tables in VSCode?
Yes. The built-in Markdown viewer renders tables with proper column alignment and borders.
Make sure your table syntax uses pipe characters and hyphens correctly for the preview to display rows and columns.
Conclusion
Knowing how to preview Markdown in VSCode speeds up your documentation workflow significantly.
The keyboard shortcuts are simple: Ctrl+Shift+V for full-tab preview, Ctrl+K V for split view with live rendering.
Microsoft built solid Markdown support directly into the editor. No extensions required for basic tasks.
When you need PDF export or Mermaid diagrams, grab Markdown Preview Enhanced from the VS Code Marketplace.
Scroll sync keeps your source and preview panel aligned as you edit.
Custom CSS styling through the settings.json file lets you match your project's documentation theme.
Troubleshooting usually comes down to file extensions and syntax errors.
Now open a .md file and try the shortcuts yourself.
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, and Speckyboy, and Slider Revolution among others.
- What Is Agentic Coding? The Next AI Dev Workflow - April 10, 2026
- From Setup To Monitoring: Why A DMARC Service Matters - April 10, 2026
- 4 Scalable Hosting Providers for Growing Small Business Websites - April 9, 2026
