Markdown live preview renders your document while you edit its plain-text source. In Visual Studio Code (VS Code), the feature is built in: open a .md file, choose Markdown: Open Preview, and optionally place the preview beside the editor. The rendered pane updates as you type, with optional scroll synchronization and preview locking.
What Markdown live preview shows
Markdown is deliberately readable as text, but punctuation such as #, backticks, brackets and asterisks only becomes a heading, code block, link or emphasis when a Markdown renderer processes it. A live preview lets you inspect that rendered result without exporting or repeatedly switching applications.
A preview is useful for checking:
- Heading hierarchy and section breaks
- Ordered and unordered lists
- Links, images and alt text
- Inline code and fenced code blocks
- Tables, block quotes and emphasis
- Whitespace-sensitive formatting
It is a rendering aid, not a guarantee that every publishing service will produce identical HTML. The destination’s Markdown dialect and security policy still matter.
Open a live preview in desktop VS Code
- Install and open Visual Studio Code.
- Open an existing Markdown file or create one with a
.mdextension. VS Code recognizes the language automatically; the language indicator in the status bar should read Markdown. - Open the Command Palette (View > Command Palette), run Markdown: Open Preview, and the rendered document opens in an editor tab.
- To keep source and output visible together, run Markdown: Open Preview to the Side. You can also use the preview button in the editor title bar when it is shown.
- Edit the source. The preview refreshes as your changes are saved in the editor buffer; no separate build command is required.
VS Code also provides default keyboard commands on desktop: Ctrl+Shift+V (Windows/Linux) or Cmd+Shift+V (macOS) opens a preview, while Ctrl+K V or Cmd+K V opens it to the side. If a key binding has been changed, search the Command Palette for the command name instead.
#1 Best Overall
Synchronize or stop synchronized scrolling
When source and preview are shown side by side, VS Code can synchronize their scroll positions so a source section and its rendered counterpart stay aligned. If synchronized movement makes editing difficult, open Settings and search for markdown.preview.scrollPreviewWithEditor; clear that setting to disable preview-following behavior. The matching editor-to-preview option can be adjusted in the same Markdown preview settings.
Lock a preview to one document
Opening another Markdown file can otherwise make an existing preview follow the newly active document. Use the preview toolbar’s lock action (or the Command Palette command for locking the preview) when you need a pane to remain attached to a specific file, such as a reference document used while editing several chapters.
Use Markdown preview in a browser
VS Code for the Web provides a browser-based editor experience that is nearly identical to desktop VS Code for many web-oriented languages, including Markdown preview. Open the web editor, load a workspace or repository, open the .md file, and use the same preview commands.
Browser editing has practical limits. Local folders, extensions, network access and authentication can differ from the desktop application, and a browser tab may be suspended when inactive. Treat it as a convenient way to inspect and edit repository content rather than assuming every desktop integration is available.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Choose the renderer that matches where you publish
VS Code’s preview targets CommonMark through the markdown-it parser. GitHub publishes its own GitHub Flavored Markdown (GFM) specification, which is based on CommonMark but adds GitHub-specific extensions.
| Situation | What to do | Why it matters |
|---|---|---|
| Plain CommonMark documentation | Use the built-in VS Code preview | The preview’s target dialect is CommonMark. |
| GitHub README, issue or discussion | Check the file on GitHub before publishing | GFM extensions can render differently from a CommonMark-oriented preview. |
| A static-site generator or CMS | Build or preview with that platform’s renderer | Plugins, shortcodes, heading IDs and extensions are platform-specific. |
| Documentation consumed by multiple systems | Restrict syntax to the shared subset and test each destination | Identical source does not ensure identical output. |
Features such as task-list checkboxes, automatic heading anchors, footnotes, tables or raw HTML deserve special testing because support and generated markup vary by renderer. Keep the VS Code pane open for fast feedback, then perform a final check in the actual publishing system.
Preview security: keep Strict mode for untrusted files
Markdown can embed links, images and other content. Microsoft states: “For security reasons, VS Code restricts the content displayed in the Markdown preview.” VS Code’s Strict preview security setting is the default. It disables scripts and blocks HTTP images.
Review the security setting
- Open File > Preferences > Settings (or Code > Settings on macOS).
- Search for
markdown.preview.securityLevel. - Leave it at Strict unless the workspace and its Markdown files are trusted and you have a specific, understood reason to change it.
Less restrictive options can allow insecure HTTP content or permit scripts in the preview. Do not relax the setting merely to make an unfamiliar document look complete, particularly when a repository came from an unknown source. If an image or interactive example is blocked, verify the file’s origin first and prefer HTTPS or a safe local asset.
A reliable editing workflow
Start with structure
Write headings, lists and code fences first, then fill in prose. A side-by-side preview exposes accidental heading levels and list indentation immediately. Use one blank line around block elements when readability and portability are more important than minimal source length.
Validate links and images
Hover links in the preview to check their destination, and test relative paths from the same directory structure used by the publishing system. An image that renders locally may fail after a repository is deployed if its case, path or host differs.
Check code fences
Use matching triple backticks (or tildes), and put the language identifier immediately after the opening fence, for example ```python. A missing closing fence can cause every following paragraph to appear as code in the preview.
Inspect the final target
Before publishing, open the generated page, pull request, documentation site or CMS preview. Compare headings, tables, links, images, code highlighting and any raw HTML. This final pass catches dialect differences that a CommonMark-oriented editor preview cannot predict.
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Clear out junk files and repair common Windows errorsFree Scan →Troubleshooting common preview problems
The preview command is missing
Confirm that the file has a .md extension and that the language mode says Markdown. If the file is untitled or has an uncommon extension, click the language indicator and select Markdown manually. Reloading the VS Code window can clear a stale editor state.
The preview is blank or stops updating
Look for an unclosed code fence, malformed HTML or an extremely large embedded asset. Close and reopen the preview, then test the document’s sections in a new file to isolate the offending block. If only one workspace fails, reload that window rather than reinstalling VS Code.
Images do not appear
Strict security blocks HTTP images. Change the image URL to HTTPS or use a trusted local asset. Also verify relative paths, filename capitalization and whether the image is actually available to the browser-based workspace.
The result differs from GitHub
This is usually a dialect difference: VS Code preview targets CommonMark, while GitHub uses GFM. Test the document on GitHub or with the renderer used by your deployment pipeline, and avoid extensions that only one destination understands.
Scroll positions do not match
Check the Markdown preview scroll settings described earlier. Synchronized scrolling is useful for locating a section, but long documents, wrapped lines and inserted images can make the relationship approximate. Disable synchronization when it interferes with editing.
A preview follows the wrong file
Lock the preview to its current document using the preview toolbar. Unlock it when you want the pane to follow the active editor again.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Or skip the browser setup
If your goal is a rendered image or PDF of a web page that contains Markdown, ScreenshotNeo provides a website screenshot API and MCP server instead of requiring you to configure a headless browser. Its cleanup step accepts cookie or consent banners and removes more than 60 known consent platforms, newsletter popups and chat widgets before capture; each cleanup step can be disabled. Bot checks, CAPTCHAs, blank pages, timeouts, failed loads and cache hits are not billed, and response headers identify the page verdict and billing result.
Use the API documentation at screenshotneo.com/docs/ for all options. The following calls capture the documentation page; replace only the url value with your rendered Markdown page.
Free tools Windows power users keep installed
One-click scans. No signup required.
cURL
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://screenshotneo.com/docs/ -o shot.webpPython
import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://screenshotneo.com/docs/"}, timeout=90)
open("shot.webp", "wb").write(r.content)Node.js
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://screenshotneo.com/docs/' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);ScreenshotNeo also has an MCP server with take_screenshot, get_page_info and capture_pdf tools for Claude, Cursor and other MCP clients. It supports full-page captures, CSS-element selection, device presets, custom viewports, dark mode, retina scale, PDF settings, custom CSS and JavaScript, clicks, waits, blocked resources, headers, cookies, user agents, authorization, timezone, geolocation, transparent backgrounds, resizing, chosen cache TTLs, signed links, asynchronous webhooks, bulk capture of up to 100 URLs per call, usage reporting and an OpenAPI specification.
A free account includes 1,000 screenshots per month with no card. Paid plans start at $5 for 3,000 shots, and every feature is available on every plan. Create the free ScreenshotNeo account.
When live preview is enough—and when it is not
Use VS Code’s built-in preview for fast authoring, structural checks and CommonMark-oriented documents. Add a destination-renderer check when publishing to GitHub, a static-site generator or a CMS. Use a screenshot or PDF service when you need a repeatable visual artifact, automated capture, or an AI agent to inspect a rendered page rather than merely view Markdown source.
Frequently Asked Questions
Can I preview Markdown without installing desktop VS Code?
Yes. VS Code for the Web offers a browser-based editor experience with Markdown preview, although local files, extensions and workspace access may differ from desktop.
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Repair Windows errors before they cause bigger problems3Fix the driver behind crashes, sound loss and screen glitchesDoes VS Code preview exactly match GitHub?
Not always. VS Code targets CommonMark through markdown-it, while GitHub uses its GFM specification. Check the document in GitHub when GFM-specific syntax is important.
Why are scripts or HTTP images blocked in the preview?
Strict Markdown preview security is the default; it disables scripts and blocks HTTP images to reduce risk. Keep it enabled for untrusted workspaces.
Can a Markdown preview be exported directly to PDF?
The built-in preview is primarily an inspection pane. For a rendered web page that must become a PDF, use the destination’s export tooling or a capture service such as ScreenshotNeo’s PDF endpoint.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
Recommended Free Tools
