VSCodeでMarkdownをPDFに自動で変換する

公開日:2019-05-14
最終更新:2019-05-21

はじめに

Markdownで記述したmdファイルは、エンジニア間ではそのまま利用することが多いと思う(GitHubなどにREADME.mdとしてアップするとか)。ところが、メールに添付したり印刷する等、外部へ持ち出す際はPDFに変換しておいた方がいろいろ安心。とくに「mdファイルって何?」みたいなお客さんにドキュメントを渡さないといけない場合とか・・・。

MarkdownをPDF化するのは、Pandocを利用する方法もあるのだが、ここではVisual Studio Code(以下、VS Code)の拡張機能である「Markdown PDF」を利用する。

環境

  • Windows 10
  • VS Code

インストール

VS Codeにて、Ctrl+Shift+Xで拡張機能の検索窓に「Markdown PDF」と入力するか、上記のリンクをクリックする。検索結果から「Markdown PDF」を選択し、インストールする。Markdown PDFをインストールして、VS Codeで適当なMarkdownファイルを最初に開いた際、Chromiumのダウンロードが自動で始まる。なんでChromiumが必要かというと、Markdown PDFがPDF変換するのに利用しているから。

使い方

コマンドを入力する方法とマウスの右クリックメニューから選択する方法の2通りがある。

コマンド入力

  1. PDF化したい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)
      この中からExport (pdf)を選択する。
  4. 少し待つと、Markdownと同一のフォルダーにPDFが生成される。

右クリックメニューから

  1. PDF化したいMarkdownファイルを開く。
  2. mdファイルの任意の場所で右クリックする。
  3. 右クリックメニュー中に下記のエクスポートメニューが表示される。
    • 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)
      Export (pdf)をクリックする。
  4. 少し待つと、Markdownと同一のフォルダーにPDFが生成される。

自動化

上記の使い方ではPDFへ変換するのに、毎回コマンドパレットを表示してコマンドを入力し、どのファイル形式でエクスポートするかを選択する必要がある。これを特定の変換先(今回はPDF)に限定して自動変換するよう設定する。

「ファイル」メニュー>「基本設定」>「設定」を選択するか、Ctrl+,で直接画面を開く。

setting.jsonファイルを開いて下記のように設定する。

"markdown-pdf.convertOnSave": true,  
"markdown-pdf.type": [  
    "pdf"  
],  

設定内容を書き込んだらVS Codeを1度再起動する。

これで、Markdownファイルを編集し保存したタイミングで自動的にPDFへ変換するようになる。

注意

この拡張機能は変換したファイルの出力先を変更できないので、必ずMarkdownファイルが格納されているフォルダーと同じ場所に出力される。また、出力先ファイル名も指定できないので、同一名のファイルが既存である場合は自動的に上書きする。

記事が少しでもいいなと思ったらクラップを送ってみよう!
16
+1
@webmaster909の技術ブログ

よく一緒に読まれている記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる

技術ブログをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

技術ブログを開設する

Qrunchでアウトプットをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

Markdownで書ける

ログ機能でアウトプットを加速

デザインのカスタマイズが可能

技術ブログ開設

ここから先はアカウント(ブログ)開設が必要です

英数字4文字以上
.qrunch.io
英数字6文字以上
ログインする