アルパカログ

📅  2021-04-05

Notion Blogで空行を省略せずに表示する


Notion Blogではデフォルトでは空行は省略され、詰めて表示されます。

しかし、ブログでは空行を表示してスペースを取りたいということがあります。

このエントリでは、空行を省略せずに表示する方法を説明します。

空行を省略しない

空行が省略されるのは、ブロック(Notionでは全てのページ内コンテンツはブロック単位で表されます)が空の場合に「何も出力しない」というロジックがあるからです。

そこで空の場合には空行を出力するように変更します。

下記のコミットを参考に修正しましょう。

空行のスタイルを設定する

空行を出力するようにしただけでは足りません。

空行に行の高さを設定しなければ、CSSにおいて高さの無い要素となってしまうからです。

下記のコミットを参考に、空の p 要素でも最低限の高さが設定されるように min-height をCSSを設定します。

これで空行がNotionで書いた通りにスペースをあけて表示されるようになりました。

以上です。このエントリでは、空行を省略せずに表示する方法を説明しました。