Markdown MDX overview
nextra-theme-docs and nextra-theme-blog support replacing
GitHub alert syntax
with <Callout> component for .md/.mdx files.
Usage
Useful information that users should know, even when skimming content.
> [!NOTE]
>
> Useful information that users should know, even when skimming content.Helpful advice for doing things better or more easily.
> [!TIP]
>
> Helpful advice for doing things better or more easily.Key information users need to know to achieve their goal.
> [!IMPORTANT]
>
> Key information users need to know to achieve their goal.Urgent info that needs immediate user attention to avoid problems.
> [!WARNING]
>
> Urgent info that needs immediate user attention to avoid problems.Advises about risks or negative outcomes of certain actions.
> [!CAUTION]
>
> Advises about risks or negative outcomes of certain actions.Usage with your own theme
If you want to benefit this feature with your own theme and your own <Callout>
component:
Create a <Blockquote> component
To create a <Blockquote> component, start by importing withGitHubAlert from
nextra/components. You should then create the <Blockquote> component by
invoking the withGitHubAlert function.
The first argument should be a React HOC component that handles the GitHub alert
syntax, and the second argument should be your standard <blockquote>
component.
The type prop can be one of the following:
'note' | 'tip' | 'important' | 'warning' | 'caution'.
import { withGitHubAlert } from 'nextra/components'
const Blockquote = withGitHubAlert(({ type, ...props }) => {
return <MyCalloutComponent type={type} {...props} />
}, MyBlockquoteComponent)Provide <Blockquote> to useMDXComponents
To make the <Blockquote> component available, you should integrate it into the
useMDXComponents function:
export function useMDXComponents(components) {
return {
blockquote: Blockquote,
...components
}
}You can learn more about the Nextra components in the Nextra documentation .