Converting / Escaping Markdown into MDX

[matthias-ccri]

This might seem like a simple question, but there's some nuance to it. I want to take valid markdown and transform it into valid MDX.

The problem is that certain strings in markdown are not valid if interpreted as MDX. For example: {curly braces}. So a MDX parser will throw an error when it sees that type of string.

What I'm trying to do is use mdast-util-from-markdown to parse some markdown into mdast. Then I'm trying to write that mdast as MDX (not markdown). The idea is that this will escape any invalid MDX strings that were valid in markdown.

But so far I haven't cracked it.

Here's my latest attempt:

import {fromMarkdown} from 'mdast-util-from-markdown';
import {toMarkdown} from 'mdast-util-to-markdown';
import {mdxFromMarkdown, mdxToMarkdown} from 'mdast-util-mdx';
import {mdx} from 'micromark-extension-mdx';

const markdownContent = `
# Hello {not MDX}

## Properties

|  Property | Modifiers | Type | Description |
|  --- | --- | --- | --- |
|  [color?](./package-a.colorpicker.color.md) |  | string | _(Optional)_ |
|  [ee](./package-a.colorpicker.ee.md) |  | [IEE](./package-a.iee.md) |  |
|  [id](./package-a.colorpicker.id.md) | <code>readonly</code> | string |  |
|  [onColorChange?](./package-a.colorpicker.oncolorchange.md) |  | (color: string) =&gt; void | _(Optional)_ |
|  [onColorChangeWithId?](./package-a.colorpicker.oncolorchangewithid.md) |  | (p0: { id: string; color: string; customCheckboxVal: boolean; }) =&gt; void | _(Optional)_ |
`;

// Parse markdown into mdast
const tree = fromMarkdown(markdownContent, {
    extensions: [mdx()],
    mdastExtensions: [mdxFromMarkdown()],
})

console.log(JSON.stringify(tree, undefined, 2));

// Write mdast as MDX
const out = toMarkdown(tree, {
    extensions: [mdxToMarkdown()],
});

console.log(out);

However, this is broken in many ways:

• it parses the content as MDX, because the tree has mxd* node types.
• it doesn't write MDX; it writes markdown.

So the output is the same as the input. It's functionally the same if I omit all extension options and simply use fromMarkdown and toMarkdown.

Is there a way to do this? Maybe I haven't found the right libs yet. Is there a "mdast to MDX" function that you know of?

[matthias-ccri]

I may have cracked the code:

import {fromMarkdown} from 'mdast-util-from-markdown';
import {toMarkdown} from 'mdast-util-to-markdown';
import {mdxExpressionToMarkdown} from 'mdast-util-mdx-expression'

const markdownContent = `
# Hello {not MDX}

## Properties

|  Property | Modifiers | Type | Description |
|  --- | --- | --- | --- |
|  [color?](./package-a.colorpicker.color.md) |  | string | _(Optional)_ |
|  [ee](./package-a.colorpicker.ee.md) |  | [IEE](./package-a.iee.md) |  |
|  [id](./package-a.colorpicker.id.md) | <code>readonly</code> | string |  |
|  [onColorChange?](./package-a.colorpicker.oncolorchange.md) |  | (color: string) =&gt; void | _(Optional)_ |
|  [onColorChangeWithId?](./package-a.colorpicker.oncolorchangewithid.md) |  | (p0: { id: string; color: string; customCheckboxVal: boolean; }) =&gt; void | _(Optional)_ |
`;

// Parse as markdown, into mdast
const tree = fromMarkdown(markdownContent);

// Write mdast as MDX
const out = toMarkdown(tree, {
    extensions: [mdxExpressionToMarkdown()]
});

console.log(out);
// >
// # Hello \{not MDX}
// 
// ## Properties
// 
// |  Property | Modifiers | Type | Description |
// |  --- | --- | --- | --- |
// |  [color?](./package-a.colorpicker.color.md) |  | string | *(Optional)* |
// |  [ee](./package-a.colorpicker.ee.md) |  | [IEE](./package-a.iee.md) |  |
// |  [id](./package-a.colorpicker.id.md) | <code>readonly</code> | string |  |
// |  [onColorChange?](./package-a.colorpicker.oncolorchange.md) |  | (color: string) => void | *(Optional)* |
// |  [onColorChangeWithId?](./package-a.colorpicker.oncolorchangewithid.md) |  | (p0: \{ id: string; color: string; customCheckboxVal: boolean; }) => void | *(Optional)* |

Notably, it escapes { characters as \{.

[remcohaszing]

I’m glad you figured it out. :)

Note that in order to support GFM, you should also use mdast-util-gfm. Without it, GFM syntax, such as tables, is interpreted as regular text.

[wooorm]

Yep, that’s it! 👍

You could also do it at the unified/remark level: first parse with only remark-parse. Then stringify with remark-stringify and remark-mdx!