1.3.1 • Published 4 years ago

markdown-pdf-cli v1.3.1

Weekly downloads
14
License
SEE LICENSE IN LI...
Repository
github
Last release
4 years ago

Markdown PDF

この拡張機能は Markdown ファイルを 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](relative-path-to-file.md).

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

INPUT

README Content

:[Plugins](./plugins/README.md)

:[Changelog](CHANGELOG.md)

OUTPUT

Content of README.md

Content of plugins/README.md

Content of CHANGELOG.md

mermaid

INPUT

OUTPUT

mermaid

インストール

Markdown PDF をインストールして、Visual 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

オプション

List

CategoryOption nameConfiguration scope
Save optionsmarkdown-pdf.type
markdown-pdf.convertOnSave
markdown-pdf.convertOnSaveExclude
markdown-pdf.outputDirectory
markdown-pdf.outputDirectoryRelativePathFile
Styles optionsmarkdown-pdf.styles
markdown-pdf.stylesRelativePathFile
markdown-pdf.includeDefaultStyles
Syntax highlight optionsmarkdown-pdf.highlight
markdown-pdf.highlightStyle
Markdown optionsmarkdown-pdf.breaks
Emoji optionsmarkdown-pdf.emoji
Configuration optionsmarkdown-pdf.executablePath
Common Optionsmarkdown-pdf.scale
PDF optionsmarkdown-pdf.displayHeaderFooterresource
markdown-pdf.headerTemplateresource
markdown-pdf.footerTemplateresource
markdown-pdf.printBackgroundresource
markdown-pdf.orientationresource
markdown-pdf.pageRangesresource
markdown-pdf.formatresource
markdown-pdf.widthresource
markdown-pdf.heightresource
markdown-pdf.margin.topresource
markdown-pdf.margin.bottomresource
markdown-pdf.margin.rightresource
markdown-pdf.margin.leftresource
PNG JPEG optionsmarkdown-pdf.quality
markdown-pdf.clip.x
markdown-pdf.clip.y
markdown-pdf.clip.width
markdown-pdf.clip.height
markdown-pdf.omitBackground
PlantUML optionsmarkdown-pdf.plantumlOpenMarker
markdown-pdf.plantumlCloseMarker
markdown-pdf.plantumlServer
markdown-it-include optionsmarkdown-pdf.markdown-it-include.enable
mermaid optionsmarkdown-pdf.mermaidServer

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

PlantUML options

markdown-pdf.plantumlOpenMarker

  • plantuml パーサーの開始区切り文字
  • Default: @startuml

markdown-pdf.plantumlCloseMarker

  • plantuml パーサーの終了区切り文字
  • Default: @enduml

markdown-pdf.plantumlServer

markdown-it-include options

markdown-pdf.markdown-it-include.enable

  • markdown-it-include を有効にします
  • boolean. Default: true

mermaid options

markdown-pdf.mermaidServer

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.4.4 (2020/03/19)

  • Change: mermaid javascript reads from URL instead of from local file
    • Add: markdown-pdf.mermaidServer option
    • add an option to disable mermaid #175
  • Add: markdown-pdf.plantumlServer option
    • support configuration of plantUML server #139
  • Add: configuration scope
    • extend setting 'headerTemplate' with scope... #184
  • Update: slug for markdown-it-named-headers
  • Update: markdown.css, markdown-pdf.css
  • Update: dependent packages
  • Fix: Fix for issue #186 #187
  • Fix: move the Meiryo font to the end of the font-family setting
    • Meiryo font causing \ to show as Â¥ #83
    • Backslash false encoded #124
    • Errors in which 한글(korean word) is not properly printed #148
  • Fix: Improve the configuration schema of package.json
    • Some settings can now be set from the settings editor.

License

MIT

Special thanks

and

markdownpdfPlantUMLexportmermaidmulti-root ready
cheeriod3emoji-imagesjs-yamlgray-matterhighlight.jsmarkdown-itmarkdown-it-checkboxmarkdown-it-containermarkdown-it-emojimarkdown-it-includemarkdown-it-named-headersmarkdown-it-plantumlmkdirpmustachepuppeteer-corerimraf
@everything-registry/sub-chunk-2132@infinitebrahmanuniverse/nolb-markdown-p@zalastax/nolb-markdown-p
1.3.1

4 years ago

1.3.0

4 years ago