Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
mdast-util-mdx
Advanced tools
The mdast-util-mdx npm package is a utility tool designed to work with MDX (Markdown for the component era) and MDAST (Markdown Abstract Syntax Tree). It provides functions to parse and serialize MDX documents, allowing developers to manipulate MDX content programmatically within the unified ecosystem.
Parsing MDX
This feature allows the parsing of MDX text into an MDAST format, enabling further manipulation or inspection of the structure.
import { fromMarkdown } from 'mdast-util-mdx';
const mdxText = '# Hello, MDX!';
const mdast = fromMarkdown(mdxText, {extensions: [mdx()] });
Serializing MDX
This feature enables the serialization of an MDAST structure back into a string of MDX, useful for generating MDX files programmatically.
import { toMarkdown } from 'mdast-util-mdx';
const mdast = {type: 'root', children: [{type: 'heading', depth: 1, children: [{type: 'text', value: 'Hello, MDX!'}]}]};
const mdxText = toMarkdown(mdast, {extensions: [mdxToMarkdown()] });
This package is part of the unified ecosystem and is specifically tailored for parsing and compiling MDX files. It is similar to mdast-util-mdx but integrates more closely with the remark ecosystem, providing a more seamless experience when working with Markdown and MDX together.
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
.
Use this if you’re dealing with the AST manually and want to support all of MDX. You can also use the extensions separately:
mdast-util-mdx-expression
— support MDX (or MDX.js) expressionsmdast-util-mdx-jsx
— support MDX (or MDX.js) JSXmdast-util-mdxjs-esm
— support MDX.js ESMThis package is ESM only:
Node 12+ is needed to use it and it must be import
ed instead of require
d.
npm:
npm install mdast-util-mdx
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:
import fs from 'node:fs'
import {fromMarkdown} from 'mdast-util-from-markdown'
import {toMarkdown} from 'mdast-util-to-markdown'
import {mdxjs} from 'micromark-extension-mdxjs'
import {mdxFromMarkdown, mdxToMarkdown} from 'mdast-util-mdx'
const doc = fs.readFileSync('example.mdx')
const tree = fromMarkdown(doc, {
extensions: [mdxjs()],
mdastExtensions: [mdxFromMarkdown]
})
console.log(tree)
const out = toMarkdown(tree, {extensions: [mdxToMarkdown]})
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', raw: '"place"'}
}
],
sourceType: 'module'
}
}
},
{
type: 'paragraph',
children: [{type: 'text', value: 'Here’s an expression:'}]
},
{
type: 'mdxFlowExpression',
value: '\n1 + 1 /* } */\n',
data: {
estree: {
type: 'Program',
body: [
{
type: 'ExpressionStatement',
expression: {
type: 'BinaryExpression',
left: {type: 'Literal', value: 1, raw: '1'},
operator: '+',
right: {type: 'Literal', value: 1, raw: '1'}
}
}
],
sourceType: 'module'
}
}
},
{
type: 'paragraph',
children: [
{type: 'text', value: 'Which you can also put inline: '},
{
type: 'mdxTextExpression',
value: '1+1',
data: {
estree: {
type: 'Program',
body: [
{
type: 'ExpressionStatement',
expression: {
type: 'BinaryExpression',
left: {type: 'Literal', value: 1, raw: '1'},
operator: '+',
right: {type: 'Literal', value: 1, raw: '1'}
}
}
],
sourceType: 'module'
}
}
},
{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>
This package exports the following identifier: mdxFromMarkdown
,
mdxToMarkdown
.
There is no default export.
mdxFromMarkdown
mdxToMarkdown
Support MDX (or MDX.js).
The exports are respectively an extension for
mdast-util-from-markdown
and
mdast-util-to-markdown
.
There are no options.
remarkjs/remark
— markdown processor powered by pluginsremarkjs/remark-mdx
— remark plugin to support MDX (or MDX.js)micromark/micromark
— the smallest commonmark-compliant markdown parser that existsmicromark/micromark-extension-mdx
— micromark extension to parse MDXmicromark/micromark-extension-mdxjs
— micromark extension to parse MDX.jssyntax-tree/mdast-util-from-markdown
— mdast parser using micromark
to create mdast from markdownsyntax-tree/mdast-util-to-markdown
— mdast serializer to create markdown from mdastSee 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.
FAQs
mdast extension to parse and serialize MDX (or MDX.js)
The npm package mdast-util-mdx receives a total of 1,505,624 weekly downloads. As such, mdast-util-mdx popularity was classified as popular.
We found that mdast-util-mdx demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.