【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>で改行されているはずです!

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

「CSS設計をちょっと勉強したけど
結局よくわからなかった…」
そんな人に読んでほしい一冊です!

読んでみる
スポンサーリンク
JavaScript
スポンサーリンク
でざなり