VSCode の markdown-pdf でヘッダ・フッタを試してみる

「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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/8ce897d4-e004-b841-5bcd-338038aa67b9.png)

# 拡大設定

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/b08749fc-0bde-64b2-5063-ebd2af55e7bc.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/b5211696-3270-aaac-53d2-99386d15f8f4.png)

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

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

ヘッダ、フッタの文字の大きさも、9 ポイントぐらいでないと不具合が起こるそうです。なのでヘッダ、フッタを大きくするためには「Scale」ではなく、「Format」で紙サイズを小さくするなどで対処の必要があるでしょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/a8d62238-400e-8cad-138f-64a6a5ca181e.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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/4a158989-62e9-3383-cd02-752ed146842c.png)


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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/cd191339-6724-fc33-4c2c-2c2b91408b9b.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/6aeafe22-90a2-cf4c-80e9-da56c6b9c3be.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/db1ed6d9-df1b-ebe5-3297-24a6a756a508.png)

スペース1つを入力するだけでもいけるようだが設定がわからなくなりそうなのでドットを入れたのだけれど、。どういうわけかドットも表示されなくなった。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/2b0dd20d-ae89-8c6f-109a-9b5eb8618642.png)


 # Footer のコントロール

標準の以下の内容だと、
```
 <div style="font-size: 9px; margin: 0 auto;"> <span class='pageNumber'></span> / <span class='totalPages'></span></div>
```
以下のようになる。なぜに?

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/9d6f19ec-1c54-8402-6854-89cc3a7e3e70.png)

中央揃えでページ番号だけ表示させたいと考え、アレコレ触っているとテンプレートに近いこんな表示になった。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/712919c8-45c7-bd81-e40b-df8bdb70c1f5.png)

https://github.com/yzane/vscode-markdown-pdf/issues/349

によると、ページ番号の上位にページコンテンツが表示されているために起こるらしい。
マージンを1cmから2cmに変更すると、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/a57c019a-824f-43ce-22ba-1ab2121cd68f.png)
うまく出るようになりました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/6172871a-25fb-bf3a-0a0e-65e8ed2a0ddf.png)


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

表紙はページ番号を表示させないようにしたいけれどもここは関係するかな?
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/d985bd8d-efb2-d1b0-e9bf-af198185fa4e.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/403877d4-7f13-6fc5-1792-3fcaa6c6c4d6.png)

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