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-pdf でヘッダ・フッタを試してみる

Last updated at Posted at 2024-06-28

「VSCode で数式や図の入った小冊子をつくる」
https://qiita.com/nanbuwks/items/56dad2c4d6a640f550e2

にて、 pdf化は markdown-pdf を使いました。

そこで、ヘッダー、フッター、ページ番号についてうまくコントロールできなかったので、断念して pdf を作成した後にポストプロセスでページ番号をつけるようにしました。

何かとトラブルの起こるこの機能を、ちょっと調べてみます。

テストする文書

以下の markdown で試してみます。

# markdown-pdf のテスト

ヘッダ、フッタの調整をしてみます。

<div class="page"/>

# 2ページ目

ここからページ番号をはじめたいのだが・・・

<div class="page"/>

# あとがき

うまくいったかな?

設定

まずは Display Header Footer にチェックを付けてみます。

image.png

拡大設定

この Qiita の記事で、説明しやすくするために拡大してみようかな。

image.png

image.png

拡大しても、ヘッダ、フッタは拡大がかからないようですね。

フッタの文字を大きくする

ヘッダ、フッタの文字の大きさも、9 ポイントぐらいでないと不具合が起こるそうです。なのでヘッダ、フッタを大きくするためには「Scale」ではなく、「Format」で紙サイズを小さくするなどで対処の必要があるでしょう。
image.png

以降は Scale を 1 に戻して、 Format を A5 にして試していきます。

Header のコントロール

Header Template を標準の値である以下のようにすると、

<div style="font-size: 9px; margin-left: 1cm;"> <span class='title'></span></div> <div style="font-size: 9px; margin-left: auto; margin-right: 1cm; ">%%ISO-DATE%%</div>

とすると、どういうわけかこんな感じになった。

image.png

Header 自体を消したかったので、Workspace セッティングの Header Template を空白にしたけれども、

image.png

以下のように表示された。User セッティングが有効になったかな?

image.png

仕方がないのでドットをひとつだけ入れてみた。

image.png

スペース1つを入力するだけでもいけるようだが設定がわからなくなりそうなのでドットを入れたのだけれど、。どういうわけかドットも表示されなくなった。
image.png

Footer のコントロール

標準の以下の内容だと、

 <div style="font-size: 9px; margin: 0 auto;"> <span class='pageNumber'></span> / <span class='totalPages'></span></div>

以下のようになる。なぜに?

image.png

中央揃えでページ番号だけ表示させたいと考え、アレコレ触っているとテンプレートに近いこんな表示になった。
image.png

によると、ページ番号の上位にページコンテンツが表示されているために起こるらしい。
マージンを1cmから2cmに変更すると、
image.png
うまく出るようになりました。

image.png

途中からページ番号を開始することはできません

表紙はページ番号を表示させないようにしたいけれどもここは関係するかな?
image.png

と思ったら単にPDFに変換するページの指定だった。

image.png

markdown-pdf のページ番号は表紙から始めると割り切り、もしそれ以上のことをするなら従来どおり PDF 作成後にポストプロセスでなんとかするしか無さそうです。

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?