Extension for mdast-util-from-markdown and/or
mdast-util-to-markdown to support MDX (or MDX.js) in
mdast.
When parsing (from-markdown), must be combined with either
micromark-extension-mdx or micromark-extension-mdxjs.
You might instead want to use this package through remark-mdx or
remark-mdxjs with remark.
Alternatively, the extensions can be used separately:
mdast-util-mdx-expression— support MDX (or MDX.js) expressionsmdast-util-mdx-jsx— support MDX (or MDX.js) JSXmdast-util-mdxjs-esm— support MDX.js ESM
npm:
npm install mdast-util-mdxSay we have the following file, example.mdx:
import Box from "place"
Here’s an expression:
{
1 + 1 /* } */
}
Which you can also put inline: {1+1}.
<Box>
<SmallerBox>
- Lists, which can be indented.
</SmallerBox>
</Box>And our script, example.js, looks as follows:
var fs = require('fs')
var fromMarkdown = require('mdast-util-from-markdown')
var toMarkdown = require('mdast-util-to-markdown')
var syntax = require('micromark-extension-mdxjs')
var mdx = require('mdast-util-mdx')
var doc = fs.readFileSync('example.mdx')
var tree = fromMarkdown(doc, {
extensions: [syntax()],
mdastExtensions: [mdx.fromMarkdown]
})
console.log(tree)
var out = toMarkdown(tree, {extensions: [mdx.toMarkdown]})
console.log(out)Now, running node example yields (positional info removed for brevity):
{
type: 'root',
children: [
{
type: 'mdxjsEsm',
value: 'import Box from "place"',
data: {
estree: {
type: 'Program',
body: [
{
type: 'ImportDeclaration',
specifiers: [
{
type: 'ImportDefaultSpecifier',
local: {type: 'Identifier', name: 'Box'}
}
],
source: {type: 'Literal', value: 'place'}
}
],
sourceType: 'module'
}
}
},
{
type: 'paragraph',
children: [{type: 'text', value: 'Here’s an expression:'}]
},
{
type: 'mdxFlowExpression',
value: '\n1 + 1 /* } */\n',
data: {
estree: {
type: 'BinaryExpression',
left: {type: 'Literal', value: 1},
operator: '+',
right: {type: 'Literal', value: 1}
}
}
},
{
type: 'paragraph',
children: [
{type: 'text', value: 'Which you can also put inline: '},
{
type: 'mdxTextExpression',
value: '1+1',
data: {
estree: {
type: 'BinaryExpression',
left: {type: 'Literal', value: 1},
operator: '+',
right: {type: 'Literal', value: 1}
}
}
},
{type: 'text', value: '.'}
]
},
{
type: 'mdxJsxFlowElement',
name: 'Box',
attributes: [],
children: [
{
type: 'mdxJsxFlowElement',
name: 'SmallerBox',
attributes: [],
children: [
{
type: 'list',
ordered: false,
start: null,
spread: false,
children: [
{
type: 'listItem',
spread: false,
checked: null,
children: [
{
type: 'paragraph',
children: [
{type: 'text', value: 'Lists, which can be indented.'}
]
}
]
}
]
}
]
}
]
}
]
}import Box from "place"
Here’s an expression:
{
1 + 1 /* } */
}
Which you can also put inline: {1+1}.
<Box>
<SmallerBox>
* Lists, which can be indented.
</SmallerBox>
</Box>Note: the separate extensions are also available at
mdast-util-mdx/from-markdownandmdast-util-mdx/to-markdown.
Support MDX (or MDX.js).
The exports of fromMarkdown is an extension for
mdast-util-from-markdown.
The export of toMarkdown is an extension for
mdast-util-to-markdown.
There are no options.
remarkjs/remark— markdown processor powered by pluginsremarkjs/remark-mdx— remark plugin to support MDXremarkjs/remark-mdxjs— remark plugin to support MDX.jsmicromark/micromark— the smallest commonmark-compliant markdown parser that existsmicromark/micromark-extension-mdx— micromark extension to parse MDXmicromark/micromark-extension-mdxjs— micromark extension to parse MDX.jssyntax-tree/mdast-util-from-markdown— mdast parser usingmicromarkto create mdast from markdownsyntax-tree/mdast-util-to-markdown— mdast serializer to create markdown from mdast
See contributing.md in syntax-tree/.github for ways to get
started.
See support.md for ways to get help.
This project has a code of conduct. By interacting with this repository, organization, or community you agree to abide by its terms.
