Zenn
🚄

VSCodeでMarkdown(→PDF)環境構築

2024/02/03に公開
VS Code
Markdown
PDF
VS Code 拡張機能
tech

Requirements

  • 最終的にPDFを作成したいため、長いコードは折り返してほしい。
  • PDFにもコードブロックの背景を表示したい。

TL;DR

Markdown Preview Enhancedの設定とカスタマイズCSSを使用。

Steps

1 VSCode拡張機能 "Markdown Preview Enhanced" をインストールする

Yiyi Wangさん作成のVSCode拡張機能 "Markdown Preview Enhanced" (拡張機能ID:shd101wyy.markdown-preview-enhanced) をインストールします。

2 カスタマイズCSSを適用

VSCodeでF1を押した際に表示されるコマンドパレットから、**"Markdown Preview Enhanced: Customize CSS"**を選択します。Global(全体適用)とWorkspace(このワークスペースのみ適用)はお好みで選択してください。

その後、カスタマイズCSSを以下の内容で置き換えます。

.markdown-preview.markdown-preview {
  pre, code {
       white-space: pre-wrap;
  }
}

3 設定を変更

Markdown Preview Enhanced拡張機能の設定を開きます。

Markdown-preview-enhanced: Print Background　にチェックを入れます。

4 完了

拡張子.mdのMarkdown形式ファイルを開いた状態で、Ctrl+K → V (Mac: Cmd+K → V) と入力することでプレビューが表示されます。

プレビュー画面を右クリックし、Export → Chrome (Puppeteer) → PDFと選択することでファイルと同じディレクトリにファイルと同名のPDFファイルが生成されます。

フォロー、X(Twitter)フォローもよろしくお願いいたします。
https://twitter.com/kouki__ito

Discussion