Markdownで改ページのコントロールがしたい!
create: 2019-11-21
CSS Markdown

MarkdownPDF 化して納品しようとしたら改ページがぐっちゃぐちゃなので怒られた話。
あるあ・・・すみませんでした。

Markdown でPDFの改ページ制御なんてできるの?

きっとできるさ。

変換は VSCode のプラグインである Markdown All in One というものを使っています。
このツールはMarkdownHTMLPDF の順に変換します。
HTML の印刷スタイル設定が PDF に効くので、CSSでスタイルを設定すればいいと思われます。

改ページ用の CSS 属性

改ページには page-break-after という属性があって、これを使います。
MDN: page-break-after

おや?
MDN をよく見ると、この属性は break-after に置き換えられたとのことです。
MDN: break-after

Markdown のどの要素に使う?

本来この属性はdivsectionなどのブロックに対して使うのですが、Markdownで書いているとブロックを意識することがありません。
そこで、 --- を書いたところ、HTMLでいうhrタグを強制下位ページ位置として利用することにしました。

Markdown にスタイルを埋め込む

Markdownには CSS スタイルを埋め込むことができます。
HTMLと同じ様にページの先頭に記述すれば OK です。

<style>
  hr {
    opacity: 0;
    break-after: page;
  }
</style>

これだけで、 --- が記述されていた箇所の後ろで改ページされるようになります。
opacity: 0で不可視にしています。
同じ不可視でもdisplay: none では改ページとして動作しません。

すでに hr は意味を持って使っているんだけど・・・

まあ、そういうこともありますよね。
そんなときは、さっきのスタイルをhrではなく他の要素に使えばいいんです。
Markdownは生 HTML タグを書けるのでやりたい放題です。

<style>
  .page-break {
    opacity: 0;
    break-after: page;
  }
</style>

コンテンツ 1

<div class="page-break"></div>

コンテンツ 2

完成!

これでPDF内の改ページをコントロールできるようになりました。
自動的に大きなブロックで制御したければdivタグで囲ってあげのが良いでしょうね。

なおブラウザの表示では確認できません。
ブラウザの印刷プレビューか、PDFにエクスポートして確認してください。