〽️

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

2023/07/12に公開

React

Markdown

remark

tech

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

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

input.md

a
a

a

通常の仕様では

output

a a
a

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

output

a
a

a

のように表示されます。

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

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

コード全体

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