Markdown is automatically formatted, causing React syntax interpretation errors

[Alan3344]

I'm currently helping translate md documentation using docusaurus.io

This is part of the snippet. line:79-86
Able to be interpreted correctly:

import Card from '@site/src/components/card';
import { translate } from '@docusaurus/Translate';

export const GalleryCard = ({title, liveUrl, sourcesUrl, description, imageUrl}) => (
<Card>
<a className="gallery-live-link" href={liveUrl}>
<img src={"/img/gallery/" + imageUrl} className="screenshot-100"/>
<h2>{title}</h2>
<div className="gallery-description">{description}</div>
</a>
<div className="gallery-footer">
<a className="gallery-github-link" href={sourcesUrl} title="View source code"></a>
</div>
</Card>
);

able to be interpreted correctly:

import Card from '@site/src/components/card';
import { translate } from '@docusaurus/Translate';

export const GalleryCard = ({title, liveUrl, sourcesUrl, description, imageUrl}) => (
<Card>
<a className="gallery-live-link" href={liveUrl}>
<img src={"/img/gallery/" + imageUrl} className="screenshot-100"/>

<h2>{title}</h2>
<div className="gallery-description">{description}</div>
</a>
<div className="gallery-footer">
<a className="gallery-github-link" href={sourcesUrl} title="View source code"></a>
</div>
</Card>
);

This problem causes precompilation to fail.

MacOS Ventura 13.4.1
Both vscode and plug-ins are the latest versions.

[tats-u]

You should use the extension .mdx instead of .md if you want to export React components.
For Docusaurus 2, you can format MDX (v1) with Prettier.

I saw your Markdown.
Why don't you surround the code with a code block (``` ~ ```)?
MDX treats your code as an actual export declaration.

https://v1.mdxjs.com/advanced/api

[Alan3344]

You should use the extension .mdx instead of .md if you want to export React components. For Docusaurus 2, you can format MDX (v1) with Prettier.

I saw your Markdown. Why don't you surround the code with a code block (``` ~ ```)? MDX treats your code as an actual export declaration.

https://v1.mdxjs.com/advanced/api

Thank you for your answer. It is because I translated this document that I encountered this problem. This React code block is the content of the original document and will eventually be rendered as a component.
If I were to write the document myself, it would be written according to this specification.

[tats-u]

Is the original document also hosted by Docusaurus?
If so it looks weird for me.
I wonder if the Markdown parser in Docusaurus could mistakenly treat export ... as the actual MDX export even though this document is .md not .mdx. (I don't know much about the details of the Markdown parsing process in Docusaurus)

It looks the original author's fail for me.
I wonder why he won't use the .mdx extension.

[Alan3344]

Is the original document also hosted by Docusaurus? If so it looks weird for me. I wonder if the Markdown parser in Docusaurus could mistakenly treat export ... as the actual MDX export even though this document is .md not .mdx. (I don't know much about the details of the Markdown parsing process in Docusaurus)

You can run this project. Part of the React code is written directly in the .md file and then finally rendered. Because changing the file will trigger automatic saving and formatting.
I debugged this formatting problem for a long time, and finally I found the reason. There cannot be blank lines in the export statement or component, otherwise the build will fail.
This is also the first time I encountered compilation failure due to formatting.
Reference project https://github.com/flet-dev/website/tree/main

[tats-u]

I will. I'll clone https://github.com/flet-dev/website.git

[tats-u]

After renaming the document to .mdx, Prettier seems to work well.

I ran the project, and Docusaurus seems to be able to process MDX-dedicated syntax in the plain Markdown documents with the extension .md.

[Alan3344]

After renaming the document to .mdx, Prettier seems to work well.

That’s right👍, changing the suffix will solve the problem, and formatting will not automatically add line breaks
This is simply awesome 🥹

[tats-u]

changing the suffix will solve the problem, and formatting will not automatically add line breaks

Right. This is the ideal solution.
Prettier doesn't support MDX-extended syntax in plain Markdowns .md.

[Alan3344]

changing the suffix will solve the problem, and formatting will not automatically add line breaks

Right. This is the ideal solution. Prettier doesn't support MDX-extended syntax in plain Markdowns .md.

Thank you very much, I tried your solution and the problem is now solved

[tats-u]

I've listed problematic Markdown files and wrote the issue in the project. You can utilize my info there.

[Alan3344]

I've listed problematic Markdown files and wrote the issue in the project. You can utilize my info there.

Okay👌, I saw it