Markdownの改行をそのまま表示させる

TOC

このブログのコンテンツはesa.ioで管理しており、MrakdownからHTMLへの変換はgatsby-transformer-remark使っています。

ただ、その場合esa.ioで書かれた記事は通常のMarkdownファイルと同じ扱いとなり、文中改行を使うには

• 文末に半角空白スペースを2つつける
• 1行空白の行を入れる
• <br>タグを使う

という対応をしないといけません。

個人的にはそのような気を使ってブログを書きたくないという思いがあるので、通常の改行で意図した表示がされるよう対応を行いました。

white-space: pre-wrap;

GraphQLで取得したテキストを見ると、改行はLF文字（\n）となっていました。 であれば、ソース中の改行・ホワイトスペースをそのまま表示するCSSプロパティ、wthite-space: pre-wrap;を本文のコンテンツに適用させれば改行はそのまま表示されるということになります。

.markdown-body p {
  wthite-space: pre-wrap;
}

[適用前]

[適用後]

使い所を見極めないと思わぬ表示崩れなど発生する可能性もありますが、テキストエリアに入力された値を別の画面でそのまま表示させたい時など、使える場面はあるのではないでしょうか。