@docusaurus/mdx-loader
Advanced tools
@docusaurus/mdx-loader is a webpack loader for MDX (Markdown with JSX) files, specifically designed to work with Docusaurus, a static site generator. It allows you to write content in Markdown and embed React components within that content.
Loading MDX files
This feature allows you to load and process MDX files using webpack. The loader converts MDX content into React components, enabling you to use Markdown and JSX together.
module.exports = {
module: {
rules: [
{
test: /\.mdx?$/,
use: [
{
loader: '@docusaurus/mdx-loader',
options: {
// Options for the loader
},
},
],
},
],
},
};Customizing MDX processing
This feature allows you to customize the MDX processing by adding remark and rehype plugins. In this example, the loader is configured to use 'remark-math' and 'rehype-katex' plugins for rendering mathematical expressions.
module.exports = {
module: {
rules: [
{
test: /\.mdx?$/,
use: [
{
loader: '@docusaurus/mdx-loader',
options: {
remarkPlugins: [require('remark-math')],
rehypePlugins: [require('rehype-katex')],
},
},
],
},
],
},
};mdx-loader is a webpack loader for MDX files, similar to @docusaurus/mdx-loader but not specifically tailored for Docusaurus. It allows you to use MDX in any webpack-based project.
gatsby-plugin-mdx is a plugin for Gatsby that enables the use of MDX in Gatsby projects. It provides similar functionality to @docusaurus/mdx-loader but is designed to work within the Gatsby ecosystem.
next-mdx-remote is a library for using MDX with Next.js. It allows you to load MDX content remotely and render it in Next.js pages, providing similar capabilities to @docusaurus/mdx-loader but for the Next.js framework.
@docusaurus/mdx-loaderDocusaurus webpack loader of MDX
yarn add @docusaurus/mdx-loader
// ...
module: {
rules: [
// ...
{
test: /\.mdx?$/,
use: [
'babel-loader',
{
loader: '@docusaurus/mdx-loader',
options: {
// .. See options
},
},
],
},
];
}
rehypePluginsArray of rehype plugins to manipulate the MDXHAST
remarkPluginsArray of remark plugins to manipulate the MDXAST
metadataPathA function to provide the metadataPath depending on current loaded MDX path that will be exported as the MDX metadata.
2.0.0-alpha.55 (2020-05-19)
infima
The following Infima classes have been renamed for consistency:
page-item → pagination__itempagination-nav__link--label → pagination-nav__labelpagination-nav__link--sublabel → pagination-nav__sublabeltab-item → tabs__itemtab-item--active → tabs__item--activeIf you have swizzled components, you need to replace these class names.
docusaurus
docusaurus
docusaurus-theme-classic
<head> (@jcomack)docusaurus-plugin-content-docs, docusaurus-theme-classic, docusaurus-types, docusaurus
docusaurus-plugin-content-docs, docusaurus-theme-search-algolia, docusaurus
docusaurus-plugin-content-docs, docusaurus-utils
docusaurus-theme-classic
docusaurus-theme-search-algolia
lqip-loader
docusaurus-init
docusaurus-theme-classic
docusaurus-theme-live-codeblock
docusaurus-theme-search-algolia
docusaurus-theme-bootstrap, docusaurus-theme-classic
docusaurus-utils
docusaurus-theme-classic, docusaurus-theme-live-codeblock, docusaurus
docusaurus
FAQs
Docusaurus Loader for MDX
The npm package @docusaurus/mdx-loader receives a total of 288,276 weekly downloads. As such, @docusaurus/mdx-loader popularity was classified as popular.
We found that @docusaurus/mdx-loader demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 4 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
PyPI confirms no security flaws were exploited in the Ultralytics supply chain attack and highlights improvements for safer package publishing.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.