2021.09.19 に更新3 min read

【Markdown】marked.js で改行が反映されない場合の対処法

サムネイル画像

こんにちは! Syuu( @syuu_n18)です。

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

結論

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

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

marked.setOptions({ breaks: true })

解説

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

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

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

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

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


SHARE