Markdownで改ページのコントロールがしたい！

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

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

きっとできるさ。

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

改ページ用の CSS 属性

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

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

Markdown のどの要素に使う？

本来この属性はdivやsectionなどのブロックに対して使うのですが、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にエクスポートして確認してください。