Markdown PDF

Usage

Command line

# install
> npm i -g markdown-to-file

# help
> m2f
Usage: m2f <md> [type] [options...]
       md      -- path to markdown file to convert
       type    -- Output file format: pdf|html|jpeg|png|all
       options -- See: https://github.com/wll8/markdown-to-file
   Eg:
       m2f README.md
       m2f README.md html
       m2f README.md pdf outputDirectory=./mydoc/ markdown-it-include.enable=false

# docker
docker run -it --rm  -v "$(pwd)":/data bladerunner2020/markdown-to-file:1.0  sh -c "m2f /data/somefile.md pdf" 

• Override options from command: markdown-pdf.*
  • outputDirectory
  • markdown-it-include.enable
  • more...

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)

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)

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

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

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.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"

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

.emoji {
  height: 2em;
}

"files.autoGuessEncoding": true,

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

<div class="page"/>