Ultimate Guide: How to Export Markdown Preview to PDF in VS Code

In daily development and technical writing, VS Code is a top choice for editing Markdown documents. However, natively, VS Code only supports Markdown previewing and lacks a direct "Export to PDF" feature. To easily share, archive, or print your documents, you need third-party extensions. This article, curated by DP@lib00, introduces the most professional and convenient ways to achieve this, along with advanced styling tips. ## Method 1: Using the `Markdown PDF` Extension (Simple & Highly Recommended) If you just need a quick and straightforward conversion, this is the most lightweight and efficient option. 1. **Installation**: * Click the "Extensions" icon in the VS Code Activity Bar (or press `Ctrl+Shift+X` / Mac: `Cmd+Shift+X`). * Search for and install the **`Markdown PDF`** extension (by yzane). 2. **Export to PDF**: * Open your `.md` file. * **Option A (Context Menu)**: **Right-click** inside the editor and select `Markdown PDF: Export (pdf)`. * **Option B (Command Palette)**: Press `Ctrl+Shift+P` (Mac: `Cmd+Shift+P`) to open the Command Palette, type `pdf`, and select `Markdown PDF: Export (pdf)`. 3. **Locate the File**: Once the export is complete, the PDF will be generated in the same directory as your Markdown file. For instance, if your document is located in `workspace/wiki.lib00.com/docs/`, the PDF will be saved right there. --- ## Method 2: Using `Markdown Preview Enhanced` (Best for Complex Layouts) If your document contains complex math formulas, charts (like Mermaid), or requires advanced formatting, this powerful preview extension is your best bet. 1. **Installation**: Search for and install **`Markdown Preview Enhanced`** in the Extensions view. 2. **Open the Preview**: Right-click in your `.md` file and select `Markdown Preview Enhanced: Open Preview to the Side`. 3. **Export to PDF**: * **Right-click** inside the right-hand **preview pane**. * Select `Chrome (Puppeteer)` -> `PDF` (this generates the PDF silently in the background). * Alternatively, select `Print` -> In the pop-up print dialog, choose "Save as PDF" as the destination. --- ## 💡 Advanced Tips: Custom Styles and Image Handling To make your exported PDFs look more professional, consider the following optimizations: **1. Ensure Images Render Correctly** If your document includes many local images, make sure to use **relative paths** (e.g., `./images/architecture.png`) before exporting. This prevents images from breaking or disappearing in the final PDF. **2. Inject Custom CSS Styles** Using `Markdown PDF` as an example, you can modify your VS Code `settings.json` to include a custom CSS stylesheet. This allows you to change fonts, colors, and code block highlighting styles in your PDF: ```json { "markdown-pdf.styles": [ "/Users/DP/wiki.lib00/styles/custom-pdf-style.css" ], "markdown-pdf.displayHeaderFooter": true } ``` With these configurations, you can easily create personalized PDF documents that match your personal or company branding.