何が問題か

Obsidianでは、マークダウン内の改ページしたいところで
以下のタグを挿入すれば改ページができます。

<div style="page-break-after: always;"></div>

ただ、これマークダウンプレビュー時には空のdivタグなので何も表示されず、
後でどこに改ページを仕込んだか間違いなく忘れてしまいます。

これでは、メンテナンス性が良くないですよね。

ということで、Wordpressのように、
改ページを仕込んだ場所を見える化します。

もちろん、印刷時(PDF出力時)にはこのラベルは表示されず、
単に改ページとして機能します。

備考: Better Export PDFのPDFプレビューで見ると、改ページが機能しません。
しませんが、実際にPDF出力すれば、ちゃんと改ページされているのでご安心ください。

実装

これをObsidianのカスタムCSSスニペットに追記 or 新規作成してください

設定 > 外観 > CSSスニペット

/Obsidian Vaults/.obsidian/snippets/pagebreaks.css

/* 改ページ用divの表示設定 */
div[style*="page-break-after: always"] {
    border-top: 2px dashed #888;
    margin: 1em 0;
    position: relative;
}

div[style*="page-break-after: always"]::before {
    content: "[page break]";
    position: absolute;
    top: -0.8em;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--background-primary);
    padding: 0 1em;
    color: #888;
    font-size: 0.9em;
}

/* 印刷時には視覚的表示を無効化 */
@media print {
    div[style*="page-break-after: always"] {
        border-top: none !important;
        margin: 0;
    }

    div[style*="page-break-after: always"]::before {
        content: "";
        display: none;
    }
}

追記

見える化すると、嬉しい副産物がありました。
改ページ部分をクリックすると、HTMLが編集できます。

これで、改ページを別の場所にコピペするのも簡単になりますね。

さらに追記

改ページを毎回、HTMLタグをコピペして設定するのはちょっとだるいなと思いまして、
専用のボタンを押せば改ページできるようにしました。

Obsidian Editing Toolbar というプラグインを追加することで実現可能です。

Obsidian Editing Toolbar > Custom Commands > Add Format Command

Command ID: custom-add-page-break
Command Name: Add Page Break
Prefix: (なし)
Suffix: <div style="page-break-after: always;"></div>
Cursor Position Offset: 0
Line Offset: 0
Line Head Format: オフ
Icon: Choose Icon > Arrow Down (↓)

ここまで出来たら Save ボタンをクリック

Add to Toolbar ボタンをクリック

Obsidian Editing Toolbar > Toolbar Commands > Editing Toolbar commands

一番下に、追加したカスタムボタン(Add Page Break)が増えていると思いますので、
ドラッグアンドドロップでご自身にとって使いやすい位置に持っていきます。
(筆者は、Highlightボタンの後ろに置きました)

参考サイト