VS Code Markdown Preview: Save Full-Page Images or PDFs

VS Code’s Markdown preview can be turned into a clean, full-page image or PDF for sharing, printing, or keeping with project notes. The most reliable method is to open the preview in a browser, then use the browser’s print or capture tools; VS Code itself does not provide a built-in full-page image export.

What You’ll Need

• Visual Studio Code with the Markdown file you want to capture.
• A browser, such as Chrome, Edge, or Firefox, for printing or full-page capture.
• For a full-page image, use a browser feature or extension that captures an entire scrolling page. Alternatively, use a screenshot utility that supports scrolling capture.
• Optional: an image editor or PDF viewer if you need to crop, annotate, or check the finished file.

Step-by-Step

1. Prepare the Markdown file. Open the file in VS Code and save your latest changes. Check that headings, tables, links, code blocks, and images appear as intended. If an image does not display, verify its relative path and confirm that the image file is available from the project. The preview cannot capture content that fails to load.
2. Open the Markdown preview. With the Markdown file active, select the preview button in the editor title area, or open the Command Palette with Ctrl+Shift+P on Windows/Linux or Cmd+Shift+P on macOS and run Markdown: Open Preview. Use Markdown: Open Preview to the Side if you want to keep the source visible while checking the result.
3. Choose how to display the preview. For a simple document, the VS Code preview is adequate for checking layout, but its webview is not a normal browser tab and may not be directly available to browser capture tools. To use browser printing or full-page capture, open a browser-rendered version of the Markdown. One practical option is to use a Markdown preview extension that provides a browser preview or an export command. Choose an extension from the VS Code Marketplace only if its features meet your needs, and check its instructions and permissions before installing it.
4. Open the rendered document in a browser. Follow the chosen extension’s documented command to preview or export the file in a browser. If you use a local HTML rendering workflow, make sure it includes the Markdown file’s styles and image assets; opening a raw .md file in a browser will usually show plain text rather than a formatted preview. Keep the browser window open until all images and other content finish loading.
5. Set up the page before capturing. In the browser, review the entire document by scrolling from top to bottom. For PDF, open the browser’s print dialog with Ctrl+P or Cmd+P. Select Save as PDF or the equivalent PDF destination, then choose portrait or landscape, paper size, margins, and scale. Enable background graphics if the document relies on shaded code blocks or colored backgrounds. Turn off browser headers and footers if you do not want the page title, URL, or date on each page.
6. Save a PDF. Check the print preview for cut-off tables, blank pages, or headings stranded at page breaks. Adjust scale or margins if needed; reducing scale slightly can help wide tables fit, but avoid making text hard to read. Select the PDF destination, choose a descriptive filename and folder, then save. Open the saved PDF and inspect every page, not just the first one.
7. Capture a full-page image. In the browser, use its full-page screenshot command if available, or use a reputable capture extension or operating-system tool with scrolling capture. In Chrome or Edge, browser developer tools can provide a full-page screenshot command through the Command Menu: open developer tools, open that menu, search for “screenshot,” and choose the full-size capture option if it is offered. Browser interfaces change, so use the tool’s current documentation if the command is missing. Save as PNG for sharp text and diagrams; use JPEG only when smaller files matter more than crisp text.
8. Verify the result. Open the image at normal viewing size and check that the first and last lines are present, text is legible, and tables and images are not clipped. A very long page image can be awkward to view or share; for lengthy documents, a multipage PDF is often more practical. If the capture is incomplete, return to the browser, wait for content to load, and capture again.

Common Mistakes

Trying to capture the VS Code editor window as a full page: a normal screenshot records only what is visible. Use a browser-rendered preview and a full-page capture tool for content extending below the screen.

Printing the source instead of the preview: make sure the browser displays formatted Markdown, not the raw .md text or the editor itself. Confirm the preview before printing.

Ignoring print settings: browser headers, footers, margins, and disabled background graphics can make a PDF look different from the preview. Review the print preview before saving.

Capturing before images load: remote or large images may appear blank if capture starts too soon. Scroll through the document, wait for images to finish loading, then retry.

Expecting one screenshot to preserve everything: a long image may be huge, and interactive elements or animated content may not be represented usefully. Use PDF for multipage reading and a static image for visual sharing.

Tips

• Use a consistent window width before capturing so line wrapping and table layout remain stable.
• For code-heavy documents, prefer PNG and avoid excessive scaling in the print dialog.
• For a PDF, use page breaks and concise headings in the Markdown when you control the document. This makes printed pages easier to scan.
• Keep the original Markdown file alongside the export. The image or PDF is a snapshot and will not update when the source changes.
• If the preview differs from GitHub or another site, remember that Markdown renderers may use different styles and extensions. A capture reflects the renderer you used.

Troubleshooting

The preview command is missing: confirm that the file has a .md extension and that the editor recognizes it as Markdown. Open the Command Palette and search for “Markdown preview.” If the built-in preview still does not open, close and reopen the file or restart VS Code.

The browser capture contains only the visible area: check that you selected a full-page or scrolling capture rather than a standard screenshot. Some capture tools cannot capture a VS Code webview; use a browser-rendered preview instead.

The PDF is blank or missing styling: confirm that the browser preview itself looks correct, then enable background graphics in print settings. If a local preview depends on external styles or assets, make sure those files are reachable.

Content is cut off: try landscape orientation for wide tables, reduce margins, or lower the print scale modestly. For a screenshot, check whether the capture tool has a maximum image height; split an exceptionally long document into sections if necessary.

Images are missing: check Markdown image paths, capitalization, and whether the files are accessible to the browser preview. Relative paths may behave differently if the renderer is opened from another folder.

Frequently Asked Questions

Can VS Code export its Markdown preview directly as a PDF?
VS Code’s built-in preview is for viewing and does not provide a standard direct PDF export. Use a browser-rendered preview and print it to PDF, or use an extension with an export feature.

Can I save the whole preview as one image?
Yes, if your browser or capture tool supports full-page screenshots. Very long documents may exceed image-size limits or create an unwieldy file.

Why does the captured page look different from the VS Code preview?
The browser renderer may apply different Markdown features, CSS, fonts, or page widths. Compare the two previews and use the renderer whose appearance you need to preserve.

Which format is better, PNG or PDF?
PNG works well for a single-page visual snapshot and keeps text edges sharp. PDF is usually easier to print, search, and read across multiple pages.

Will links work in a captured image?
No. An image is static, so links cannot be clicked. Links in a PDF may remain interactive when printed from a browser, depending on the browser and print settings.

Related

• Apple Samsung $950 Million Penalty: What Happened?
• Data Center Power and Water: Which Public Numbers Can You Trust?
• AI-Powered Phishing vs Traditional Phishing: How to Tell