JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 2520041
  • Score
    100M100P100Q219110F
  • License MIT

mdast extension to parse and serialize MDX (or MDX.js)

Package Exports

  • mdast-util-mdx

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (mdast-util-mdx) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

mdast-util-mdx

Build Coverage Downloads Size Sponsors Backers Chat

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:

Install

npm:

npm install mdast-util-mdx

Use

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

API

mdx.fromMarkdown

mdx.toMarkdown

Note: the separate extensions are also available at mdast-util-mdx/from-markdown and mdast-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.

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