Gizanbeak

こんにちは！ Syuu（ @syuu_n18）です。

このブログは記事を Contentful で Markdown 形式にて管理しています。
なので Markdown から HTML に変換する必要があり、そのライブラリとして marked.js を利用しています。
その際に Markdown 側で改行をしても変換時に改行が反映されない問題があったため適用する方法を記事にしようと思います。

結論

いつもどおりまずは結論です。

marked.js には入力した Markedown を変換する時に改行を適用するオプションがあるので、それを有効にするだけでした。
具体的には以下のように設定すれば OK です。

marked.setOptions({ breaks: true })

解説

公式ドキュメント を見ていただくとわかるように marked.js には色々なオプションが存在しています。

例えば GitHub 独自の Markdown 記法を許可する gfm や h1, h2, h3 などの見出しタグに自動的に id を付与してくれる headerIds などがあります。
ちなみにこの headerIds は目次機能を追加する場合に有効です。

Next.js で作ったサイトに目次機能を追加する【Tocbot】

この記事では Next.js で作ったブログやサイトに Tocbot を使った目次機能を追加する方法を解説しています。

gizanbeak.com

また、renderer というものを使用することで img, a などの各要素が変換されるときの処理を上書きすることができるようになります。

これによってリンクを自動的にブログカードに変換したり、画像にクラスを付与させてスタイルを適用させることも可能です。
この方法はまた後日記事にしようと思います。

ここまで読んでいただきありがとうございました！
この記事がみなさまのお役に立てれば幸いです。