Product
Introducing Java Support in Socket
We're excited to announce that Socket now supports the Java programming language.
micromark-extension-mdxjs
Advanced tools
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.
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@2'
In browsers with esm.sh
:
<script type="module">
import {mdxjs} from 'https://esm.sh/micromark-extension-mdxjs@2?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 identifier 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
).
Options
Configuration (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 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,
micromark-extension-mdxjs@^2
, compatible with Node.js 16.
This package works with micromark
version 3
and later.
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
The npm package micromark-extension-mdxjs receives a total of 1,268,713 weekly downloads. As such, micromark-extension-mdxjs popularity was classified as popular.
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.
Product
We're excited to announce that Socket now supports the Java programming language.
Security News
Socket detected a malicious Python package impersonating a popular browser cookie library to steal passwords, screenshots, webcam images, and Discord tokens.
Security News
Deno 2.0 is now available with enhanced package management, full Node.js and npm compatibility, improved performance, and support for major JavaScript frameworks.