GitHub 警告语法
nextra-theme-docs 和 nextra-blog-theme 支持将 GitHub 警告语法
替换为 .md/.mdx 文件中的 <Callout> 组件。
用法
Markdown
> [!NOTE]
>
> 用户在浏览内容时应该知道的有用信息。
> [!TIP]
>
> 关于如何更好或更轻松完成事情的有用建议。
> [!IMPORTANT]
>
> 用户实现目标所需了解的关键信息。
> [!WARNING]
>
> 需要用户立即注意以避免问题的紧急信息。
> [!CAUTION]
>
> 提醒某些操作可能带来的风险或负面结果。示例
Note
用户在浏览内容时应该知道的有用信息。
💡
Tip
关于如何更好或更轻松完成事情的有用建议。
🚫
Important
用户实现目标所需了解的关键信息。
⚠️
Warning
需要用户立即注意以避免问题的紧急信息。
🚫
Caution
提醒某些操作可能带来的风险或负面结果。
在自定义主题中使用
如果你想在自己的主题和自己的 <Callout> 组件中使用此功能:
创建 <Blockquote> 组件
要创建 <Blockquote> 组件,首先从 nextra/components 导入 withGitHubAlert。然后通过调用 withGitHubAlert 函数创建 <Blockquote> 组件。
第一个参数应该是处理 GitHub 警告语法的 React HOC 组件,第二个参数应该是你的标准 <blockquote> 组件。
type 属性可以是以下之一:'note' | 'tip' | 'important' | 'warning' | 'caution'。
import { withGitHubAlert } from 'nextra/components'
const Blockquote = withGitHubAlert(({ type, ...props }) => {
return <MyCalloutComponent type={type} {...props} />
}, MyBlockquoteComponent)提供 <Blockquote> 给 useMDXComponents
要使 <Blockquote> 组件可用,你应该将其集成到 useMDXComponents 函数中:
mdx-components.jsx
export function useMDXComponents(components) {
return {
blockquote: Blockquote,
...components
}
}Last updated on