Extension for mdast-util-from-markdown and/or
mdast-util-to-markdown to support MDX (or MDX.js) expressions.
When parsing (from-markdown), must be combined with
micromark-extension-mdx-expression.
This utility handles parsing and serializing.
See micromark-extension-mdx-expression for how the syntax works.
Use mdast-util-mdx if you want all of MDX / MDX.js.
Use this otherwise.
This package is ESM only:
Node 12+ is needed to use it and it must be imported instead of required.
npm:
npm install mdast-util-mdx-expressionSay we have an MDX.js file, example.mdx:
{
a + 1
}
b {true}.And our module, example.js, looks as follows:
import fs from 'node:fs'
import * as acorn from 'acorn'
import {fromMarkdown} from 'mdast-util-from-markdown'
import {toMarkdown} from 'mdast-util-to-markdown'
import {mdxExpression} from 'micromark-extension-mdx-expression'
import {mdxExpressionFromMarkdown, mdxExpressionToMarkdown} from 'mdast-util-mdx-expression'
var doc = fs.readFileSync('example.mdx')
var tree = fromMarkdown(doc, {
extensions: [mdxExpression({acorn, addResult: true})],
mdastExtensions: [mdxExpressionFromMarkdown]
})
console.log(tree)
var out = toMarkdown(tree, {extensions: [mdxExpressionToMarkdown]})
console.log(out)Now, running node example yields (positional info removed for brevity):
{
type: 'root',
children: [
{
type: 'mdxFlowExpression',
value: '\na + 1\n',
data: {
estree: {
type: 'Program',
body: [
{
type: 'ExpressionStatement',
expression: {
type: 'BinaryExpression',
left: {type: 'Identifier', name: 'a'},
operator: '+',
right: {type: 'Literal', value: 1, raw: '1'}
}
}
],
sourceType: 'module'
}
}
},
{
type: 'paragraph',
children: [
{type: 'text', value: 'b '},
{
type: 'mdxTextExpression',
value: 'true',
data: {
estree: {
type: 'Program',
body: [
{
type: 'ExpressionStatement',
expression: {type: 'Literal', value: true, raw: 'true'}
}
],
sourceType: 'module'
}
}
},
{type: 'text', value: '.'}
]
}
]
}{
a + 1
}
b {true}.Support MDX (or MDX.js) expressions.
The exports are extensions, respectively for
mdast-util-from-markdown and
mdast-util-to-markdown.
When using the syntax extension with addResult, nodes will have
a data.estree field set to an ESTree.
The indent of the value of MDXFlowExpressions is stripped.
The following interfaces are added to mdast by this utility.
interface MDXFlowExpression <: Literal {
type: "mdxFlowExpression"
}MDXFlowExpression (Literal) represents a JavaScript
expression embedded in flow (block).
It can be used where flow content is expected.
Its content is represented by its value field.
For example, the following markdown:
{
1 + 1
}Yields:
{type: 'mdxFlowExpression', value: '\n1 + 1\n'}interface MDXTextExpression <: Literal {
type: "mdxTextExpression"
}MDXTextExpression (Literal) represents a JavaScript
expression embedded in text (span, inline).
It can be used where phrasing content is expected.
Its content is represented by its value field.
For example, the following markdown:
a {1 + 1} b.Yields:
{type: 'mdxTextExpression', value: '1 + 1'}type FlowContentMdxExpression = MDXFlowExpression | FlowContenttype PhrasingContentMdxExpression = MDXTextExpression | PhrasingContentremarkjs/remark— markdown processor powered by pluginsremarkjs/remark-mdx— remark plugin to support MDXremarkjs/remark-mdxjs— remark plugin to support 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 mdastsyntax-tree/mdast-util-mdx— mdast utility to support MDXmicromark/micromark— the smallest commonmark-compliant markdown parser that existsmicromark/micromark-extension-mdx-expression— micromark extension to parse MDX expressions
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.
