Pre-formatted text loses line breaks

[pedrolamas]

Pre-formatted text loses line breaks

Multi-line text inside a <pre> block seems to loose line breaks.

Your environment

• OS: Microsoft Windows [Version 10.0.19041.264]
• Packages: https://github.com/PedroLamas/pedrolamas.com/blob/master/package.json#L42
• Env: yarn 1.7

Steps to reproduce

On any markdown file, just add the following:

<pre>
line 1
line 2
</pre>

Expected behaviour

Expected rendered HTML to be:

<pre>
line 1
line 2
</pre>

Actual behaviour

Rendered HTML is:

<pre>line 1 line 2</pre>

So line breaks are missing!

[viktor-yakubiv]

I had a really brief look at this. In my case for some reason the example similar to yours:

` ` `
line 1
line 2
` ` `

<pre>
line 1
line 2
</pre>

renders pure markdown code syntax in <pre class="prism-code"> and the following <pre> becomes a <div>.

It may be possible that the issue is about general processing the HTML code.

[pedrolamas]

Indeed, that might actually be the case here... in my perspective HTML code should be maintained without any changes.

[viktor-yakubiv]

I cannot agree with the omitting HTML processing. There might be the case when you want to wrap the anchor element into the custom Link component that passes custom classes/attributes/event listeners to handle application routing.

I explored it a little bit more in the React Components tree, and the tree looks good apart from replaced newlines. My current assumption is that this happens at the MDAST transformation step (#2 from the doc).

[pedrolamas]

I created a small sandbox that shows the problem: https://codesandbox.io/s/pre-mdx-issue-69csw

[pedrolamas]

So this might not actually be an MDX issue... This screenshot is directly from babel website:

That is completely wrong for what was expected, but now I'm starting to question if I'm the one wrong here!

[pedrolamas]

I've opened a new issue on this matter with Babel as I now believe that is the source of the problem: babel/babel#11678

[wooorm]

MDX is Markdown - HTML + JSX. This is JSX behavior. I don’t think it’s a bug with either MDX or Babel.

MDX is used to render to other targets too, such as CLIs, where it doesn’t make sense for h2 or pre to have special semantics.

[wooorm]

What is the reason you don’t use Markdown. Maybe this is an XY problem

```
line 1
line 2
```

[pedrolamas]

My interpretation was on the basis that HTML inside an markdown (.md file) file is maintained, but the same is not accurate for MDX (.mdx file) as the HTML is treated as JSX (so lines are collapsed and replaced with single space as per specification)

As for the reason to not use triple tick syntax was basically that all I have is a preformatted block, not actually code!

[wooorm]

I’d say go with an expression then. Not sure how it goes with MDX1, but MDX2 makes it more clear, e.g.:

<pre>
  {`line 1
line 2`}
</pre>

[pedrolamas]

@wooorm makes a good point, maybe I'm just trying to solve a problem that actually does not exist...

I will just move to triple backtick with "text" indication to skip highlighting!

I agree this is expected behavior for MDX (as inline HTML is supposed to be treated as JSX) so I will now close this issue.

[viktor-yakubiv]

Sorry, I accidentally raised this in the related issue expecting to do it here.

MDX is Markdown - HTML + JSX. This is JSX behavior. I don’t think it’s a bug with either MDX or Babel.

I agree with the conclusion, it definitely is not a bug. However, it matters what to choose for MDX: being JSX first or being HTML first.

[wooorm]

Yes it matters. MDX is JSX first.

[pedrolamas]

Yes it matters. MDX is JSX first.

Precisely, and that's what I should have remembered before I opened this bug in the first place...

[derekm]

@wooorm @pedrolamas @viktor-yakubiv -- How can I create a multi-line code block that contains MDX variable substitutions? I'm surprised this is so difficult in JSX.

[wooorm]

I don’t know what you’re looking for. I think it’s better if you open a new issue, read https://mdxjs.com/support/, and provide more info

[derekm]

Thanks, @wooorm!

I figured it out:

import versions from '@site/versions';
<pre><code>
{`wget https://github.com/pravega/pravega/releases/download/v${versions.pravega}/pravega-${versions.pravega}.tgz
# or
#curl -OL https://github.com/pravega/pravega/releases/download/v${versions.pravega}/pravega-${versions.pravega}.tgz
tar zxvf pravega-${versions.pravega}.tgz
cd pravega-${versions.pravega}`}
</code></pre>

Note the quoting expression:

{`...
...
...`}

and the $ on the bracketed variable substitutions (${...} instead of {...}).

Assuming a versions.js of:

const versions = Object.freeze({
  "pravega": "0.10.1",
});

export default versions;