Hey!

I think your previewer is wrong. You use a markdown previewer. It doesn’t render MDX 2+ properly.

@mdx-js/mdxast is ancient and archived and deprecated, don’t use it.

Your example looks fine. Both the input and output MDX are perfect.

Your screenshots don’t include details?
And what are you modifying? I don’t see anything in your linked example doing that.

Thank you for your reply

I changed the previewer, but the result remains the same. I want the Markdown to render the same result before and after the modification. The modification involves changing the link node. The modification process itself seems to be working fine; however, the issue lies in the Markdown rendering after converting the modified AST back to Markdown.

Markdown renders before the modification

Markdown renders after the modification

One observation is that it adds an extra line.

I want the Markdown [...]

[...] back to Markdown

This project isn’t about markdown. This is MDX. There is a real difference. Don’t use MDX things if you want markdown.

[...] to render the same result before and after the modification.

ASTs don’t work like that. ASTs are not CSTs.

The modification process itself seems to be working fine;

Which one? Your code does not modify.

the issue lies in the Markdown rendering after converting the modified AST back to Markdown.

That is not an issue. That’s how MDX works. You’re asking about XY problems and not providing code. Please explain your actual question. Please provide more info.

How can I convert MDX to AST and AST to MDX?

Is this the right method?

Yes. Use .mdx as an extension though

Now please clone this repository and run 'npm install'. After that, execute the 'index.js' file. This will generate the 'processes.mdx' file. Open the file with MDX Preview

@niravbhuva99 put your example in a sandbox.
Like https://stackblitz.com/ or https://codesandbox.io/

Nobody wants to run an unvetted executable on their machine, it's a security nightmare.

here is the example

@niravbhuva99 you are generating a .md extension instead of .mdx.
Other than the extension, the generated file looks valid and it renders the same in https://mdxjs.com/playground/ as the original file did.

You're asking about a previewer. I don't know this previewer. This tools seems broken. If it's broken, ask the folks working on that tool. For us here: why do you care about some random preview tool? What do you actually want to do? MDX, markdown? What is your root problem?

@ChristianMurphy Do you know which previewer the MDXjs playground uses?

@niravbhuva99 the MDX website uses MDX to render the preview https://github.com/mdx-js/mdx/blob/8f754f707207915bd34c3af8f9064e367c125a58/docs/_asset/editor.jsx

That doesn't answer the question what are you using and trying to do?

I'm currently working with netlify-cms. My aim is to be able to preview MDX components embedded in my pages directly within Netlify CMS. I am also modifying the link nodes and then converting them back to MDX. It seems that after this modification, some of the MDX content does not render as expected.

I am using a package called netlify-cms-widget-mdx.

It is broken because netlify-cms-widget-mdx uses mdx-scoped-runtime (https://github.com/karolis-sh/gatsby-mdx/blob/80de7cbdb1b514ade5266da086ab5490d3441ee4/packages/netlify-cms-widget-mdx/package.json#L26).
mdx-scoped-runtime uses MDX version 0 (alpha and unmaintained for years, https://github.com/karolis-sh/gatsby-mdx/blob/80de7cbdb1b514ade5266da086ab5490d3441ee4/packages/mdx-scoped-runtime/package.json#L26), we're on version 3 currently.

Ask netlify-cms-widget-mdx to update to use the latest MDX.