MDX -> Markdown

[skorfmann]

Anyone aware of an example for MDX -> Markdown?

Use Case

I'm thinking about using mdx to generate markdown documents which then would be added to Github or similar places. Things I have in mind:

• Embed screenshots on demand
• Render mermaidjs and embed the result in the markdown
• ...

[wooorm]

How would you use MDX for that?

[skorfmann]

Without having checked the details, I’d have thought I could write custom components to do that . Something like <EmbedScreenshot url="..."/>

[wooorm]

In essence, what the MDXjs project does is take the MDX format (MD - HTML + JS(X)) and turn it into JavaScript. You can then execute that JavaScript, similar to how you execute other JavaScript files.

Now, say you run that JavaScript and get HTML out, you could turn that back into markdown again through unified/rehype/remark:

var markdown = unified()
  .use(rehypeParse)
  .use(rehypeRemark)
  .use(remarkStringify)
  .processSync(yourHtml)
  .toString()

But it may be better and faster to do this all a step earlier: do your magic by transforming syntax trees. Because that’s what MDX also does: it takes markdown with JS(X) inside it, and then generates JS. So why not look at the tree right before that JS generation?

var markdown = unified()
  .use(remarkParse)
  .use(remarkMdx) // Use `remark-mdx@next`, it parses JSX properly.
  .use(yourPluginToTurnMdxIntoMarkdown)
  .use(remarkStringify)
  .processSync(yourMdx)
  .toString()

Where yourPluginToTurnMdxIntoMarkdown is a plugin you write that traverses the tree and replaces JSX with mdast nodes.

[ChrisChinchilla]

@skorfmann I ended up asking this same question with nearly identical need. Did you ever create anything?