GitHub Alert Syntax
nextra-theme-docs and nextra-theme-blog support replacing
GitHub alert syntax
with <Callout> component for .md/.mdx files.
Usage
> [!NOTE]
>
> Useful information that users should know, even when skimming content.
> [!TIP]
>
> Helpful advice for doing things better or more easily.
> [!IMPORTANT]
>
> Key information users need to know to achieve their goal.
> [!WARNING]
>
> Urgent info that needs immediate user attention to avoid problems.
> [!CAUTION]
>
> Advises about risks or negative outcomes of certain actions.Example
Useful information that users should know, even when skimming content.
Helpful advice for doing things better or more easily.
Key information users need to know to achieve their goal.
Urgent info that needs immediate user attention to avoid problems.
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
}
}