Usage
Command Palette
- Open the Markdown file
- Press
F1 or Ctrl+Shift+P
- 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)
- Open the Markdown file
- 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)
Auto convert
- Add
"markdown-pdf.convertOnSave": true option to settings.json
- Restart Visual Studio Code
- Open the Markdown file
- Auto convert on save
Extension Settings
Visual Studio Code User and Workspace Settings
- Select File > Preferences > UserSettings or Workspace Settings
- Find markdown-pdf settings in the Default Settings
- Copy
markdown-pdf.* settings
- Paste to the settings.json, and change the value
Options
List
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.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
"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
"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
"markdown-pdf.highlightStyle": "github.css",
Markdown options
markdown-pdf.breaks
- Enable line breaks
- boolean. Default: false
Emoji options
markdown-pdf.emoji
Common Options
markdown-pdf.scale
- Scale of the page rendering
- number. default: 1
"markdown-pdf.scale": 1
PDF options
- Enable display header and footer
- boolean. Default: true
- HTML template for the print header and footer
<span class='date'></span> : formatted print date<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
"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": "<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-it-include options
markdown-pdf.markdown-it-include.enable
- Enable markdown-it-include.
- boolean. Default: true
FAQ
How can I change emoji size ?
- 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"/>
License
MIT
Special thanks
and
