micromark-extension-mdxjs
Advanced tools
Package description
The micromark-extension-mdxjs package is an extension for the micromark Markdown parser that enables MDX.js syntax. This allows embedding JSX components directly within Markdown content, making it particularly useful for developers working with React in Markdown-driven sites or applications.
MDX Parsing
This feature allows the parsing of MDX content within Markdown files. The code sample demonstrates how to convert MDX syntax embedded in Markdown into HTML by using the micromark parser with the mdxjs extension.
import {micromark} from 'micromark';
import {mdxjs} from 'micromark-extension-mdxjs';
const markdown = '<MyComponent>Hello world!</MyComponent>';
const html = micromark(markdown, {
extensions: [mdxjs()]
});
console.log(html);JSX Component Support
This feature supports the use of JSX components within Markdown. The code sample shows how to parse Markdown that includes a JSX component with props, converting it into HTML.
import {micromark} from 'micromark';
import {mdxjs} from 'micromark-extension-mdxjs';
const markdown = '<MyComponent prop1={value1}>More content here</MyComponent>';
const html = micromark(markdown, {
extensions: [mdxjs()]
});
console.log(html);remark-mdx is another popular package that extends the remark Markdown parser to support MDX. Like micromark-extension-mdxjs, it allows for the embedding of JSX components in Markdown. The main difference lies in the underlying parsing engine; remark-mdx uses remark, which is based on unified, whereas micromark-extension-mdxjs uses micromark.
gatsby-plugin-mdx is a Gatsby plugin that integrates MDX into Gatsby projects. It provides similar functionalities by allowing MDX content to be used within Gatsby pages. While gatsby-plugin-mdx is more specific to Gatsby and includes optimizations for that ecosystem, micromark-extension-mdxjs is more general-purpose and can be used in various JavaScript environments.
Readme
micromark extensions to support MDX.
This package contains an extension that adds support for the syntax enabled
by MDX to micromark.
This extension is used inside MDX.
It supports export/imports, expressions, JSX, and turns some markdown features
off.
This project is useful when you want to support MDX.
You can use this extension when you are working with micromark.
This package is aware of JavaScript syntax.
If you want to be unaware of JavaScript, for example because expressions can
include Rust or variables or whatnot, use
micromark-extension-mdx.
Alternatively, you can also use the underlying syntax extensions separately:
micromark-extension-mdx-expression
— support MDX expressionsmicromark-extension-mdx-jsx
— support MDX JSXmicromark-extension-mdx-md
— turn some CommonMark features offmicromark-extension-mdxjs-esm
— support MDX export/importsWhen you need a syntax tree, combine this package with
mdast-util-mdx.
All 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 micromark-extension-mdxjs
In Deno with esm.sh:
import {mdxjs} from 'https://esm.sh/micromark-extension-mdxjs@1'
In browsers with esm.sh:
<script type="module">
import {mdxjs} from 'https://esm.sh/micromark-extension-mdxjs@1?bundle'
</script>
import {micromark} from 'micromark'
import {mdxjs} from 'micromark-extension-mdxjs'
const output = micromark('import a from "b"\n\na <b /> c {1 + 1} d', {
extensions: [mdxjs()]
})
console.log(output)
Yields:
<p>a c d</p>
…which is useless: go to a syntax tree with
mdast-util-from-markdown and
mdast-util-mdx instead.
This package exports the identifiers mdxjs.
There is no default export.
The separate extensions support the development condition.
Run node --conditions development module.js to get instrumented dev code.
Without this condition, production code is loaded.
mdxjs(options?)Create an extension for micromark to enable MDX syntax.
options (Options, optional)
— configuration; passed to all extensionsExtension for micromark that can be passed in extensions to enable MDX
syntax (Extension).
OptionsConfiguration (TypeScript type).
export type {Options} from 'micromark-extension-mdx-expression'
See Options.
For recommendations on how to author MDX, see each corresponding readme:
For info on the syntax of these features, see each corresponding readme:
For info on what errors are thrown, see each corresponding readme:
This package is fully typed with TypeScript.
It exports the additional type Options.
Projects maintained by the unified collective are compatible with all maintained versions of Node.js. As of now, that is Node.js 16+. Our projects sometimes work with older versions, but this is not guaranteed.
These extensions work with micromark version 3+.
This package is safe.
micromark-extension-mdx
— support MDX unaware of JSmdast-util-mdx
— support MDX in mdastremark-mdx
— support MDX syntax in remarkSee contributing.md in micromark/.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
micromark extension to support MDX.js
We found that micromark-extension-mdxjs demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer 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
Git dependencies in open source packages can introduce significant risks, including lack of version control, stability issues, dependency drift, and difficulty in auditing, making them potential targets for supply chain attacks.
Security News
Node.js has added experimental support for TypeScript, a move that highlights the growing importance of TypeScript in modern development.
Product
Check out what's new at Socket with our Product Changelog. It tracks all public-facing updates, improvements, and fixes so you can take full advantage of our features.