mdx: Pre-formatted text loses line breaks

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!

About this issue

Original URL
State: closed
Created 4 years ago
Comments: 17 (12 by maintainers)

Most upvoted comments

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;

derekm on Nov 15, 2021

Yes it matters. MDX is JSX first.

wooorm on Jun 5, 2020

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…

pedrolamas on Jun 5, 2020

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.

viktor-yakubiv on Jun 5, 2020

@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.

pedrolamas on Jun 5, 2020

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!

pedrolamas on Jun 5, 2020

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 on Jun 5, 2020

I’ve opened a new issue on this matter with Babel as I now believe that is the source of the problem: https://github.com/babel/babel/issues/11678

pedrolamas on Jun 5, 2020