Research
Security News
Malicious PyPI Package ‘pycord-self’ Targets Discord Developers with Token Theft and Backdoor Exploit
Socket researchers uncover the risks of a malicious Python package targeting Discord developers.
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.
mdast extensions to parse and serialize MDX: ESM, JSX, and expressions.
This package contains two extensions that add support for MDX syntax in
markdown to mdast: ESM (import x from 'y'
), JSX (<a />
), and
expressions ({Math.PI}
).
These extensions plug into
mdast-util-from-markdown
(to support parsing
MDX in markdown into a syntax tree) and
mdast-util-to-markdown
(to support serializing
MDX in syntax trees to markdown).
You can use these extensions when you are working with
mdast-util-from-markdown
and mdast-util-to-markdown
already.
When working with mdast-util-from-markdown
, you must combine this package
with micromark-extension-mdx
or micromark-extension-mdxjs
.
Instead of this package, you can also use the extensions separately:
mdast-util-mdx-expression
— support MDX expressionsmdast-util-mdx-jsx
— support MDX JSXmdast-util-mdxjs-esm
— support MDX ESMAll these packages are used in remark-mdx
, which
focusses on making it easier to transform content by abstracting these
internals away.
This package is ESM only. In Node.js (version 16+), install with npm:
npm install mdast-util-mdx
In Deno with esm.sh
:
import {mdxFromMarkdown, mdxToMarkdown} from 'https://esm.sh/mdast-util-mdx@3'
In browsers with esm.sh
:
<script type="module">
import {mdxFromMarkdown, mdxToMarkdown} from 'https://esm.sh/mdast-util-mdx@3?bundle'
</script>
Say our document example.mdx
contains:
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 module example.js
looks as follows:
import fs from 'node:fs/promises'
import {mdxjs} from 'micromark-extension-mdxjs'
import {fromMarkdown} from 'mdast-util-from-markdown'
import {mdxFromMarkdown, mdxToMarkdown} from 'mdast-util-mdx'
import {toMarkdown} from 'mdast-util-to-markdown'
const doc = await fs.readFile('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.js
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 identifiers mdxFromMarkdown
and mdxToMarkdown
.
There is no default export.
mdxFromMarkdown()
Create an extension for mdast-util-from-markdown
to enable MDX (ESM, JSX, expressions).
Extension for mdast-util-from-markdown
to enable MDX
(FromMarkdownExtension
).
When using the syntax extensions with addResult
, ESM and expression
nodes will have data.estree
fields set to ESTree Program
node.
mdxToMarkdown(options?)
Create an extension for mdast-util-to-markdown
to enable MDX (ESM, JSX, expressions).
Extension for mdast-util-to-markdown
.
options
(ToMarkdownOptions
)
— configurationExtension for mdast-util-to-markdown
to enable MDX
(FromMarkdownExtension
).
ToMarkdownOptions
Configuration (TypeScript type).
quote
('"'
or "'"
, default: '"'
)
— preferred quote to use around attribute valuesquoteSmart
(boolean
, default: false
)
— use the other quote if that results in less bytestightSelfClosing
(boolean
, default: false
)
— do not use an extra space when closing self-closing elements: <img/>
instead of <img />
printWidth
(number
, default: Infinity
)
— try and wrap syntax at this width.
When set to a finite number (say, 80
), the formatter will print
attributes on separate lines when a tag doesn’t fit on one line.
The normal behavior is to print attributes with spaces between them instead
of line endingsMDX has no representation in HTML.
Though, when you are dealing with MDX, you will likely go through hast.
You can enable passing MDX through to hast by configuring
mdast-util-to-hast
with passThrough: ['mdxjsEsm', 'mdxFlowExpression', 'mdxJsxFlowElement', 'mdxJsxTextElement', 'mdxTextExpression']
.
See Syntax in micromark-extension-mdxjs
.
This utility combines several mdast utilities. See their readmes for the node types supported in the tree:
mdast-util-mdx-expression
— support MDX expressionsmdast-util-mdx-jsx
— support MDX JSXmdast-util-mdxjs-esm
— support MDX ESMThis package is fully typed with TypeScript.
It exports the additional types
MdxFlowExpression
and MdxTextExpression
from mdast-util-mdx-expression
;
MdxJsxAttribute
,
MdxJsxAttributeValueExpression
,
MdxJsxExpressionAttribute
,
MdxJsxFlowElement
,
MdxJsxTextElement
,
and ToMarkdownOptions
from mdast-util-mdx-jsx
;
and MdxjsEsm
from mdast-util-mdxjs-esm
.
It also registers the node types with @types/mdast
and @types/hast
.
If you’re working with the syntax tree, make sure to import this utility
somewhere in your types, as that registers the new node types in the tree.
/**
* @typedef {import('mdast-util-mdx')}
*/
import {visit} from 'unist-util-visit'
/** @type {import('mdast').Root} */
const tree = getMdastNodeSomeHow()
visit(tree, function (node) {
// `node` can now be an expression, JSX, or ESM node.
})
Projects maintained by the unified collective are compatible with maintained versions of Node.js.
When we cut a new major release, we drop support for unmaintained versions of
Node.
This means we try to keep the current release line, mdast-util-mdx@^3
,
compatible with Node.js 16.
This utility works with mdast-util-from-markdown
version 2+ and
mdast-util-to-markdown
version 2+.
remark-mdx
— remark plugin to support MDXmicromark-extension-mdx
— micromark extension to parse MDXmicromark-extension-mdxjs
— micromark extension to parse JavaScript-aware MDXSee 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,399,511 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.
Research
Security News
Socket researchers uncover the risks of a malicious Python package targeting Discord developers.
Security News
The UK is proposing a bold ban on ransomware payments by public entities to disrupt cybercrime, protect critical services, and lead global cybersecurity efforts.
Security News
Snyk's use of malicious npm packages for research raises ethical concerns, highlighting risks in public deployment, data exfiltration, and unauthorized testing.