【Gatsby】Contentfulのマークダウンの改行(\n)を<br>として改行する方法

【Gatsby】Contentfulのマークダウンの改行(\n)を<br>として改行する方法 JavaScript

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

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

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

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

↓

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

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

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

↓

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

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

 

要するに

  • 1回改行→<br>で改行
  • 2回改行→新しい<p>で改行

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

 

スポンサーリンク

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

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

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

 

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

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回開業の部分もしっかりと<br>で改行されているはずです!