How to Preview Markdown Files in VS Code

Visual Studio Code (VS Code) includes built-in support for rendering Markdown documents, allowing you to see how your formatted text will look in real-time. This article explains how to quickly open a Markdown preview directly within the editor using toolbar buttons, keyboard shortcuts, and the command palette.

Use the Editor Toolbar Button

The quickest way to open a Markdown preview is using the built-in editor buttons: 1. Open your .md file in VS Code. 2. Look at the top-right corner of the editor window. 3. Click the Open Preview to the Side icon (it looks like a split page with a small magnifying glass) to view the preview alongside your code. 4. Alternatively, click the Open Preview icon to replace the current editor tab with the preview.

Use Keyboard Shortcuts

Keyboard shortcuts provide the fastest way to toggle previews without using your mouse: * Side-by-Side Preview: Press Ctrl + K then release and press V (Windows/Linux) or Cmd + K then V (macOS). This opens the preview in a split window. * Full-Tab Preview: Press Ctrl + Shift + V (Windows/Linux) or Cmd + Shift + V (macOS) to toggle the current tab between code and preview mode.

Use the Command Palette

If you prefer using commands: 1. Open the Command Palette by pressing Ctrl + Shift + P (Windows/Linux) or Cmd + Shift + P (macOS). 2. Type Markdown into the search bar. 3. Select Markdown: Open Preview to open the preview in the current tab, or Markdown: Open Preview to the Side to open it in a split window.

Dynamic Syncing

Once the preview is open, VS Code automatically synchronizes the scrollbar between the Markdown editor and the preview window. When you type new content or edit existing text, the preview updates instantly, allowing you to see your changes in real-time.