0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

VSCode+Markdown Preview EnhancedだけでPDFのページ番号を出力する方法

0
Last updated at Posted at 2025-12-27

前置き

VSCode + Markdown Preview Enhancedだけでページ数出力をさせたいのに、Markdown PDFを使うとよいという記事が多く、いろいろ試した結果以下になった。
※表の結合とかも使いたかった

結論

Markdownファイルの一番上に以下の物を追加しましょう(--- も含む)
※ headerは、display: none;で消してあります。表示したい場合は、display: none;を消してください。
※ previewでページ番号は表示されず、exportしないと見られない

---
puppeteer:
  displayHeaderFooter: true
  headerTemplate: "<div style=\"font-size: 9px; margin-left: 1cm; display: none;\"> <span>header</span></div>"
  footerTemplate: "<div style=\"font-size: 15px; margin: 0 auto;\"><span class='pageNumber'></span></div>"
---

exportすると、こんな感じでページ番号が表示されます。
image.png

現在のページ数 / 総ページ数の表記にしたい場合は、以下

---
puppeteer:
  displayHeaderFooter: true
  headerTemplate: "<div style=\"font-size: 9px; margin-left: 1cm; display: none;\"> <span>header</span></div>"
  footerTemplate: "<div style=\"font-size: 15px; margin: 0 auto;\"> <span class='pageNumber'></span>/<span class='totalPages'></span></div>"
---

こんな感じで表示される(Page 1/19とかの方がよいかもしれない)
image.png

以上です。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?