【VSCode】Markdown PDFで改ページする方法
みなさんこんにちは。
VSCodeでMarkdownファイルを作成して、Markdown PDFを使用してPDF出力していると、任意の位置で改ページしたい場合があるかと思います。
文章量が増えてくると、中途半端な位置で次のページに切り替わってしまい、見出しだけが前のページに残ってしまうこともあります。
今回は、Markdown PDFで任意の位置に改ページを入れる方法についてご紹介したいと思います。
この記事はこんな人におすすめ
この記事はこんな人におすすめです！
- VSCodeでMarkdownファイルを作成している人
- Markdown PDFを使用してPDF出力している人
- 任意の位置で改ページしたい人
- 見出しや画像がページをまたいでしまい困っている人
- Markdownで作成した資料を見やすく整えたい人
といったところでしょうか。
VSCode・Markdown PDFに関する過去の記事
VSCodeやMarkdown PDFについては過去の記事でもご紹介しておりますので、そちらもどうぞ。
改ページを設定しない場合
Markdown PDFでは、文章量に応じて自動的に改ページされます。
そのため、以下のように見出しの直前でページが切り替わってほしい場合でも、文章量によっては意図しない位置で改ページされることがあります。
# タイトル
## 1つ目の見出し
ここに文章を記述します。
## 2つ目の見出し
ここから新しいページにしたい。
資料としてPDFを作成する場合は、見出し単位や章単位でページを分けたいケースも多いかと思います。
Markdown PDFで改ページする方法
Markdown PDFでは、改ページしたい位置に以下のHTMLを記述します。
<div class="page"></div>
たったこれだけです。
Markdown PDFの公式ドキュメントでも、改ページを挿入する方法として以下の2つが案内されています。
<div class="page"/>
または、
<div class="page"></div>
のどちらでも改ページできます。
今回は、開始タグと終了タグが分かれていて見た目にも分かりやすいので、<div class="page"></div>を使用します。
実際の記述例
例えば、2つ目の見出しから新しいページにしたい場合は以下のように記述します。
# タイトル
## 1つ目の見出し
ここに文章を記述します。
<div class="page"></div>
## 2つ目の見出し
ここから新しいページになります。
改ページしたい場所の直前に<div class="page"></div>を入れておけば、その位置でページを区切ることができます。
PDF出力して確認する
記述ができたら、Markdown PDFを使用してPDFを出力します。
Markdownファイルを右クリックして、Markdown PDF: Export (pdf)を選択してください。
PDFを確認すると、<div class="page"></div>を記述した位置で改ページされます。
見出しの直前や章の切り替わりなど、自分の好きな位置でページを分けられるので、資料を作成する際に非常に便利です。
改ページを複数入れる場合
複数の場所で改ページしたい場合も、同じ記述を必要な場所に入れるだけです。
# タイトル
## 1ページ目
ここに文章を記述します。
<div class="page"></div>
## 2ページ目
ここに文章を記述します。
<div class="page"></div>
## 3ページ目
ここに文章を記述します。
これで、それぞれの位置で改ページされます。
以前使用していたstyle指定との違い
改ページについて調べると、以下のような記述を見かけることもあります。
<div style="page-break-before: always;"></div>
CSSを直接記述して改ページする方法です。
ただし、現在のMarkdown PDFではHTMLのサニタイズ設定によってstyleがそのまま利用できない場合があります。
そのため、Markdown PDFで単純に改ページを入れたいだけであれば、公式で案内されている<div class="page"></div>を使用する方法が分かりやすいかと思います。
styleが反映されない場合の対処方法については、以下の記事でご紹介しています。
注意点
改ページを入れすぎると、PDF内に大きな空白が発生してしまう場合があります。
そのため、文章を作成している途中で細かく改ページを入れるよりも、一度PDFを出力して全体のバランスを確認してから必要な位置に追加していくのがおすすめです。
見出しの直前や大きな章が切り替わる場所など、資料として区切りたい場所に使用すると見やすくなるかと思います。
最後に
いかがでしたでしょうか。
今回は、VSCodeのMarkdown PDFで改ページする方法についてご紹介しました。
Markdownで資料を作成していると、文章の内容だけでなくPDFとして出力した際の見た目を整えたい場合も多いかと思います。
改ページしたい位置に<div class="page"></div>を入れるだけなので、とても簡単です。
Markdown PDFを使用して資料を作成する際に、少しでもご参考になればと思います。
開発依頼について
ココナラでWebスクレイピング開発サービスを出品しております。
自分で開発をしようと思ったけど、VBAでのネット記事が少なく困っている方も多いかと思います。
そんな方はいつでもお気軽にご相談ください。
また、本ブログからご依頼いただいた方については割引特典がございますので、
ご不明点と合わせてメッセージをいただけると幸いです。
Excelにてブラウザ操作自動化ツールを作成します その作業、webスクレイピングを使って自動化しましょう！Webスクレイピング以外にもWebアプリの開発サービスも出品しております。
こちらについても、本ブログからご依頼いただいた方については割引特典がございますので、
お気軽にご相談ください。
スモールスケールのWebアプリ開発します 先ずはスモールスケールのWebアプリから始めませんか？
