こんにちは。たいら(@tairaengineer2)です。
転職を繰り返し現在5社経験している、14年目エンジニアです。
この記事では、MarkdownファイルをPDFに変換するときヘッダーとフッターを指定するやり方について
- Markdownファイルをヘッダーとフッターを指定するやり方
- サンプルプログラム
と、丁寧に解説していきます。
前提条件：実行環境について
実行環境は以下の通りです。
| OS | Windows11 |
|---|---|
| Visual Studio Codeのバージョン | 1.103.0 |
PDFに変換するためにはMarkdown PDFという拡張機能を入れておく必要があります。
やり方は、こちらの記事をご参考ください。
MarkdownファイルをPDFに変換するときヘッダーとフッターを指定するやり方を解説
MarkdownファイルをPDFに変換するときヘッダーとフッターを指定するやり方を解説します。
ヘッダーとフッターは、Visual Studio Codeのsettings.jsonでいろいろ設定すれば指定することができます。
settings.jsonを開くやり方は、こちらの記事をご参考ください。
ヘッダーとフッターを指定するためには、最低限
- markdown-pdf.displayHeaderFooter
- markdown-pdf.headerTemplate
- markdown-pdf.footerTemplate
の3つを指定すればOKです。
書き方は、こんな感じです。
|
1 2 3 |
"markdown-pdf.displayHeaderFooter": true, "markdown-pdf.headerTemplate": "<div style='font-size:9px;'>ヘッダーテスト</div>", "markdown-pdf.footerTemplate": "<div style='font-size:9px; text-align:center;'>フッターテスト</div>" |
この状態でPDFに変換したとき、ヘッダーは
フッターはこんな感じで出力されます。
設定したものを解説していきます。
「markdown-pdf.displayHeaderFooter」は、ヘッダーとフッターを出力するためのHTMLテンプレートを指定するかどうかの項目です。
これは必ず「true」を指定する必要があります。
「markdown-pdf.headerTemplate」はヘッダー、「markdown-pdf.footerTemplate」はフッターのHTMLを指定します。
ヘッダーとフッターで表示したいものを指定すればOKです。
ヘッダーとフッターのサンプル集
ヘッダーとフッターで、指定すると便利なものを
- ファイル名をヘッダーとフッターに指定
- 日時をヘッダーとフッターに指定
- ページ数をヘッダーとフッターに指定
という3パターンをサンプル集としてまとめました。
ファイル名をヘッダーとフッターに指定するサンプル
ファイル名を表示したい場合
|
1 |
<span class='title'></span> |
のタグを指定します。
サンプルは以下です。
|
1 2 |
"markdown-pdf.headerTemplate": "<div style='font-size:9px;'>ファイル名：<span class='title'></span>：表示場所ヘッダー</div>", "markdown-pdf.footerTemplate": "<div style='font-size:9px;'>ファイル名：<span class='title'></span>：表示場所フッター</div>" |
こんな感じになります。
- ヘッダー
- フッター
日時をヘッダーとフッターに指定するサンプル
日時を表示したい場合、やり方は複数あります。
|
1 |
<span class='date'> |
のタグを指定するのと、プレースホルダーを指定するやり方です。
プレースホルダーについては、以下の表にまとめました。
| プレースホルダー | 表示フォーマット |
|---|---|
| %%ISO-DATETIME%% | YYYY-MM-DD hh:mm:ss |
| %%ISO-DATE%% | YYYY-MM-DD |
| %%ISO-TIME%% | hh:mm:ss |
日時はヘッダーはspanタグ、フッターはプレースホルダーの%%ISO-DATETIME%%を指定してみます。
サンプルは以下です。
|
1 2 |
"markdown-pdf.headerTemplate": "<div style='font-size:9px;'>日時：<span class='date'></span>：表示場所ヘッダー</div>", "markdown-pdf.footerTemplate": "<div style='font-size: 9px;'>日時：%%ISO-DATETIME%%：表示場所フッター</div>" |
こんな感じになります。
- ヘッダー
- フッター
ページ数をヘッダーとフッターに指定するサンプル
表示している現在のページ数を表示したい場合は
|
1 |
<span class='pageNumber'></span> |
PDFのトータルのページ数を表示したい場合は
|
1 |
<span class='totalPages'></span> |
のタグを指定します。
サンプルは以下です。
|
1 2 |
"markdown-pdf.headerTemplate": "<div style='font-size:9px;'>ファイル名：<span class='title'></span>：表示場所ヘッダー</div>", "markdown-pdf.footerTemplate": "<div style='font-size:9px;'>ファイル名：<span class='title'></span>：表示場所フッター</div>" |
こんな感じになります。
- ヘッダー
- フッター
まとめ：MarkdownファイルをPDFに変換するときヘッダーとフッターを指定してみよう！
以上がMarkdownファイルをPDFに変換するとき、ヘッダーとフッターを指定するやり方についての解説でした！
あなたのご参考になったのなら、とても嬉しいです(*´▽｀*)
ではでは～(・ω・)ﾉｼ
コメント