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!
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 extension to support MDX.js.
Use micromark-extension-mdx
instead to support MDX agnostic to JS.
This package provides the low-level modules for integrating with the micromark tokenizer but has no handling of compiling to HTML: go to a syntax tree instead.
You probably should use this package with mdast-util-mdx
(mdast) or alternatively use both through remark-mdx
(remark).
The extensions can be used separately:
micromark/micromark-extension-mdx-expression
— support MDX (or MDX.js) expressionsmicromark/micromark-extension-mdx-jsx
— support MDX (or MDX.js) JSXmicromark/micromark-extension-mdx-md
— turn some markdown features off for MDX (or MDX.js)micromark/micromark-extension-mdxjs-esm
— support MDX.js ESM import/exportsnpm:
npm install micromark-extension-mdxjs
See mdast-util-mdx
for an example.
syntax(options)
Support MDX.js.
The export is a function that can be called to return an extension for the
micromark parser (to tokenize MDX; can be passed in extensions
).
options
Options are the same as for mdx-expression
, mdx-jsx
, and mdxjs-esm
, but
come predefined to support JS inside MDX.
options.acorn
Acorn parser to use (Acorn
, default:
acorn.Parser.extend(acornJsx())
).
options.acornOptions
Options to pass to acorn (Object
, default: {ecmaVersion: 2020, sourceType: 'module'}
).
options.addResult
Whether to add an estree
field to tokens with the results from acorn
(boolean
, default: true
).
micromark/micromark
— the smallest commonmark-compliant markdown parser that existsmicromark/micromark-extension-mdx
— micromark extension to support MDX (agnostic to JS)micromark/micromark-extension-mdx-expression
— micromark extension to support MDX (or MDX.js) expressionsmicromark/micromark-extension-mdx-jsx
— micromark extension to support MDX (or MDX.js) JSXmicromark/micromark-extension-mdx-md
— micromark extension to support misc MDX changesmicromark/micromark-extension-mdxjs-esm
— micromark extension to support MDX.js ESM import/exportssyntax-tree/mdast-util-mdx
— mdast utility to support MDX (or MDX.js)See 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
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.