mdast-util-mdx-expression

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.

When to use this

Use mdast-util-mdx if you want all of MDX / MDX.js. Use this otherwise.

Install

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-expression

Use

Say 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}.

API

mdxExpressionFromMarkdown

mdxExpressionToMarkdown

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.

Syntax tree

The following interfaces are added to mdast by this utility.

Nodes

MDXFlowExpression

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'}

MDXTextExpression

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'}

Content model

FlowContent (MDX expression)

type FlowContentMdxExpression = MDXFlowExpression | FlowContent

PhrasingContent (MDX expression)

type PhrasingContentMdxExpression = MDXTextExpression | PhrasingContent

Related

• remarkjs/remark — markdown processor powered by plugins
• remarkjs/remark-mdx — remark plugin to support MDX
• remarkjs/remark-mdxjs — remark plugin to support MDX.js
• syntax-tree/mdast-util-from-markdown — mdast parser using micromark to create mdast from markdown
• syntax-tree/mdast-util-to-markdown — mdast serializer to create markdown from mdast
• syntax-tree/mdast-util-mdx — mdast utility to support MDX
• micromark/micromark — the smallest commonmark-compliant markdown parser that exists
• micromark/micromark-extension-mdx-expression — micromark extension to parse MDX expressions

Contribute

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.

License

MIT © Titus Wormer