unifiedjs / ideas

Share ideas for new utilities and tools built with @unifiedjs

Home Page:https://unifiedjs.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Convert MD to MDX?

borekb opened this issue · comments

Is there a utility in the unified ecosystem to convert Markdown (CommonMark) to MDX?

We're looking for a way to feed our Markdown files that contain things like <img src=""> or <br> or <span style="color: red"> to a tool that only accepts MDX, and those things would currently be parse errors.

(I'm not sure if it's even possible to safely convert CommonMark to MDX, maybe there are edge cases that I don't realize. But someone here will probably know better than me...)

commented

Super interesting idea!

The start of the process would be remark-parse, remark-rehype (w/ allowDangerousHtml), then rehype-raw. You now have an AST that contains parsed element nodes with properties and whatnot. Instead of strings of HTML in Markdown, you have an HTML AST.

The missing part then would be based on hast-util-to-mdast, but include generic mapping of stuff that cannot be normal markdown, like those elements, perhaps even with a handler to mdxBlockElement and mdxSpanElement nodes that remark-mdx@next supports.

The last part then is using remark-stringify with remark-mdx@next, and you’ll have proper MDX!

That's beyond my ability 😄. But thanks for all the hints!

commented

Oh I forgot about this! https://github.com/mapbox/jsxtreme-markdown/tree/main/packages/hast-util-to-jsx#readme.
That’ll turn it into serialized JSX, but a similar approach can be used for transform to mdxBlockElement!

commented

It’s now possible to turn HTML into JavaScript with https://github.com/syntax-tree/hast-util-to-estree. Markdown to HTML can already be done, including raw embedded HTML.

But still, the MDX source format is different from the MD source format. This idea post is about converting between them, but from the the linked issue, it sounds like an XY problem, and that you’re in fact looking to allow different parsers in docusaurus.

that you’re in fact looking to allow different parsers in docusaurus.

Yes, facebook/docusaurus#3018 is about Docusaurus supporting multiple parsers. This idea is more low-level, enabling any tool that currently works with MDX only to also work with MD.

Thanks for starting the discussion @borekb!
We're in the process unifying ideas in with discussions unifiedjs/collective#44
If you'd like to continue this thread, or start a new one https://github.com/unifiedjs/unified/discussions will be the home for ideas going forward.