Security News
Introducing the Socket Python SDK
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
mdast-util-mdx-expression
Advanced tools
mdast extension to parse and serialize MDX (or MDX.js) expressions
The `mdast-util-mdx-expression` package is a utility for working with MDX (Markdown with JSX) expressions within the MDAST (Markdown Abstract Syntax Tree) format. It provides tools to parse, transform, and stringify MDX expressions embedded in Markdown documents.
Parsing MDX Expressions
This feature allows you to parse MDX expressions from a Markdown string into an MDAST tree. The code sample demonstrates how to parse a simple MDX expression.
const { fromMarkdown } = require('mdast-util-mdx-expression');
const mdxExpression = 'const x = 42;';
const tree = fromMarkdown(mdxExpression);
console.log(tree);
Stringifying MDX Expressions
This feature allows you to convert an MDAST tree containing MDX expressions back into a Markdown string. The code sample demonstrates how to stringify a simple MDX expression.
const { toMarkdown } = require('mdast-util-mdx-expression');
const tree = {
type: 'mdxFlowExpression',
value: 'const x = 42;'
};
const markdown = toMarkdown(tree);
console.log(markdown);
Transforming MDAST Trees
This feature allows you to traverse and transform MDAST trees containing MDX expressions. The code sample demonstrates how to visit and modify an MDX expression within an MDAST tree.
const { visit } = require('unist-util-visit');
const { fromMarkdown, toMarkdown } = require('mdast-util-mdx-expression');
const mdxExpression = 'const x = 42;';
const tree = fromMarkdown(mdxExpression);
visit(tree, 'mdxFlowExpression', node => {
node.value = 'const y = 24;';
});
const newMarkdown = toMarkdown(tree);
console.log(newMarkdown);
The `remark-mdx` package is a plugin for the `remark` ecosystem that enables parsing and transforming MDX content. It provides similar functionality to `mdast-util-mdx-expression` but is more integrated into the `remark` processing pipeline.
Extension for mdast-util-from-markdown
and/or
mdast-util-to-markdown
to support MDX (or MDX.js) expressions.
When parsing (from-markdown
), must be combined with
micromark-extension-mdx-expression
.
This utility handles parsing and serializing.
See micromark-extension-mdx-expression
for how the syntax works.
Use mdast-util-mdx
if you want all of MDX / MDX.js.
Use this otherwise.
This 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-expression
Say we have an MDX.js file, example.mdx
:
{
a + 1
}
b {true}.
And our module, example.js
, looks as follows:
import fs from 'node:fs'
import * as acorn from 'acorn'
import {fromMarkdown} from 'mdast-util-from-markdown'
import {toMarkdown} from 'mdast-util-to-markdown'
import {mdxExpression} from 'micromark-extension-mdx-expression'
import {mdxExpressionFromMarkdown, mdxExpressionToMarkdown} from 'mdast-util-mdx-expression'
var doc = fs.readFileSync('example.mdx')
var tree = fromMarkdown(doc, {
extensions: [mdxExpression({acorn, addResult: true})],
mdastExtensions: [mdxExpressionFromMarkdown]
})
console.log(tree)
var out = toMarkdown(tree, {extensions: [mdxExpressionToMarkdown]})
console.log(out)
Now, running node example
yields (positional info removed for brevity):
{
type: 'root',
children: [
{
type: 'mdxFlowExpression',
value: '\na + 1\n',
data: {
estree: {
type: 'Program',
body: [
{
type: 'ExpressionStatement',
expression: {
type: 'BinaryExpression',
left: {type: 'Identifier', name: 'a'},
operator: '+',
right: {type: 'Literal', value: 1, raw: '1'}
}
}
],
sourceType: 'module'
}
}
},
{
type: 'paragraph',
children: [
{type: 'text', value: 'b '},
{
type: 'mdxTextExpression',
value: 'true',
data: {
estree: {
type: 'Program',
body: [
{
type: 'ExpressionStatement',
expression: {type: 'Literal', value: true, raw: 'true'}
}
],
sourceType: 'module'
}
}
},
{type: 'text', value: '.'}
]
}
]
}
{
a + 1
}
b {true}.
mdxExpressionFromMarkdown
mdxExpressionToMarkdown
Support MDX (or MDX.js) expressions.
The exports are extensions, respectively for
mdast-util-from-markdown
and
mdast-util-to-markdown
.
When using the syntax extension with addResult
, nodes will have
a data.estree
field set to an ESTree.
The indent of the value of MDXFlowExpression
s is stripped.
The following interfaces are added to mdast by this utility.
MDXFlowExpression
interface MDXFlowExpression <: Literal {
type: "mdxFlowExpression"
}
MDXFlowExpression (Literal) represents a JavaScript
expression embedded in flow (block).
It can be used where flow content is expected.
Its content is represented by its value
field.
For example, the following markdown:
{
1 + 1
}
Yields:
{type: 'mdxFlowExpression', value: '\n1 + 1\n'}
MDXTextExpression
interface MDXTextExpression <: Literal {
type: "mdxTextExpression"
}
MDXTextExpression (Literal) represents a JavaScript
expression embedded in text (span, inline).
It can be used where phrasing content is expected.
Its content is represented by its value
field.
For example, the following markdown:
a {1 + 1} b.
Yields:
{type: 'mdxTextExpression', value: '1 + 1'}
FlowContent
(MDX expression)type FlowContentMdxExpression = MDXFlowExpression | FlowContent
PhrasingContent
(MDX expression)type PhrasingContentMdxExpression = MDXTextExpression | PhrasingContent
remarkjs/remark
— markdown processor powered by pluginsremarkjs/remark-mdx
— remark plugin to support MDXremarkjs/remark-mdxjs
— remark plugin to support 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 mdastsyntax-tree/mdast-util-mdx
— mdast utility to support MDXmicromark/micromark
— the smallest commonmark-compliant markdown parser that existsmicromark/micromark-extension-mdx-expression
— micromark extension to parse MDX expressionsSee 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) expressions
The npm package mdast-util-mdx-expression receives a total of 1,736,307 weekly downloads. As such, mdast-util-mdx-expression popularity was classified as popular.
We found that mdast-util-mdx-expression demonstrated a healthy version release cadence and project activity because the last version was released less than 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.
Security News
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
Security News
Floating dependency ranges in npm can introduce instability and security risks into your project by allowing unverified or incompatible versions to be installed automatically, leading to unpredictable behavior and potential conflicts.
Security News
A new Rust RFC proposes "Trusted Publishing" for Crates.io, introducing short-lived access tokens via OIDC to improve security and reduce risks associated with long-lived API tokens.