@docusaurus/mdx-loader

What is @docusaurus/mdx-loader?

@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.

What are @docusaurus/mdx-loader's main functionalities?

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')],
            },
          },
        ],
      },
    ],
  },
};

Other packages similar to @docusaurus/mdx-loader

mdx-loader

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

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

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.

README

@docusaurus/mdx-loader

Docusaurus webpack loader of MDX

Installation

yarn add @docusaurus/mdx-loader

Usage

// ...
module: {
  rules: [
    // ...
    {
      test: /\.mdx?$/,
      use: [
        'babel-loader',
        {
            loader: '@docuaurus/mdx-loader',
            options: {
                // .. See options
            }
        }
      ]
    }
  ]
}

Options

rehypePlugins

Array of rehype plugins to manipulate the MDXHAST

remarkPlugins

Array of remark plugins to manipulate the MDXAST

Changelog

2.0.0-alpha.19 (2019-06-07)

• Add a sensible default for browserslist config.
• UI
  • Add sun and moon emoji to the dark mode toggle.
  • Mobile responsive menu.
  • Right table of contents for docs is now sticky.
• Plugins
  • Change plugin definitions from classes to functions. Refer to the new plugin docs.
  • Implement Clients module API.
  • Change format within docusaurus.config.js to be like presets.
• Deps
  • Infima CSS is now locked down to specific versions and not relying upon the CDN which reads from trunk.
  • Update dependencies to latest
• Customize/ Override infima CSS variables by passing options into the classic preset.

presets: [
  [
    '@docusaurus/preset-classic',
    {
      theme: {
        customCss: require.resolve('./css/custom.css'),
      },
      ...
    },
  ],
],

• Allow passing remark and rehype plugins to mdx-loader for docs and blog plugin
• Move themes component of docs and blog to be part of theme-classic
• Use composition style for prism syntax highlighting instead of doing it via rehype plugin
• Pass MDXProvider to docs and blog. To change the provided MDX components, run docusaurus swizzle @docusaurus/theme-classic MDXComponents
• Add @docusaurus/theme-livecodeblock plugin
• Better run-time code generation & webpack splitchunks optimization
• Minify css for production build
• Fix weird scrolling problem when navigating to a route with a hash location

V2 Changelog (2019-04-10)