How to <pre> without <p>

[TellowKrinkle]

If I do something like

<pre>
&nbsp;&nbsp;1.44×10<sup>40</sup>
\+ 2.25×10<sup>40</sup>
</pre>

MDX wraps the contents of the pre in a <p>, which ends up leaving an extra blank line at the end of the block.

The answer to #2194 recommends putting {}s around the block, but if I do that, all the newlines are deleted.

The goal is to get something that looks like this:

  1.44×1040
+ 2.25×1040

Here on GitHub, I can easily do that with this (and it even looks readable in the source, unlike the above)

<pre>
  1.44×10<sup>40</sup>
+ 2.25×10<sup>40</sup>
</pre>

[remcohaszing]

Markdown allows embedding HTML. MDX allows embedding JSX. These are two different things. On top of that, MDX allows passing MDX as JSX children. You’re passing a markdown paragraph, that’s where the <p> tag comes from.

As a workaround, you can avoid passing markdown constructs as JSX children:

<pre>
  {'  1.44×10'}<sup>40</sup>
  {'+ 2.25×10'}<sup>40</sup>
</pre>

Or you can completely disable MDX constructs leveraging a JSX expression:

{
  <pre>
    {'  1.44×10'}<sup>40</sup>
    + 2.25×10<sup>40</sup>
  </pre>
}

[TellowKrinkle]

The first does work to keep everything lined up in both source and output, but the second does not solve the issue of avoiding the markdown paragraph while preserving newlines (the newlines still get removed).