MDX Style Sheet

This MDX style sheet provides a quick overview of all the MDX syntax elements. For more information, refer to the MDX documentation (opens in a new tab).

Basic Syntax

Importing Components

import { MyComponent } from './components/MyComponent'

Using Components

<MyComponent />

Exporting Values

export const myValue = 'Hello, MDX!'

Markdown Elements

You can use all standard Markdown elements within MDX files.

Heading

H1

H2

H3

Bold

bold text

Italic

italicized text

Blockquote

blockquote

Ordered List

1. First item
2. Second item
3. Third item

Unordered List

• First item
• Second item
• Third item

Code

code

Horizontal Rule

Link

MDX Documentation (opens in a new tab)

Image

Advanced Syntax

JSX in Markdown

You can embed JSX directly within your Markdown content.

<div style={{ color: 'red' }}>
  This is a red div.
</div>

Exporting Components

You can export components from your MDX file.

export const MyButton = () => <button>Click me</button>

Using Props

You can pass props to your components.

<MyComponent title="Hello, MDX!" />

Custom Components

You can define custom components within your MDX file.

const CustomComponent = () => <div>Custom Component</div>
 
<CustomComponent />

MDXProvider

You can use MDXProvider to provide custom components for Markdown elements.

import { MDXProvider } from '@mdx-js/react'
 
const components = {
  h1: (props) => <h1 style={{ color: 'tomato' }} {...props} />,
}
 
<MDXProvider components={components}>
  <h1>Hello, MDX!</h1>
</MDXProvider>

Embedding Code Blocks

You can embed code blocks with syntax highlighting.

`` `javascript
console.log('Hello, MDX!')
`` `

Footnotes

Here's a sentence with a footnote. ¹

Definition List

term : definition

Strikethrough

The world is flat.

Task List

• Write the press release
• Update the website
• Contact the media

Resources

• MDX Documentation (opens in a new tab)
• MDX Syntax Highlighting (opens in a new tab)
• MDX Provider (opens in a new tab)
• MDX Components (opens in a new tab)