MarkdownがHTMLに期待通りに変換されない【react-markdown】

はじめに

react-markdownというMarkdownをHTMLに変換するライブラリを使おうとしたのですが、うまく変換されませんでした。

問題

import ReactMarkdown from "react-markdown";

const content = `
    # はじめに
    こんにちは！**田中**です
`;

function App() {
  return (
    <>
      <ReactMarkdown>{content}</ReactMarkdown>
    </>
  );
}

解決方法

import ReactMarkdown from "react-markdown";

const content = `
  # はじめに
  こんにちは！**田中**です
`;

function App() {
  return (
    <>
      <ReactMarkdown>{content}</ReactMarkdown>
    </>
  );
}

contentの部分のインデントを減らしました。
半角スペースが4つ以上あるとコードブロックとして認識されるようです。
なので半角スペース二つに変更しました。（三つでもok）

参考文献

おわりに

どうやらこれはreact-markdownではなくマークダウン自体の仕様らしいです。全く知らなかった。