Permalink
6e6fc31 May 3, 2018
570 lines (434 sloc) 20.1 KB

Markdown PDF

この拡張機能は Markdown ファイルを pdf、html、png、jpeg ファイルに変換します。

重要なお知らせ

  • Markdown PDF ver1.0.0 では PDF変換を node-html-pdf (PhantomJS) から puppeteer (Chromium) に変更しました
  • 一部のオプションは廃止された為、変更してください。 オプションを参照してください

目次

機能

以下の機能をサポートしています。

サンプルファイル

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 PDF をインストールして、Visutal Studio Code で Markdownファイルを最初に開いた時、Chromium のダウンロードが自動で始まります。

しかしサイズが大きい為 (~170Mb Mac, ~282Mb Linux, ~280Mb Win) 、環境によっては時間がかかります。 ダウンロード中は、ステータスバーに Installing Puppeteer のメッセージが表示されます。

もしプロキシを使う必要がある場合、settings.json に http.proxy でプロキシを設定し、Visual Studio Code を再起動してください。

ダウンロードが上手くいかない場合や、Markdown PDF のバージョンアップの度にダウンロードするのを避けたい場合、markdown-pdf.executablePath オプションでインストール済みの Chrome か Chromium を指定してください。

使い方

コマンド パレット

  1. Markdown ファイルを開きます
  2. F1 キーを押すか、Ctrl+Shift+P キーを入力します
  3. export と入力し以下を選択します
    • 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)

usage1

メニュー

  1. Markdown ファイルを開きます
  2. 右クリックして以下を選択します
    • 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

自動変換

  1. settings.json"markdown-pdf.convertOnSave": true オプションを追加します
  2. Visual Studio Code を再起動します
  3. Markdown ファイルを開きます
  4. 保存すると自動で変換されます

拡張機能 設定

Visual Studio Code User and Workspace Settings

  1. メニューから ファイル > 基本設定 > ユーザー設定 か ワークスペース設定 を選択します
  2. 既定の設定 から markdown-pdf の設定を探します
  3. markdown-pdf.* の設定をコピーします
  4. settings.json に貼り付け、値を変更します

demo

オプション

  • Markdown PDF ver1.0.0 では PDF変換を node-html-pdf から puppeteer に変更しました
  • 一部のオプションは廃止された為、変更してください。 Options
  • Markdown PDF ver1.0.0 の新オプションと、廃止されたオプションは以下になります
ver1.0.0 (新) ver0.x.x (廃止)
markdown-pdf.executablePath
markdown-pdf.scale
markdown-pdf.displayHeaderFooter
markdown-pdf.headerTemplate markdown-pdf.header.contents
markdown-pdf.footerTemplate markdown-pdf.footer.contents
markdown-pdf.printBackground
markdown-pdf.pageRanges
markdown-pdf.width
markdown-pdf.height
markdown-pdf.margin.top markdown-pdf.border.top
markdown-pdf.header.height
markdown-pdf.margin.bottom markdown-pdf.border.bottom
markdown-pdf.footer.height
markdown-pdf.margin.right markdown-pdf.border.right
markdown-pdf.margin.left markdown-pdf.border.left
markdown-pdf.quality
markdown-pdf.clip.x
markdown-pdf.clip.y
markdown-pdf.clip.width
markdown-pdf.clip.height
markdown-pdf.omitBackground

Option list

Category Option name
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
Common Options markdown-pdf.scale
PDF options markdown-pdf.displayHeaderFooter
markdown-pdf.headerTemplate
markdown-pdf.footerTemplate
markdown-pdf.printBackground
markdown-pdf.orientation
markdown-pdf.pageRanges
markdown-pdf.format
markdown-pdf.width
markdown-pdf.height
markdown-pdf.margin.top
markdown-pdf.margin.bottom
markdown-pdf.margin.right
markdown-pdf.margin.left
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

Save options

markdown-pdf.type

  • 出力フォーマット: pdf, html, png, jpeg
  • 複数の出力フォーマットをサポート
  • Default: pdf
"markdown-pdf.type": [
  "pdf",
  "html",
  "png",
  "jpeg"
],

markdown-pdf.convertOnSave

  • 保存時の自動変換を有効にします
  • boolean. Default: false
  • 設定の反映には、Visutal Studio Code の再起動が必要です

markdown-pdf.convertOnSaveExclude

  • convertOnSave オプションの除外ファイル名を指定します
"markdown-pdf.convertOnSaveExclude": [
  "^work",
  "work.md$",
  "work|test",
  "[0-9][0-9][0-9][0-9]-work",
  "work\\test"  // 全ての \ は \\ と記述する必要があります。(Windows)
],

markdown-pdf.outputDirectory

  • 出力ディレクトリを指定します
  • 全ての \\\ と記述する必要があります (Windows)
"markdown-pdf.outputDirectory": "C:\\work\\output",
  • 相対パス
    • Markdownファイル を開いた場合、ファイルからの相対パスとして解釈されます
    • フォルダ を開いた場合、ルートフォルダからの相対パスとして解釈されます
    • ワークスペース を開いた場合、それぞれのルートフォルダからの相対パスとして解釈されます
"markdown-pdf.outputDirectory": "output",
  • 相対パス (ホームディレクトリ)
    • パスが ^ で始まっている場合、ホームディレクトリからの相対パスとして解釈されます
"markdown-pdf.outputDirectory": "~/output",
  • 相対パスでディレクトリを設定した場合、ディレクトリが存在しなければ作成されます
  • 絶対パスでディレクトリを設定した場合、ディレクトリが存在しなければエラーになります

markdown-pdf.outputDirectoryRelativePathFile

  • markdown-pdf.outputDirectoryRelativePathFile オプションが true に設定されている場合、markdown-pdf.outputDirectory で設定した相対パスは、ファイルからの相対パスとして解釈されます
  • フォルダやワークスペースからの相対パスを避けたい場合に使うことが出来ます
  • boolean. Default: false

Styles options

markdown-pdf.styles

  • markdown-pdf で使用するスタイルシートのパスを指定します
  • ファイルが存在しない場合、スキップされます
  • 全ての \\\ と記述する必要があります (Windows)
"markdown-pdf.styles": [
  "C:\\Users\\<USERNAME>\\Documents\\markdown-pdf.css",
  "/home/<USERNAME>/settings/markdown-pdf.css",
],
  • 相対パス
    • Markdownファイル を開いた場合、ファイルからの相対パスとして解釈されます
    • フォルダ を開いた場合、ルートフォルダからの相対パスとして解釈されます
    • ワークスペース を開いた場合、それぞれのルートフォルダからの相対パスとして解釈されます
"markdown-pdf.styles": [
  "markdown-pdf.css",
],
  • 相対パス (ホームディレクトリ)
    • パスが ^ で始まっている場合、ホームディレクトリからの相対パスとして解釈されます
"markdown-pdf.styles": [
  "~/.config/Code/User/markdown-pdf.css"
],
  • オンラインCSS (https://xxx/xxx.css) は JPG と PNG では正しく適用されますが、PDF では問題が発生します #67
"markdown-pdf.styles": [
  "https://xxx/markdown-pdf.css"
],

markdown-pdf.stylesRelativePathFile

  • markdown-pdf.stylesRelativePathFile オプションが true に設定されている場合、markdown-pdf.styles で設定した相対パスは、ファイルからの相対パスとして解釈されます
  • フォルダやワークスペースからの相対パスを避けたい場合に使うことが出来ます
  • boolean. Default: false

markdown-pdf.includeDefaultStyles

  • デフォルトのスタイルシート(VSCode, markdown-pdf)を有効にします
  • boolean. Default: true

Syntax highlight options

markdown-pdf.highlight

  • Syntax highlighting を有効にします
  • boolean. Default: true

markdown-pdf.highlightStyle

"markdown-pdf.highlightStyle": "github.css",

Markdown options

markdown-pdf.breaks

  • 改行を有効にします
  • boolean. Default: false

Emoji options

markdown-pdf.emoji

Configuration options

markdown-pdf.executablePath

  • バンドルされた Chromium の代わりに実行する Chromium または Chrome のパスを指定します
  • 全ての \\\ と記述する必要があります (Windows)
  • 設定の反映には、Visutal Studio Code の再起動が必要です
"markdown-pdf.executablePath": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe"

Common Options

markdown-pdf.scale

  • ページレンダリングのスケール
  • number. default: 1
"markdown-pdf.scale": 1

PDF options

markdown-pdf.displayHeaderFooter

  • ヘッダーとフッター表示を有効にします
  • boolean. Default: true

markdown-pdf.headerTemplate, markdown-pdf.footerTemplate

  • ヘッダーとフッターを出力する為のHTMLテンプレートを指定します
  • <span class='date'></span> : 日付
  • <span class='title'></span> : Markdown ファイル名
  • <span class='url'></span> : Markdown フルパスファイル名
  • <span class='pageNumber'></span> : 現在のページ番号
  • <span class='totalPages'></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": "<div style=\"font-size: 9px; margin: 0 auto;\"> <span class='pageNumber'></span> / <span class='totalPages'></span></div>",

markdown-pdf.printBackground

  • 背景のグラフィックを出力
  • boolean. Default: true

markdown-pdf.orientation

  • ページの向き
  • portrait(縦向き) or landscape(横向き)
  • Default: portrait

markdown-pdf.pageRanges

  • 出力するページ範囲 例) '1-5, 8, 11-13'
  • Default: 全ページ
"markdown-pdf.pageRanges": "1,4-",

markdown-pdf.format

  • 用紙のフォーマット
  • Letter, Legal, Tabloid, Ledger, A0, A1, A2, A3, A4, A5, A6
  • Default: A4
"markdown-pdf.format": "A4",

markdown-pdf.width

markdown-pdf.height

  • 用紙の幅/高さ、 単位(mm, cm, in, px)
  • このオプションが指定されている場合、markdown-pdf.format オプションより優先されます
"markdown-pdf.width": "10cm",
"markdown-pdf.height": "20cm",

markdown-pdf.margin.top

markdown-pdf.margin.bottom

markdown-pdf.margin.right

markdown-pdf.margin.left

  • 用紙の余白、単位(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

markdown-pdf.quality

  • jpeg only. イメージの品質を 0-100 の範囲で指定します。 png では無効です。
"markdown-pdf.quality": 100,

markdown-pdf.clip.x

markdown-pdf.clip.y

markdown-pdf.clip.width

markdown-pdf.clip.height

  • ページの切り抜き領域を指定します
  • number
// 切り抜き領域のX軸の基点を指定します。ページの左上が原点です。
"markdown-pdf.clip.x": 0,

// 切り抜き領域のY軸の基点を指定します。ページの左上が原点です。
"markdown-pdf.clip.y": 0,

// 切り抜き領域の幅を指定します
"markdown-pdf.clip.width": 1000,

// 切り抜き領域の高さを指定します
"markdown-pdf.clip.height": 1000,

markdown-pdf.omitBackground

  • デフォルトの白い背景ではなく、透過によるスクリーンショットのキャプチャーを有効にします
  • boolean. Default: false

FAQ

絵文字 サイズの変更方法は?

  1. 以下の設定を markdown-pdf.styles で指定したスタイルシートに追加します。
.emoji {
  height: 2em;
}

文字コードの自動判定

Visual Studio Code の files.autoGuessEncoding オプションを使うと、文字コードが自動判定されるので便利です。

"files.autoGuessEncoding": true,

出力ディレクトリ

常に Markdown ファイルからの相対パスのディレクトリに出力したい場合。

例えば、Markdown ファイルと同じディレクトリの "output"ディレクトリに出力する場合、次のように設定してください。

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

改ページ

改ページを挿入するには、以下を使用してください。

<div class="page"/>

既知の問題

markdown-pdf.styles option

  • オンラインCSS (https://xxx/xxx.css) は JPG と PNG では正しく適用されますが、PDF では問題が発生します #67

Release Notes

1.2.0 (2018/05/03)

1.1.0 (2018/05/03)

1.0.5 (2018/05/03)

  • Improve: Exception handling
  • Improve: Chromium install check
  • Add: Page break
    • Is it possible to insert page breaks? #25
  • Update: README
    • FAQ: Page break
  • Update: markdown-pdf.css
    • Add: Meiryo to font-family

1.0.4 (2018/05/01)

  • Fix: Display error message when downloading Chromium
  • Improve: Chromium install. Display download progress on status bar

License

MIT

Special thanks

and