さて、Typoraで書いたドキュメントをPDFやHTMLにエクスポートするとき、印刷時の改ページ箇所を指定したいことってありますよね?
たとえばこんなとき↓
公式のヘルプでは、こんなタグを挿入する方法が紹介されています。
<div style="page-break-after:always"></div>
しかし、これだと空のdivタグなので、カーソルを合わせたときしか改ページが入っていることが見えません。改行なのか改ページなのか見分けがつかないので、特に長文を書くときなんかけっこう不便です。
そこで今回は、プレビュー時には見えて、印刷時には消える改ページの方法をご紹介しようと思います。
テーマのカスタマイズ機能を活用する
やることは簡単です、TyporaはPDF出力時も印刷用スタイルが適用されるので、CSSのメディア指定で印刷時に非表示になるスタイルを作って、改ページのタグに適用します。
CSSに印刷時非表示設定を追加する
TyporaでカスタムCSSを追加する方法は、公式のヘルプを参照してみてください。
共通設定にしてしまいたいので、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で書くメリットが無くなってしまうので、ここぞというところで、ほんのひと振り使うのがおススメです。
それでは、今日はここまで。