unified

Project: mdx-js/mdx

Package: remark-mdx@1.6.22

  1. Dependencies: 0·Dependents: 36
  2. Support import, export, and JSX in markdown
  1. remark 195
  2. markdown 135
  3. mdx 29
  4. jsx 17
  5. react 16
  6. mdxast 6

remark-mdx

Build Downloads Size Sponsors Backers Chat

remark plugin to support MDX (Markdown 💛 JSX).

This isn’t useful on its own, you’ll probably want to do combine it with other plugins or do tree traversal yourself to compile to things!

It’s used in MDXjs.

Install

npm:

# for latest version
npm install remark-mdx@next remark-parse

# for v1
npm install remark-mdx@1 remark-parse@8

Use

Say we have the following file, example.md:

# Hello, {data.to}

<Body>
{message}
</Body>

Best, {data.from}

And our script, example.js, looks as follows:

var vfile = require('to-vfile')
var report = require('vfile-reporter')
var unified = require('unified')
var parse = require('remark-parse')
var stringify = require('remark-stringify')
var mdx = require('remark-mdx')

unified()
  .use(parse, {position: false})
  .use(stringify)
  .use(mdx)
  .use(debug)
  .process(vfile.readSync('example.md'), function (err, file) {
    if (err) throw err
    console.log(String(file))
  })

function debug() {
  return console.dir
}

Now, running node example yields:

{
  type: 'root',
  children: [
    {
      type: 'heading',
      depth: 1,
      children: [
        {type: 'text', value: 'Hello, '},
        {type: 'mdxTextExpression', value: 'data.to'}
      ]
    },
    {
      type: 'mdxJsxFlowElement',
      name: 'Body',
      attributes: [],
      children: [{type: 'mdxFlowExpression', value: 'message'}]
    },
    {
      type: 'paragraph',
      children: [
        {type: 'text', value: 'Best, '},
        {type: 'mdxTextExpression', value: 'data.from'}
      ]
    }
  ]
}
# Hello, {data.to}

<Body>
  {
    message
  }
</Body>

Best, {data.from}

API

remark().use(mdx[, options])

Plugin to add support for MDX.

Security

Use of remark-mdx does not involve rehype (hast) or user content so there are no openings for cross-site scripting (XSS) attacks.

Contribute

See the Support and Contributing guidelines on the MDX website 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