MarkdownエディタTyporaの印刷時改ページをちょっと扱いやすくする小技

2521 ワード
HTML Markdown typora PDF HTML テキストリンク

最強のMarkdownエディタ、Typoraの小技についてです。

Typoraのエクスポート機能を使って、PDFなどを出力するとき、改ページ位置を自分で設定したいことがありますよね？

公式ヘルプの「Page Breaks」では、インラインのスタイルシートを使って、改ページ挿入する方法が紹介されています。

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

しかしこれだと空のブロックなので、プレビューモードでは改ページ位置が見えなくなってしまいます（ただの改行に見えます）。

そこで、プレビュー時には見えるけれど、印刷時には見えなくなる改ページの方法をご紹介します。

手順

1. カスタムCSSの追加

まず、スタイルシートで、印刷時に非表示になるクラスを追加します。

「設定」→「表示」→「テーマフォルダを開く」のフォルダに、base.user.cssファイルを作りましょう。

カスタムCSSの追加方法について詳しくは、Typoraのヘルプ「About Themes」を参照してください。

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

2. Markdown本文に改ページを挿入

本文の改ページしたいところに、この一行をコピペします。「─────改ページ─────」の文字列は、見やすければなんでもOKです。

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

プレビューモードではこんな表示になります。

参考ページ

実際適用してみた様子などは、ブログに書いてあるので、興味があれば覗いてみてください👇

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