The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Markdown live preview renders your document beside its source and refreshes as you edit. In Visual Studio Code (VS Code), the feature is built in: open a .md file, launch Markdown Preview, and choose a side-by-side layout. The preview can synchronize scrolling with the editor and can be locked to a particular file.
What Markdown live preview does
Markdown is plain text with lightweight punctuation for headings, lists, links, emphasis, code, images and more. A live preview converts that source into the formatted result while you type. You can therefore catch a missing blank line, malformed link, incorrect indentation or unexpectedly rendered code block before publishing.
Preview is feedback, not a guarantee that every destination will render identically. VS Code’s preview targets CommonMark through markdown-it. GitHub publishes GitHub Flavored Markdown (GFM), which is based on CommonMark but adds platform-specific behavior. If your document uses tables, task lists, autolinks or other dialect features, check it in the final publishing system as well.
Microsoft’s documentation describes the same Markdown-preview experience as available in VS Code for the Web, so a browser-based editor is possible for many web-oriented workflows.
#1 Best Overall
Open a live preview in VS Code
- Install and open VS Code, then open an existing Markdown file or create one with a
.mdextension. - Open the Command Palette and run Markdown: Open Preview. You can also use the Markdown preview shortcut shown in VS Code’s current Keyboard Shortcuts reference; shortcuts differ by operating system and may be customized.
- To keep source and output visible together, run Markdown: Open Preview to the Side. The editor remains on one side and the rendered document on the other.
- Edit the source. The rendered pane updates as changes are detected, so headings, lists, links and code blocks can be checked immediately.
- Use synchronized scrolling to move through source and output together. If that movement is distracting, disable preview scroll synchronization in Markdown settings.
- When several Markdown files are open, lock the preview to the intended document. A locked pane will not silently switch to another file as you change editor tabs.
The command names and available shortcut can change slightly between VS Code releases, but the Command Palette is the reliable route because it searches the current commands directly.
A small example to test the workflow
Save this as preview-test.md:
# Release notes
This is **bold**, this is *italic*, and this is [a link](https://example.com).
- First item
- Second item
```js
const ready = true;
```
Open the side preview, then change the heading, add a list item, or alter the code. The output should change without a separate build command.
Source and rendered output: useful controls
Side-by-side editing
A side preview is best for authoring because you can compare the exact punctuation with the visual result. It also exposes layout issues such as a heading that is accidentally inside a block quote or a list that has inconsistent indentation.
Scroll synchronization
Synchronization helps locate the source for a visible paragraph in a long file. Disable it when independently inspecting a table, code sample or image whose source and rendered heights differ substantially.
Locking a preview
Locking is useful when you keep several files open and want one rendered document to remain visible while editing another. Without a lock, switching tabs can change which file the preview follows.
CommonMark, GFM and publishing compatibility
Before relying on preview output, identify the renderer that will receive the file:
| Destination | What to verify |
|---|---|
| VS Code preview | CommonMark-oriented output produced with markdown-it. |
| GitHub | GitHub Flavored Markdown rules described in the GFM specification. |
| Documentation site, CMS or static-site generator | Its configured Markdown engine, extensions, sanitization and permitted HTML. |
A document can look correct in VS Code and still differ elsewhere. Typical causes include table syntax, task-list checkboxes, raw HTML, footnotes, heading IDs, URL handling, syntax highlighting and embedded media. For compatibility-sensitive work, render a copy using the destination’s own preview or build process before publishing.
Preview security: keep untrusted Markdown restricted
Markdown can embed images and other content. Microsoft states: “For security reasons, VS Code restricts the content displayed in the Markdown preview.” VS Code’s Strict Markdown security setting is the default. The documentation says Strict disables scripts and blocks HTTP images.
Rank #3
Other settings permit insecure HTTP content or relax additional preview protections, including script execution. Do not weaken these controls merely to make an unfamiliar file look complete. Keep Strict enabled for repositories, downloads and workspaces you do not fully trust. If a trusted internal document genuinely needs a blocked resource, understand that changing the setting affects what the preview can execute or load, then restore the safer setting when finished.
VS Code in a browser
VS Code for the Web provides a browser editor whose experiences are nearly identical to desktop for many web-focused languages, including Markdown preview. Browser limitations still apply: local files, extensions, network access and workspace permissions may differ from the desktop application. Treat the browser preview as another renderer to verify, not as proof that a remote publishing service will match it.
When preview appears wrong or does not update
The preview command is missing
- Confirm that the file name ends in
.mdand that VS Code identifies its language mode as Markdown. - Use the Command Palette and search for “Markdown: Open Preview.” If the command is absent, reload or update VS Code.
Changes are not visible
- Make sure the preview is open for the file you are editing; unlock or relock the pane as appropriate.
- Save the file if the workspace or an extension has changed its preview behavior.
- Close and reopen the preview to rule out a stale pane.
Images or scripts are blocked
That is often the intended Strict-security behavior. HTTP images and scripts may be refused. Prefer HTTPS assets and static Markdown. Only consider a less restrictive setting for files you trust, and do so with the security consequences understood.
The preview differs from GitHub
Check whether the document uses GFM-only syntax or HTML that VS Code’s CommonMark-oriented renderer handles differently. Compare the result with GitHub’s published GFM specification and the actual destination preview.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Raw HTML does not render as expected
Preview security and the destination sanitizer can both restrict HTML. Replace unnecessary embedded markup with ordinary Markdown, or test the exact publishing pipeline rather than assuming desktop preview behavior.
Practical quality checklist
- Use one blank line where your renderer expects block separation.
- Indent nested lists consistently.
- Give links descriptive text and verify their URLs.
- Use fenced code blocks with the intended language identifier.
- Check heading order and avoid skipping levels solely for visual size.
- Verify images use reachable HTTPS URLs and meaningful alternative text where supported.
- Render the final file in the destination platform when dialect compatibility matters.
- Keep preview security at Strict for untrusted workspaces.
Or skip the browser setup
If your goal is a clean image or PDF of a Markdown-rendered page rather than an interactive editing pane, ScreenshotNeo captures a URL through one request. It accepts consent banners before capture and removes more than 60 known consent platforms, newsletter popups and chat widgets. Bot checks, blank pages, failed loads, timeouts 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 parameters. A basic cURL request is:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpThe same call in Python:
import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)And Node.js:
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);ScreenshotNeo also provides an MCP server with take_screenshot, get_page_info and capture_pdf tools for Claude, Cursor and other MCP clients. It supports full-page and element captures, device presets, custom viewport and retina scale, PDF paper and margin controls, custom CSS or JavaScript, selector waits, request blocking, headers, cookies, user agents, authorization, timezone, geolocation, transparent backgrounds, resizing, configurable caching, signed links, asynchronous webhooks and bulk capture of up to 100 URLs per call.
The Free plan includes 1,000 shots per month without a card. Paid plans start at $5 for 3,000 shots; every feature is available on every plan. Create a free ScreenshotNeo account.
FAQ
Does VS Code preview require an extension?
No. Markdown preview is built into VS Code. Extensions can add dialect features, but the basic preview works without one.
Can I preview Markdown without installing desktop VS Code?
Yes. VS Code for the Web offers a browser-based editor experience that includes Markdown preview, subject to browser and workspace limitations.
Why should I test on the destination platform?
Because VS Code targets CommonMark while services such as GitHub implement GFM or their own extensions. Identical source does not guarantee identical HTML.
Is it safe to enable scripts in Markdown preview?
Only for files and workspaces you completely trust. Strict security is the default because embedded content can be unsafe; relaxing it permits content that the default blocks.
Frequently Asked Questions
Does VS Code preview update while I type?
Yes. The built-in Markdown preview refreshes as the document changes.
Can I keep the preview attached to one file?
Yes. Lock the preview so switching editor tabs does not retarget that pane.
What should I use for a screenshot of a published Markdown page?
ScreenshotNeo can capture the rendered URL as an image or PDF, removing common consent banners, popups and chat widgets before capture.
PC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchThe Bottom Line
Use VS Code’s built-in side preview for fast authoring, keep Strict security enabled for untrusted files, and validate dialect-specific syntax in the system that will publish your Markdown.
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.
