最強Markdownエディタ「Typora」で改ページを挿入するときの小技―プレビュー時は改ページ箇所を可視化したい―

さて、Typoraで書いたドキュメントをPDFやHTMLにエクスポートするとき、印刷時の改ページ箇所を指定したいことってありますよね?

たとえばこんなとき↓

www.creativity-ape.com

公式のヘルプでは、こんなタグを挿入する方法が紹介されています。

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

しかし、これだと空のdivタグなので、カーソルを合わせたときしか改ページが入っていることが見えません。改行なのか改ページなのか見分けがつかないので、特に長文を書くときなんかけっこう不便です。

そこで今回は、プレビュー時には見えて、印刷時には消える改ページの方法をご紹介しようと思います。

テーマのカスタマイズ機能を活用する

やることは簡単です、TyporaはPDF出力時も印刷用スタイルが適用されるので、CSSのメディア指定で印刷時に非表示になるスタイルを作って、改ページのタグに適用します。

CSSに印刷時非表示設定を追加する

TyporaでカスタムCSSを追加する方法は、公式のヘルプを参照してみてください。

support.typora.io

共通設定にしてしまいたいので、base.user.cssに印刷時非表示のクラスno-printを追加します。

@media print{
    .no-print{
        visibility: hidden;
    }
}

非表示にするスタイルはvisibility: hidden;display: none;の2種類がありますが、display: none;を使うと要素自体が無視されて改ページされなくなってしまうので、ここではvisibility: hidden;を使います。

印刷時非表示の改ページHTML

本文の改ページしたいところに、no-printを追加したタグを書きましょう。

ついでに文字色をライトグレーにして、少し主張を弱めてみました。

<div style="page-break-after:always;color:lightgray" class="no-print">─────改ページ─────</div>

プレビューの見ためはこんな感じです。

PDFとHTMLの出力テスト

短いダミーテキストを用意して、強制的に改ページするようにしてみます。

# 改ページのテスト

## 1ページ

詩が生れて、 山路を登りながら、智に働けば角が立つ。

<div style="page-break-after:always;color:lightgray" class="no-print">─────改ページ─────</div>

## 2ページ

情に棹させば流される。住みにくさが高じると、安い所へ引き越したくなる。

<div style="page-break-after:always;color:lightgray" class="no-print">─────改ページ─────</div>

## 3ページ

どこへ越しても住みにくいと悟った時、画が出来る。意地を通せば窮屈だ。

まずはPDF出力

ちゃんと狙ったところで改ページされて、「改ページ」の文字も非表示になっています。

つぎにHTML

印刷時に適用されます、こちらもうまくいきました。

まとめ

Typoraはそのままでも素晴らしいMarkdownエディタですが、HTMLとCSSのカスタムによって、できることの幅がさらに広がりそうです。

とはいえ見た目のカスタマイズに凝り始めると、Markdownで書くメリットが無くなってしまうので、ここぞというところで、ほんのひと振り使うのがおススメです。

それでは、今日はここまで。