Package Exports

remark-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 (remark-mdx) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

remark-mdx

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.

remark-breaks — More breaks
remark-footnotes — Footnotes support
remark-frontmatter — Frontmatter (yaml, toml, and more) support
remark-github — References to issues, PRs, comments, users, etc
remark-math — Inline and block math

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.

remark-mdx

Package Exports

Readme

remark-mdx

Install

Use

API

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

Security

Related

Contribute

License

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