Skip to main content

MDX

Docusaurus has built-in support for MDX, which allows you to write JSX within your Markdown files and render them as React components.

Check out the MDX docs to see what fancy stuff you can do with MDX.

Exporting components​

To define any custom component within an MDX file, you have to export it: only paragraphs that start with export will be parsed as components instead of prose.

export const Highlight = ({children, color}) => (
  <span
    style={{
      backgroundColor: color,
      borderRadius: '2px',
      color: '#fff',
      padding: '0.2rem',
    }}>
    {children}
  </span>
);

<Highlight color="#25c2a0">Docusaurus green</Highlight> and <Highlight color="#1877F2">Facebook blue</Highlight> are my favorite colors.

I can write **Markdown** alongside my _JSX_!

Notice how it renders both the markup from your React component and the Markdown syntax:

Docusaurus green and Facebook blue are my favorite colors.

I can write Markdown alongside my JSX!

Importing components​

TODO

Work out how to import components from other packages in the monorepo.

Importing code snippets​

You can not only import a file containing a component definition, but also import any code file as raw text, and then insert it in a code block, thanks to Webpack raw-loader. You can import code snippets from another file as it is:

myMarkdownFile.mdx
import CodeBlock from '@theme/CodeBlock';
import MyComponentSource from '!!raw-loader!@site/src/components/myComponent';

<CodeBlock language="jsx">{MyComponentSource}</CodeBlock>
import React, { useState } from "react";

export default function MyComponent() {
  const [bool, setBool] = useState(false);
  return (
    <div>
      <p>MyComponent rendered !</p>
      <p>bool={bool ? "true" : "false"}</p>
      <p>
        <button onClick={() => setBool((b) => !b)}>toggle bool</button>
      </p>
    </div>
  );
}
note

See User for an example of importing from another package in the monorepo.