【VS Code初心者向け】MarkdownをPDFにサクッと変換 – Markdown PDF拡張機能を使ってみよう

みなさん、こんにちは。

VS CodeでMarkdownファイルを編集しているときに、「この内容を誰かに共有したいな」「印刷して手元で確認したいな」って思ったことはありませんか?

VS CodeはMarkdownを書くのにとっても便利なツールですが、残念ながらPDFにしたり印刷したりする機能は標準でついていません。ブラウザでプレビューしてから印刷したり、他のツールにコピーしたりするのはちょっと手間ですよね。

そこで今回は、VS Codeに神機能を追加してくれる拡張機能「Markdown PDF」をご紹介します! これを使えば、Markdownファイルをあっという間にPDFに変換できちゃいます。

画像やコードのハイライト、表などもキレイに反映してくれるので、レポートやブログ記事の草稿にもピッタリですよ。

 


 

1. Markdown PDF拡張機能をインストールしよう

 

まずは、VS CodeにMarkdown PDF拡張機能を追加する手順から見ていきましょう。

ステップ1:拡張機能ビューを開く

VS Codeを開いて、左側にある4つの四角形が並んだアイコンをクリックしてください。これが「拡張機能ビュー」です。

拡張機能ボタン
4つの四角形が並んだアイコン

キーボードショートカットを使いたい方は、Ctrl+Shift+X(Macの方はCmd+Shift+X)でも開けます。

ステップ2:拡張機能を検索してインストール

拡張機能ビューが開いたら、上部の検索ボックスに「Markdown PDF」と入力します。

すると、検索結果に開発者「yzane」の「Markdown PDF」が表示されます。

Markdown PDF
Markdown PDF

インストール数が多く、評価が高いものが本物なので、これを選んで「インストール」ボタンをクリックしましょう。

インストールが完了すると、「インストール」ボタンが「管理」ボタンに変わります。これで準備はOKです!

 


 

2. 基本的なPDF化の方法

 

インストールが終わったら、さっそくMarkdownファイルをPDFに変換してみましょう。いちばん簡単なのは、右クリックメニューを使う方法です。

ステップ1:Markdownファイルを開く

まずは、PDFに変換したいMarkdownファイル(.md)をVS Codeで開いてください。

※注意点 拡張機能を安全に利用するためには、作業するフォルダが「信頼済み」である必要があります。通常はフォルダを開いたときに確認ダイアログが表示されるので、「はい、作者を信頼します」を選択しておきましょう。

作成者を信頼
作成者を信頼しますをクリック

ファイルがない場合は、新しいファイルを作って、以下のような簡単なMarkdownを書いて保存してみましょう。

# 見出し1
これはサンプルテキストです。

## 見出し2
- リスト項目1
- リスト項目2

```python
print("Hello, World!")

ステップ2:右クリックメニューからエクスポートを実行

ファイルを開いた状態で、エディタ上で右クリックしてください。メニューの中に「Markdown PDF: Export (pdf)」という項目が表示されます。これを選択するだけでOKです!

右クリックメニュー
右クリックメニュー

ステップ3:PDFをチェック!

コマンドを実行すると、拡張機能が自動的にファイルを変換し、PDFとして出力してくれます。

PDFファイルは、元のMarkdownファイルと同じ場所に、同じファイル名で作成されます(例: sample.mdsample.pdf)。

VS Codeの下部に「PDFが生成されました」といったメッセージが表示されるので、ファイルエクスプローラーを開いて確認してみましょう。無事にPDFができていれば成功です!

コマンドパレットからもできるよ!

もちろん、先ほどご紹介したコマンドパレットからも同じことができます。 Ctrl+Shift+P(Macの方はCmd+Shift+P)でコマンドパレットを開き、「Markdown PDF: Export (pdf)」を選択して実行するだけです。キーボード操作が好きな方にはこちらの方法もおすすめです。

 


 

3. もっと細かく設定をカスタマイズしよう

 

デフォルトの設定でも十分使えますが、よりこだわったPDFを作りたいときは、設定を調整できます。

設定ファイルの開き方

コマンドパレットで「Preferences: Open Settings (JSON)」と入力し、設定ファイル(settings.json)を開いてください。ここに以下の設定項目を追加・編集することで、見た目やレイアウトを自由に変えられます。

設定項目説明設定例
outputDirectory出力先のフォルダを指定します。"${workspaceFolder}/pdfs" (← workspaceフォルダにpdfsフォルダを作って出力)
stylesCSSファイルでデザインをカスタマイズできます。["https://cdn.jsdelivr.net/npm/github-markdown-css/github-markdown.css"] (← GitHub風の見た目にしたいとき)
format用紙サイズを指定します。"A4""Letter"など
margin上下左右の余白を調整します。{ "top": "20mm", "right": "20mm" }

PDFにファイル名やページ番号のヘッダー・フッターが自動で入るのが気になる方は、"markdown-pdf.headerTemplate": """markdown-pdf.footerTemplate": "" を設定に追加すると非表示にできますよ。

 


 

4. トラブルシューティング:困ったときは

 

まれに、PDFがうまく生成されないことがあります。そんな時の対処法をいくつかご紹介します。

1. PDFが生成されない

まずは、Markdownファイルが保存されているか確認してみてください。Ctrl+S(MacはCmd+S)で保存してから再度試してみましょう。

2. Linux環境でエラーが出る

「Failed to launch the browser process」といったエラーが出た場合、VS CodeがPDFを生成するために内部で使っている「Puppeteer」(Webブラウザを操作するツール)が、必要なシステムライブラリを見つけられていない可能性があります。

Linuxの種類によってコマンドは異なりますが、UbuntuやDebianの場合は、以下のコマンドで必要なライブラリをインストールできることがあります。

sudo apt-get update
sudo apt-get install libxss1 libnss3 libasound2 libgbm-dev

それでもうまくいかない場合は、「Puppeteer Linux 依存関係」で検索して、詳しい情報を探してみてください。

 


 

まとめ

 

Markdown PDF拡張機能を使えば、VS Code内でMarkdownをPDF化する作業が劇的に楽になります。

インストールは簡単ですし、コマンドパレットや右クリックからサクッと変換できるので、日々の開発やドキュメント作成の効率がぐっと上がりますよ。

ぜひ一度試してみてください!

 

本日も最後までお読みいただきありがとうございました。

それでは、よいVS Codeライフを!

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

上部へスクロール