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:
npm install remark-mdx
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: 'mdxSpanExpression', value: 'data.to'}
]
},
{
type: 'mdxBlockElement',
name: 'Body',
attributes: [],
children: [{type: 'mdxBlockExpression', value: 'message'}]
},
{
type: 'paragraph',
children: [
{type: 'text', value: 'Best, '},
{type: 'mdxSpanExpression', value: 'data.from'}
]
}
]
}
# Hello, {data.to}
<Body>
{
message
}
</Body>
Best, {data.from}
API
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.
Related
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