[v2] content parsing issue inside the markdown table

[Simek]

🐛 Bug Report

It looks like on the React Native website we currently experiencing MDX parsing issue inside the markdown table:

• https://reactnative.dev/docs/next/button#color

One of color hashes is not rendered in code block besides that the both entries are using the same code:

• https://github.com/facebook/react-native-website/blame/master/docs/button.md#L147

Issue preview

Have you read the Contributing Guidelines on issues?

Yes.

To Reproduce

(Write your steps here:)

1. Visit https://reactnative.dev/docs/next/button#color
2. Check out the #2196F3 formatting in the table

Or

1. Follow https://github.com/facebook/react-native-website#%EF%B8%8F-getting-started
2. Go to http://localhost:3000/docs/next/button#color
3. Check out the #2196F3 formatting in the table

Expected behavior

#2196F3 string should be formatted as code block.

Actual Behavior

#2196F3 is not correctly formatted.

Your Environment

• Docusaurus version used: 2.0.0-alpha.66
• Environment name and version (e.g. Chrome 78.0.3904.108, Node.js 10.17.0): Not browser dependent, Node LTS and Latest

Reproducible Demo

• https://github.com/facebook/react-native-website

[slorber]

It looks like MDX is not able to parse it correctly, even using the playground https://mdxjs.com/playground/, so it seems it's not our fault

### `color`

Color of the text (iOS), or background color of the button (Android).

| Type            | Default                                                                                                                                                                                                                                   |
| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [color](colors) | <ins style={{background: '#2196F3'}} className="color-box" /> `'#2196F3'` <div className="label android">Android</div><hr/><ins style={{background: '#007AFF'}} className="color-box" /> `'#007AFF'` <div className="label ios">iOS</div> |

becomes

<tbody parentName="table">
  <tr parentName="tbody">
    <td
      parentName="tr"
      {...{
        align: null
      }}
    >
      <a
        parentName="td"
        {...{
          href: "colors"
        }}
      >{`color`}</a>
    </td>
    <td
      parentName="tr"
      {...{
        align: null
      }}
    >
      <ins
        style={{
          background: "#2196F3"
        }}
        className="color-box"
      />{" "}
      `'#2196F3'` <div className="label android">Android</div>
      <hr />
      <ins
        style={{
          background: "#007AFF"
        }}
        className="color-box"
      />
      {` `}
      <inlineCode parentName="td">{`'#007AFF'`}</inlineCode>
      {` `}
      <div className="label ios">{`iOS`}</div>
    </td>
  </tr>
</tbody>

For those usecases it may be better to avoid interleaved of MD inside of JSX in table contents. Maybe you can just replace those cases by <inlineCode>#hex</inlineCode> directly?

[Josh-Cena]

Closing in favor of #4029. MDX 2.0 allows interleaving JSX with Markdown.