【Gatsby】Contentfulのマークダウンの改行（\n）を として改行する方法

Gatsbyで作ったブログで記事の管理はContentfulでやっているのですが、マークダウンエディターを使うときに気になっていたことがあります。

エディター上では改行を2回入れると別々のとして出力されるので改行できているのですが、改行が1回だと\nのまま出力されているせいでブラウザ上で改行できずに半角スペースになってしまいます。

// マークダウンエディター上（改行2回）
これはテキストです。

これは2行目のテキストです。

↓

// ブラウザ表示（改行できてる）
これはテキストです。
これは2行目のテキストです。

--------------------------------

// マークダウンエディター上（改行1回）
これはテキストです。
これは2行目のテキストです。

↓

// ブラウザ表示（改行できてない）
これはテキストです。 これは2行目のテキストです。

これをなんとかしたいという感じ。

要するに

1回改行→ で改行
2回改行→新しいで改行

にしたいというわけです。

Contentful上のエディターの改行を で反映させる方法

これを実装する方法は実は超絶簡単でした。

「gatsby-remark-line-breaks」というプラグインを入れるだけで1回改行でもブラウザ上で で改行できるようになります。

というわけでまずはインストール。

npm i gatsby-remark-line-breaks

次にgatsby-config.jsで読み込みます。「gatsby-transformer-remark」というプラグインのオプションの中にさらにプラグインとして指定します。

gatsby-transformer-remarkは多分最初から入っていると思うので、入っていればgatsby-remark-line-breaksの部分だけ追加すればok。

module.exports = {
  siteMetadata: {
    // 省略
  },
  plugins: [
  
    // 省略

    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          `gatsby-remark-line-breaks`
        ]
      }
    },
  ]
}

そうしたら再度gatsby developして確認すると1回開業の部分もしっかりと で改行されているはずです！

ZennでCSS設計の
本を書きました！