Notionからいい感じのPDFを生成する(Notion + VScodeで実現)

 
Notionで書いた情報をPDF化したい。
書類をPDF形式で作る関係でそう思うことがあります。
NotionでもPDFでエクスポートできますが、スタイルを整えられない問題(※)があり、実用的ではありませんでした。
※ヘッダー、フッダーを任意に入れることができない、改ページを任意の個所でできない等

一手間加えて解決する

NotionからそのままPDF!!とはいきませんが、以下の手順でスタイルを整えた形でPDF化できました。

用意するもの

  • Notion
  • VSCode コードエディタ
  • Markdown PDF VScodeプラグイン
    •  
Notionの他に、VScodeMarkdown PDFを用意します。
VScode(Visual Studio Code)はコードエディタです。 ソフトウェア開発している人には馴染みがあると思います。
Markdown PDFはVSCodeのプラグインで、Markdown(マークダウン)からPDFを生成できます。
今回の環境

インストール

○VSCode
VSCodeはこちらからダウンロード可能です。
Windows、Mac、Linux版が用意されているので、ご自身の環境のものをダウンロードします。
Markdown PDF
VScodeを起動して、画面左したのアイコンをクリックします。
※わたしの環境はMacです※
プラグイン(拡張機能)の検索できるので、「Markdown PDF」と入力します。
表示された検索結果から、Markdown PDFのインストールをクリックします。
ちなみに、「Japanese」と入力すると、VScodeを日本語化するプラグインをインストールできます。
これで準備完了です。
 
スポンサード

手順

ここからは実際にPDFを生成する手順をご紹介します。

Notionからエクスポート

PDF化するドキュメントをエクスポートします。
”Export format”は「Markdown & CSV」、”Include content”は「Everything」を選択。
Exportをクリックすると、保存場所を確認されるので任意の場所を選択。
※画像などのコンテンツが含まれている場合、ZIPファイルで保存されます
保存されるZIPファイル名は、指定しなければ「Export-abc123**」のような英数字が含まれるものになります。
ZIPを解凍すると以下の構成でファイルが保存されます。
ディレクトリの中には、画像などのコンテンツが含まれます。
  • ***.md
  • ディレクトリ
    • コンテンツ(画像など)
  • ***.mdがマークダウンのファイル。

VSCode設定

まず、VSCodeの設定を行います。
設定概要:
1.VSCodeを起動し、「ファイル」→「フォルダーを開く」をクリック、エクスポートしたファイルを格納しているディレクトリを指定します。
2.名前を付けてワークスペースを保存」をクリックします。
ワークスペースの設定ファイルを保存するダイアログが出るので保存します。
「***.code-workspace」という拡張子で保存されます。
「***.code-workspace」の内容はデフォルトでこんな感じです。
このファイルにVSCodeの設定内容を記述します。
VSCodeの基本設定からも設定可能ですが、こちらからだとVSCode全体に影響する設定となります。
上記のようにワークスペースで設定すると、ワークスペース内にのみ反映される設定となるため、今回はこちらを採用しています。
 
💡 次回以降(VSCodeを閉じて再度開く場合)作業をする場合は、「ファイルでワークスペースを開く」から作成した設定ファイル(***.code-workspace)を開いてください。
ワークスペースを開かないと設定が反映されません。
 
VSCode設定ファイルの編集
今回試した設定ファイルはこちら。
お手元の「***.code-workspace」に貼り付ければ同じ結果になるはずです。
設定方法はMarkdown PDFの公式ドキュメントに詳しく書いてあります。
以上で準備完了です。

VSCodeでPDF生成

そして、いよいよPDFの生成です。
VSCodeでPDF化するマークダウンを開いた状態で、コマンドパレットを開きます。
キーボードのF1を押すか、ショートカットCmd + Shift + P(Mac)、Ctrl + Shift + P(Windows)で開くことが可能です。
コマンドパレットからプラグインの機能を実行できます。
次に、コマンドパレットに「markdown pdf」を入力します。
候補がいくつか表示されるので、「Markdown PDF: Export(settings.json)」を選択します。
※作成した設定ファイルの内容を元にPDFを生成します
VSCode画面の右下に作業の状態が表示されます。(下記画像ではエクスポート中です)
しばらくすると、マークダウンファイルと同じディレクトリにPDFが作成されます。

完成

これで完成です。
PDFを開くと、ヘッダー(日付)・フッダー(ページ情報、任意の文字列)が設定したもので生成されています。
ページの向きを横にしたので横向きになっています。

その他Tips

改ページ

中途半端な個所で改ページされてしまう場合があります
任意の個所で改ページを入れるには、改ページしたい個所に下記文字列を入力します。
こんな感じで改ページできます。

画像サイズ

Notionにアップロードした画像サイズ(縦、横幅)がそのままPDF化した時にも反映されます。
大きなサイズでアップロードすると、Notion上ではいい感じのサイズ感になっていても、PDFにしてみたら画像が大きすぎる!!となることがあります。
その場合の対処方法は下記です。
  • Notionにアップロードする前に画像ファイルを調整する
    • 手間が少ないのでこちらがおすすめ。
  • マークダウンファイルで画像サイズを指定する
    • マークダウンファイルで画像を指定している個所に「<img src="画像のURL" width="画像サイズ">」と記載して画像サイズを指定します。
      マークダウンの表記ではそのままサイズ指定できないので、以下のように変換します。
以下の例では、上がサイズ指定した画像、下がそのままの画像です。

スタイル指定

こだわったデザインにしたい場合、スタイルシートを指定することで可能です。
「markdown-pdf.styles」にスタイルシート(css)のパスを指定します。

おわりに

Notionは直感的なエディタなので、ドキュメントをNotionで作りたい人も多いと思います。
「ただ、PDFにしないといけないんだよな・・・」という人の助けになれば幸いです。
 
それでは良いNotionライフを!!