アルパカログ

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

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

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

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

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

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

case 'text':
  if (properties) {
    toRender.push(textBlock(properties.title, false, id))
  } else {
    toRender.push(textBlock([['']], false, id))
  }
  break

• Display empty lines - otoyo/notion-blog

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

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

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

.post :global(p) {
  min-height: 1.8em;
}

• Apply min-height to p in post - otoyo/notion-blog

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

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