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