Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>Markdown PDF(m)New to Visual Studio Code? Get it now.
Markdown PDF(m)

Markdown PDF(m)

showzs

|
16,618 installs
| (0) | Free
Convert Markdown to PDF
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Markdown PDF(m)

This extension were forked from yzane/vscode-markdown-pdf.

This extension converts Markdown files to pdf, html, png or jpeg files.

Japanese README

Table of Contents

  • Specification Changes
  • Features
  • Install
  • Usage
  • Extension Settings
  • Options
  • FAQ
  • Known Issues
  • Release Notes
  • License
  • Special thanks

Specification Changes

  • Default Date Format for PDF Headers and Footers Modified
    • Starting from version 1.5.0, the default date format for headers and footers has been changed to the ISO-based format (YYYY-MM-DD).
    • This change aims to improve the consistency of date displays, as the previous format could vary depending on the environment.
    • If you wish to use the previous format, please refer to markdown-pdf.headerTemplate.

Features

Supports the following features

  • Syntax highlighting
  • emoji
  • markdown-it-checkbox
  • markdown-it-container
  • markdown-it-include
  • PlantUML
    • markdown-it-plantuml
  • mermaid

Sample files

  • pdf
  • html
  • png
  • jpeg

markdown-it-container

INPUT

::: warning
*here be dragons*
:::

OUTPUT

<div class="warning">
<p><em>here be dragons</em></p>
</div>

markdown-it-plantuml

INPUT

@startuml
Bob -[#red]> Alice : hello
Alice -[#0000FF]->Bob : ok
@enduml

OUTPUT

PlantUML

markdown-it-include

Include markdown fragment files: :[alternate-text](https://github.com/showzs/vscode-markdown-pdf/blob/HEAD/relative-path-to-file.md).

├── [plugins]
│  └── README.md
├── CHANGELOG.md
└── README.md

INPUT

README Content

:[Plugins](https://github.com/showzs/vscode-markdown-pdf/blob/HEAD/plugins/README.md)

:[Changelog](https://github.com/showzs/vscode-markdown-pdf/blob/HEAD/CHANGELOG.md)

OUTPUT

Content of README.md

Content of plugins/README.md

Content of CHANGELOG.md

mermaid

INPUT

```mermaid
stateDiagram
    [*] --> First
    state First {
        [*] --> second
        second --> [*]
    }
```

OUTPUT

mermaid

Install

Markdown PDF(m) downloads a Chromium/Chrome build automatically the first time you export a document. The download is large (~170 MB macOS, ~282 MB Linux, ~280 MB Windows), so prefetching it ahead of a release can save time for your team.

Run the Markdown PDF: Install configured browser command from the Command Palette to download or update the browser you configured in settings without having to trigger a conversion. The command honors the new markdown-pdf.browser.* settings so you can:

  • pick a browser flavor with markdown-pdf.browser.name
  • pin a specific build via markdown-pdf.browser.version or channel via markdown-pdf.browser.channel
  • store downloads in a shared folder through markdown-pdf.browser.cacheDir
  • switch between the modern (puppeteer-core@24.x) and legacy (puppeteer-core@2.x) runtimes with markdown-pdf.browser.puppeteerCore

If you are behind a proxy, set the http.proxy option in your VS Code settings and restart.

Prefer to reuse an already-installed Chrome or Chromium? Point markdown-pdf.executablePath at the executable and the extension will skip downloading entirely.

Usage

Command Palette

  1. Open the Markdown file
  2. Press F1 or Ctrl+Shift+P
  3. Type export and select below
    • markdown-pdf: Export (settings.json)
    • markdown-pdf: Export (pdf)
    • markdown-pdf: Export (html)
    • markdown-pdf: Export (png)
    • markdown-pdf: Export (jpeg)
    • markdown-pdf: Export (all: pdf, html, png, jpeg)
  • markdown-pdf: Install configured browser

usage1

Menu

  1. Open the Markdown file
  2. Right click and select below
    • markdown-pdf: Export (settings.json)
    • markdown-pdf: Export (pdf)
    • markdown-pdf: Export (html)
    • markdown-pdf: Export (png)
    • markdown-pdf: Export (jpeg)
    • markdown-pdf: Export (all: pdf, html, png, jpeg)

usage2

Auto convert

  1. Add "markdown-pdf.convertOnSave": true option to settings.json
  2. Restart Visual Studio Code
  3. Open the Markdown file
  4. Auto convert on save

Install configured browser command

Use Markdown PDF: Install configured browser whenever you change the markdown-pdf.browser.* settings or want to ensure an offline machine already has the right Chromium/Chrome build. The command downloads the requested browser into the configured cache directory and reports progress in the status bar. Exports will reuse the cached build, so no extra download is required when you later run an export command.

Extension Settings

Visual Studio Code User and Workspace Settings

  1. Select File > Preferences > UserSettings or Workspace Settings
  2. Find markdown-pdf settings in the Default Settings
  3. Copy markdown-pdf.* settings
  4. Paste to the settings.json, and change the value

demo

Options

List

Category Option name Configuration scope
Save options markdown-pdf.type
markdown-pdf.convertOnSave
markdown-pdf.convertOnSaveExclude
markdown-pdf.outputDirectory
markdown-pdf.outputDirectoryRelativePathFile
Styles options markdown-pdf.styles
markdown-pdf.stylesRelativePathFile
markdown-pdf.includeDefaultStyles
Syntax highlight options markdown-pdf.highlight
markdown-pdf.highlightStyle
Markdown options markdown-pdf.breaks
Emoji options markdown-pdf.emoji
Configuration options markdown-pdf.executablePath
markdown-pdf.browser.name
markdown-pdf.browser.version
markdown-pdf.browser.channel
markdown-pdf.browser.puppeteerCore
markdown-pdf.browser.cacheDir
Common Options markdown-pdf.scale
PDF options markdown-pdf.displayHeaderFooter resource
markdown-pdf.headerTemplate resource
markdown-pdf.footerTemplate resource
markdown-pdf.printBackground resource
markdown-pdf.orientation resource
markdown-pdf.pageRanges resource
markdown-pdf.format resource
markdown-pdf.width resource
markdown-pdf.height resource
markdown-pdf.margin.top resource
markdown-pdf.margin.bottom resource
markdown-pdf.margin.right resource
markdown-pdf.margin.left resource
PNG JPEG options markdown-pdf.quality
markdown-pdf.clip.x
markdown-pdf.clip.y
markdown-pdf.clip.width
markdown-pdf.clip.height
markdown-pdf.omitBackground
PlantUML options markdown-pdf.plantumlOpenMarker
markdown-pdf.plantumlCloseMarker
markdown-pdf.plantumlServer
markdown-it-include options markdown-pdf.markdown-it-include.enable
mermaid options markdown-pdf.mermaidServer

Save options

markdown-pdf.type

  • Output format: pdf, html, png, jpeg
  • Multiple output formats support
  • Default: pdf
"markdown-pdf.type": [
  "pdf",
  "html",
  "png",
  "jpeg"
],

markdown-pdf.convertOnSave

  • Enable Auto convert on save
  • boolean. Default: false
  • To apply the settings, you need to restart Visual Studio Code

markdown-pdf.convertOnSaveExclude

  • Excluded file name of convertOnSave option
"markdown-pdf.convertOnSaveExclude": [
  "^work",
  "work.md$",
  "work|test",
  "[0-9][0-9][0-9][0-9]-work",
  "work\\test"  // All '\' need to be written as '\\' (Windows)
],

markdown-pdf.outputDirectory

  • Output Directory
  • All \ need to be written as \\ (Windows)
"markdown-pdf.outputDirectory": "C:\\work\\output",
  • Relative path
    • If you open the Markdown file, it will be interpreted as a relative path from the file
    • If you open a folder, it will be interpreted as a relative path from the root folder
    • If you open the workspace, it will be interpreted as a relative path from the each root folder
      • See Multi-root Workspaces
"markdown-pdf.outputDirectory": "output",
  • Relative path (home directory)
    • If path starts with ~, it will be interpreted as a relative path from the home directory
"markdown-pdf.outputDirectory": "~/output",
  • If you set a directory with a relative path, it will be created if the directory does not exist
  • If you set a directory with an absolute path, an error occurs if the directory does not exist

markdown-pdf.outputDirectoryRelativePathFile

  • If markdown-pdf.outputDirectoryRelativePathFile option is set to true, the relative path set with markdown-pdf.outputDirectory is interpreted as relative from the file
  • It can be used to avoid relative paths from folders and workspaces
  • boolean. Default: false

Styles options

markdown-pdf.styles

  • A list of local paths to the stylesheets to use from the markdown-pdf
  • If the file does not exist, it will be skipped
  • All \ need to be written as \\ (Windows)
"markdown-pdf.styles": [
  "C:\\Users\\<USERNAME>\\Documents\\markdown-pdf.css",
  "/home/<USERNAME>/settings/markdown-pdf.css",
],
  • Relative path
    • If you open the Markdown file, it will be interpreted as a relative path from the file
    • If you open a folder, it will be interpreted as a relative path from the root folder
    • If you open the workspace, it will be interpreted as a relative path from the each root folder
      • See Multi-root Workspaces
"markdown-pdf.styles": [
  "markdown-pdf.css",
],
  • Relative path (home directory)
    • If path starts with ~, it will be interpreted as a relative path from the home directory
"markdown-pdf.styles": [
  "~/.config/Code/User/markdown-pdf.css"
],
  • Online CSS (https://xxx/xxx.css) is applied correctly for JPG and PNG, but problems occur with PDF #67
"markdown-pdf.styles": [
  "https://xxx/markdown-pdf.css"
],

markdown-pdf.stylesRelativePathFile

  • If markdown-pdf.stylesRelativePathFile option is set to true, the relative path set with markdown-pdf.styles is interpreted as relative from the file
  • It can be used to avoid relative paths from folders and workspaces
  • boolean. Default: false

markdown-pdf.includeDefaultStyles

  • Enable the inclusion of default Markdown styles (VSCode, markdown-pdf)
  • boolean. Default: true

Syntax highlight options

markdown-pdf.highlight

  • Enable Syntax highlighting
  • boolean. Default: true

markdown-pdf.highlightStyle

  • Set the style file name. for example: github.css, monokai.css ...
  • file name list
  • demo site : https://highlightjs.org/static/demo/
"markdown-pdf.highlightStyle": "github.css",

Markdown options

markdown-pdf.breaks

  • Enable line breaks
  • boolean. Default: false

Emoji options

markdown-pdf.emoji

  • Enable emoji. EMOJI CHEAT SHEET
  • boolean. Default: true

Configuration options

markdown-pdf.executablePath

  • Path to a Chromium or Chrome executable to run instead of the bundled Chromium
  • All \ need to be written as \\ (Windows)
  • To apply the settings, you need to restart Visual Studio Code
"markdown-pdf.executablePath": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe"

markdown-pdf.browser.name

  • Browser flavor that should be installed when you run Markdown PDF: Install configured browser
  • Allowed values: chrome, chromium, chrome-headless-shell
  • Default: chrome
"markdown-pdf.browser.name": "chromium"

markdown-pdf.browser.version

  • Optional pinned version string (for example 123.0.6312.86)
  • Takes precedence over markdown-pdf.browser.channel when both are set
  • Leave empty to let Puppeteer resolve the latest version for the selected channel
"markdown-pdf.browser.version": "129.0.6668.58"

markdown-pdf.browser.channel

  • Channel to track when no explicit version is provided (stable, beta, dev, canary)
  • Useful for staying on a moving stream without editing the version number each time
"markdown-pdf.browser.channel": "beta"

markdown-pdf.browser.puppeteerCore

  • Chooses which Puppeteer runtime powers conversions
  • modern: uses puppeteer-core@24.x (Chrome 120+)
  • legacy-v2: uses puppeteer-core@2.1.1 for older environments that still require the v2 protocol
  • Default: modern
"markdown-pdf.browser.puppeteerCore": "legacy-v2"

markdown-pdf.browser.cacheDir

  • Directory where downloaded browsers should live; defaults to ~/.cache/markdown-pdf-m
  • Point this to a shared folder to reuse the same build across multiple workspaces or CI runs
"markdown-pdf.browser.cacheDir": "D:/browsers/markdown-pdf"

Common Options

markdown-pdf.scale

  • Scale of the page rendering
  • number. default: 1
"markdown-pdf.scale": 1

PDF options

  • pdf only. puppeteer page.pdf options

markdown-pdf.displayHeaderFooter

  • Enables header and footer display
  • boolean. Default: true
  • Activating this option will display both the header and footer
  • If you wish to display only one of them, remove the value for the other
  • To hide the header
    "markdown-pdf.headerTemplate": "",
    
  • To hide the footer
    "markdown-pdf.footerTemplate": "",
    

markdown-pdf.headerTemplate

  • Specifies the HTML template for outputting the header
  • To use this option, you must set markdown-pdf.displayHeaderFooter to true
  • <span class='date'></span> : formatted print date. The format depends on the environment
  • <span class='title'></span> : markdown file name
  • <span class='url'></span> : markdown full path name
  • <span class='pageNumber'></span> : current page number
  • <span class='totalPages'></span> : total pages in the document
  • %%ISO-DATETIME%% : current date and time in ISO-based format (YYYY-MM-DD hh:mm:ss)
  • %%ISO-DATE%% : current date in ISO-based format (YYYY-MM-DD)
  • %%ISO-TIME%% : current time in ISO-based format (hh:mm:ss)
  • Default (version 1.5.0 and later): Displays the Markdown file name and the date using %%ISO-DATE%%
    "markdown-pdf.headerTemplate": "<div style=\"font-size: 9px; margin-left: 1cm;\"> <span class='title'></span></div> <div style=\"font-size: 9px; margin-left: auto; margin-right: 1cm; \">%%ISO-DATE%%</div>",
    
  • Default (version 1.4.4 and earlier): Displays the Markdown file name and the date using <span class='date'></span>
    "markdown-pdf.headerTemplate": "<div style=\"font-size: 9px; margin-left: 1cm;\"> <span class='title'></span></div> <div style=\"font-size: 9px; margin-left: auto; margin-right: 1cm; \"> <span class='date'></span></div>",
    

markdown-pdf.footerTemplate

  • Specifies the HTML template for outputting the footer
  • For more details, refer to markdown-pdf.headerTemplate
  • Default: Displays the {current page number} / {total pages in the document}
    "markdown-pdf.footerTemplate": "<div style=\"font-size: 9px; margin: 0 auto;\"> <span class='pageNumber'></span> / <span class='totalPages'></span></div>",
    

markdown-pdf.printBackground

  • Print background graphics
  • boolean. Default: true

markdown-pdf.orientation

  • Paper orientation
  • portrait or landscape
  • Default: portrait

markdown-pdf.pageRanges

  • Paper ranges to print, e.g., '1-5, 8, 11-13'
  • Default: all pages
"markdown-pdf.pageRanges": "1,4-",

markdown-pdf.format

  • Paper format
  • Letter, Legal, Tabloid, Ledger, A0, A1, A2, A3, A4, A5, A6
  • Default: A4
"markdown-pdf.format": "A4",

markdown-pdf.width

markdown-pdf.height

  • Paper width / height, accepts values labeled with units(mm, cm, in, px)
  • If it is set, it overrides the markdown-pdf.format option
"markdown-pdf.width": "10cm",
"markdown-pdf.height": "20cm",

markdown-pdf.margin.top

markdown-pdf.margin.bottom

markdown-pdf.margin.right

markdown-pdf.margin.left

  • Paper margins.units(mm, cm, in, px)
"markdown-pdf.margin.top": "1.5cm",
"markdown-pdf.margin.bottom": "1cm",
"markdown-pdf.margin.right": "1cm",
"markdown-pdf.margin.left": "1cm",

PNG, JPEG options

  • png and jpeg only. puppeteer page.screenshot options

markdown-pdf.quality

  • jpeg only. The quality of the image, between 0-100. Not applicable to png images
"markdown-pdf.quality": 100,

markdown-pdf.clip.x

markdown-pdf.clip.y

markdown-pdf.clip.width

markdown-pdf.clip.height

  • An object which specifies clipping region of the page
  • number
//  x-coordinate of top-left corner of clip area
"markdown-pdf.clip.x": 0,

// y-coordinate of top-left corner of clip area
"markdown-pdf.clip.y": 0,

// width of clipping area
"markdown-pdf.clip.width": 1000,

// height of clipping area
"markdown-pdf.clip.height": 1000,

markdown-pdf.omitBackground

  • Hides default white background and allows capturing screenshots with transparency
  • boolean. Default: false

PlantUML options

markdown-pdf.plantumlOpenMarker

  • Oppening delimiter used for the plantuml parser.
  • Default: @startuml

markdown-pdf.plantumlCloseMarker

  • Closing delimiter used for the plantuml parser.
  • Default: @enduml

markdown-pdf.plantumlServer

  • Plantuml server. e.g. http://localhost:8080
  • Default: http://www.plantuml.com/plantuml
  • For example, to run Plantuml Server locally #139 :
    docker run -d -p 8080:8080 plantuml/plantuml-server:jetty
    
    plantuml/plantuml-server - Docker Hub

markdown-it-include options

markdown-pdf.markdown-it-include.enable

  • Enable markdown-it-include.
  • boolean. Default: true

mermaid options

markdown-pdf.mermaidServer

  • mermaid server
  • Default: https://unpkg.com/mermaid/dist/mermaid.min.js

FAQ

How can I change emoji size ?

  1. Add the following to your stylesheet which was specified in the markdown-pdf.styles
.emoji {
  height: 2em;
}

Auto guess encoding of files

Using files.autoGuessEncoding option of the Visual Studio Code is useful because it automatically guesses the character code. See files.autoGuessEncoding

"files.autoGuessEncoding": true,

Output directory

If you always want to output to the relative path directory from the Markdown file.

For example, to output to the "output" directory in the same directory as the Markdown file, set it as follows.

"markdown-pdf.outputDirectory" : "output",
"markdown-pdf.outputDirectoryRelativePathFile": true,

Page Break

Please use the following to insert a page break.

<div class="page"/>

Known Issues

markdown-pdf.styles option

  • Online CSS (https://xxx/xxx.css) is applied correctly for JPG and PNG, but problems occur with PDF. #67

Release Notes

0.2.1 (2025/11/16)

  • Add Markdown PDF: Install configured browser command to pre-download the browser defined in your settings
  • Introduce the markdown-pdf.browser.* settings family to pin the browser flavor, build, cache directory, or Puppeteer runtime

0.2.0 (2025/XX/XX)

  • merge https://github.com/yzane/vscode-markdown-pdf release 1.5.0

yzane's 1.5.0 (2023/09/08)

  • Improve: The default date format for headers and footers has been changed to the ISO-based format (YYYY-MM-DD).
    • Support different date formats in templates #197
  • Improve: Avoid TimeoutError: Navigation timeout of 30000 ms exceeded and TimeoutError: waiting for Page.printToPDF failed: timeout 30000ms exceeded #266
  • Fix: Fix description of outputDirectoryRelativePathFile #238
  • README
    • Add: Specification Changes
    • Fix: Broken link

License

MIT

Special thanks

  • GoogleChrome/puppeteer
  • markdown-it/markdown-it
  • mcecot/markdown-it-checkbox
  • leff/markdown-it-named-headers
  • markdown-it/markdown-it-emoji
  • HenrikJoreteg/emoji-images
  • isagalaev/highlight.js
  • cheeriojs/cheerio
  • janl/mustache.js
  • markdown-it/markdown-it-container
  • gmunguia/markdown-it-plantuml
  • camelaissani/markdown-it-include
  • mermaid-js/mermaid
  • jonschlinkert/gray-matter

and

  • cakebake/markdown-themeable-pdf
  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft