Visual Studio Code - 拡張機能 - Markdown - pdf

1.　概要
2.　インストール
3.　使い方
4.　改行
5.　サムネイル表示
6.　PDF のみ
7.　参考サイト

1.　概要

　「Markdown」で記述したものを、ビジュアル表示した状態で、「.pfd」にできないかなぁと、別の場面で思っていたら。
　「Visual Studio Code」の拡張機能にあるようです。

2.　インストール

　いくつか候補があるようですが。

	・Markdown PDF
	・Markdown Preview Enhanced

　「Markdown PDF」ちゅうのが、お手軽なようです。

3.　使い方

　使い方は、簡単。
　「Visual Studio Code」のエディタ上で、「.md」を開いている状態で、右クリックすれば。
　下記のような出力候補が、表示されます。


　やや、画像や「.html」にも出力できるようですな。
　まだ、やってみてないけど。

4.　改行

　デフォルトのままだと、通常の改行が「.pdf」上でうまく改行されない。
　拡張機能の設定で。
　最上位の方にある、「Markdown-pdf: Breaks」「Enable line breaks」という項目にチェックをいれると、うまく改行を反映してくれます。

5.　サムネイル表示

　「pdf」は、「Adobe Acrobat Reader」で読む場合、デフォルトをサムネイル表示にできないのだ。
　これに関しては、「PDF ファイル関連 - Adobe Acrobat Reader」をご参照ください。

　「Markdown PDF」には、デフォルトでサムネイル表示にする設定もできないようなので、カスタマイズします。
　「Visual Studio Code」の拡張機能は、「JavaScript」もしくは「Typescript」で書かれており、今から行うカスタマイズ方法には、「JavaScript」の「pdf-lib」というパッケージが必要なようなので、インストールしておきます。


npm install pdf-lib


　2026年10月5日時点で、「Markdown PDF」の拡張機能は、下記へインストールされています。


C:\Users\user\.vscode\extensions\yzane.markdown-pdf-2.2.0


　この配下の下記のファイルを編集します。


dist\extension.js



          const pdfOptions = buildPdfOptions(pdfConfig);
          await page.pdf(pdfOptions);
        }


　22948行の後ろに、下記の行を追加します。


          {
            const { PDFDocument, PDFName } = require("pdf-lib");
            const bytes = import_fs10.default.readFileSync(exportFilename);
            const pdfDoc = await PDFDocument.load(bytes);
            pdfDoc.catalog.set(PDFName.of("PageMode"), PDFName.of("UseThumbs"));
            import_fs10.default.writeFileSync(exportFilename, await pdfDoc.save());
          }


　この場合、「Markdown PDF」のバージョンが変わる都度、変更する必要があります。
　「Visual Studio Code」でウィンドウの再読み込みすると設定した内容が有効になります。

6.　PDF のみ

　使い方の項に、右クリックメニューを表示していますが、わたしは「PDF」のみでいいのだ。
　選択肢を「PDF」のみにします。
　前項の拡張機能のディレクトリある。


package.json


　を開いて。


			"editor/context": [
				{
					"when": "resourceLangId == markdown",
					"command": "extension.markdown-pdf.settings",
					"group": "markdown-pdf@1"
				},
				{
					"when": "resourceLangId == markdown",
					"command": "extension.markdown-pdf.pdf",
					"group": "markdown-pdf@2"
				},
				{
					"when": "resourceLangId == markdown",
					"command": "extension.markdown-pdf.html",
					"group": "markdown-pdf@3"
				},
				{
					"when": "resourceLangId == markdown",
					"command": "extension.markdown-pdf.png",
					"group": "markdown-pdf@4"
				},
				{
					"when": "resourceLangId == markdown",
					"command": "extension.markdown-pdf.jpeg",
					"group": "markdown-pdf@5"
				},
				{
					"when": "resourceLangId == markdown",
					"command": "extension.markdown-pdf.all",
					"group": "markdown-pdf@6"
				}
			]


　「pdf」のみにします。


			"editor/context": [
				{
					"when": "resourceLangId == markdown",
					"command": "extension.markdown-pdf.pdf",
					"group": "markdown-pdf@2"
				}
			]


　当初コメントアウトしようとしたのですが、「.json5」でないので、コメントアウトが効かないので、元ファイルのバックアップをとって、編集することが望ましいです。
　変更したら、ウィンドウの再読み込みで反映されます。

7.　参考サイト

　本ページは、「Claude」上等兵を参考にさせていただきました。