〽️

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

2023/07/12に公開

この記事は以下のページに移動しました。

https://noh.ink/articles/lSNQukTPKtpxlvto8fMa




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

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

input.md
a
a

a

通常の仕様では

output
a a
a

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

output
a
a

a

のように表示されます。

これをreact-markdownremark-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>

Discussion