ReactMarkdownでLinkや見出しにスタイルや要素を適用する方法。（独自コンポーネント）

はじめに

環境

• react-markdown: 9.0.1

ReactMarkdownでLinkや見出しにスタイルを適用する

以下のように、componentsに構造を定義することで、
独自な要素のスタイルなどを適用できます。

import ReactMarkdown from "react-markdown";
const MarkDown = () => {
  const components = {
    h1: ({ ...props }) => <h1 className="text-blue-700">{props.children}</h1>,
  };
  return (
    <ReactMarkdown components={components}>
      {"# hello"}
    </ReactMarkdown>
  );
}

上記は、h1タグを青色（Tailwind CSS使用）にしています。

react-markdownは以下の要素をサポートしています：
br code em h1 h2 h3 h4 h5 h6 hr img li ol p pre strong ul
remark-gfmを使えば、
del input table tbody td th thead tr などもサポートされます。

文献

https://github.com/remarkjs/react-markdown?tab=readme-ov-file#appendix-b-components