react-markdownでGithubコメントのような改行を実現する

react

javascript

typescript

投稿日: 2024/06/25

Githubのissueコメントやzennの記事投稿のエディターは、改行の扱いが通常のMarkdown記法とは異なっています。

以下のようなMarkdownがあったときに

input.md
a
a

a

通常の仕様では

output
a a
a

のように表示されます。
しかし、Githubのissueコメントなどでは

output
a
a

a

のように表示されます。

これをreact-markdownとremark-breaksで実現する記事になります。

もし、改行だけでなく、マークダウンを改造するのであれば以下の記事が参考になるかもしれません。
https://zenn.dev/yosipy/articles/a7b6ab950bed49

コード全体

import { FC } from "react"

import ReactMarkdown from "react-markdown"
import remarkBreaks from "remark-breaks"

type Props = {
  body: string
}

export const Markdown: FC<Props> = (props) => {
  return (
    <ReactMarkdown
      remarkPlugins={[remarkBreaks]}
      components={{
        p: ({ children }) => <p style={{ marginBottom: "1em" }}>{children}</p>,
      }}
    >
      {props.body}
    </ReactMarkdown>
  )
}

解説

      remarkPlugins={[remarkBreaks]}

プラグインにremark-breaksを指定しています。

      components={{
        p: ({ children }) => <p style={{ marginBottom: "1em" }}>{children}</p>,
      }}

出力されるpタグにスタイルをつけています。

この3行を書かなければ

input.md
a
a

a

という入力に対して

output.html
<p>a<br>a</p>
<p>a</p>

というHTMLを出力します。

ブラウザで表示してみると

output
a
a
a

というようになります。

しかし、ブラウザでは以下のように表示されてほしいはずです。

output
a
a

a

そこで、pタグ同士の間に1文字分の余白を付与しているわけです。

output.html
<p style="margin-bottom: 1em;">a<br>a</p>
<p style="margin-bottom: 1em;">a</p>

pタグにマージンがつけばいいので、CSSを直接変更する方法でも問題ないです。

yosi

Noh を作ってるエンジニア。

コード全体
解説