VSCode＋MarkdownでPDF資料作成する際に表紙とフッターを良い感じにした備忘録

良い感じにするのに少し調べたので、簡単に備忘録として残します。

使ったもの

• VSCodeと下記の拡張機能

ヘッダー・フッターをカスタムする。

• VSCodeの設定に拡張機能のヘッダー・フッター設定を追加します。

settings.json

  "markdown-pdf.margin.top": "1cm",
  "markdown-pdf.margin.bottom": "2cm",
  "markdown-pdf.displayHeaderFooter": true,
  "markdown-pdf.headerTemplate": "<<div></div>",
  "markdown-pdf.footerTemplate": "<div style=\"font-family: '游ゴシック体', 'Yu Gothic', YuGothic, 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', 'メイリオ', 'Meiryo', sans-serif; position: relative; border-top: 1px solid black; margin: 0.5cm; font-size: 9px; width: 100%;\"><div style=\"position: absolute; left: 0; top: 0.2cm;\"><span class='date' ></span></div><div style=\"position: absolute; width: 100%; top: 0.2cm; text-align: center;\">Sample Co.,Ltd. All Rights Reserved.</div><div style=\"position: absolute; right: 0; top: 0.2cm;\"><span class='pageNumber'></span> / <span class='totalPages'></span></div></div>" //フッターのテンプレ

• フッターにはフォントや高さ、出力内容を記載してます。（時間がなくてごりごり書いたので余力があればもう少し整理したい。

  • <span class='date' ></span>で作成・更新日時を出力
  • <span class='pageNumber'></span> / <span class='totalPages'></span>でページ数を出力

• 今回はヘッダーはなしなので、シンプルに<div></div>です。

  • カスタムする時は、フッター同様、良い感じに設定追加する。
  • カスタム内容によってはmarkdown-pdf.margin.topも調整が必要そう。

以上でヘッダー・フッターは完了です。

表紙をカスタムする。

拡張機能のmarkdown.cssを編集します。

• 拡張機能のmarkdown.cssを開きます。Macの場合は下記を参照。

/Users/matcha/.vscode/extensions/yzane.markdown-pdf-1.4.4/styles/markdown.css

markdown.cssに下記を追記します。

markdown.css

.cover-title {
  text-align: center;
  font-size: 4em;
}

.subtitle {
  margin-top: 3em;
  font-size: 3em;
  text-align: center;
}

.cover-container {
  display: flex;
  justify-content: space-evenly;
  height: 100%;
  margin-top: 50%;
  margin-left: 20px;
  margin-right: 20px;
  page-break-after: always;
  text-align: center;
  font-size: 2em;
}
.cover-innner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}

.title-wrapper {
  width: 100%;
}
.title-wrapper h1 {
  font-size: 60px;
}

.create-at-wrapper {
  font-weight: 500;
}

.company-name-wrapper {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: auto;
}
.company-name-wrapper .company-logo-img {
  max-width: 80px;
}
.company-name-wrapper .compay-name {
  font-weight: 600;
  padding-right: 80px;
}

表紙用のContainer要素、タイトル、作成日時、会社名などのスタイルを設定しています。なんとなくclass名で判断できていると良いな。

表紙要素を追加する。

先ほど追加したstyleの要素を下記のように追加します。

sample.md

<!-- # サンプル資料 表紙 -->
<div class="cover-container">
    <div class="cover-innner">
    <div class="title-wrapper"><h1 class="cover-title">サンプルPDF資料タイトル</h1></div>
        <div class="create-at-wrapper"><span>2023/06/08</span></div>
        <div class="company-name-wrapper">
        <img class="company-logo-img" src="./images/sample-logo.png">
        <span class="compay-name">サンプル株式会社</span>
        </div>
    </div>
</div>
<!-- # サンプル資料 表紙 -->

<!-- # 改ページ -->
<div style="page-break-before:always"></div>

ロゴ表示のため下記のような階層でファイル持ってます。

.
├── images
│   └── sample-logo.png
├── sample20230608.md
└── sample20230608.pdf

これで表紙も完了です。

出力結果

あとは拡張機能のExport（pdf）を実行すると、下記のようなPDFが出力されます🎉

まとめ

デフォルトだとちょっと格好良くないなと思うので、良い感じにできて満足です。
（今後、外部資料を作る機会があればもう少し整理したいかな。

VSCode＋Markdownでもっとお手軽にカスタムできる良い方法ありましたら、コメントなどで教えてもらえると嬉しいです。