MkDocs Material 组件展示¶

本页面演示了 Material for MkDocs 部分自带组件的实际效果。每个示例下方都附有对应的 Markdown 源码，方便复制使用。

提示框 (Admonitions)¶

基本类型¶

Note

这是 note — 普通笔记

!!! note
    这是 `note` — 普通笔记

Abstract

这是 abstract — 摘要/概述

Info

这是 info — 信息

小技巧

这是 tip — 提示，标题可以自定义

Success

这是 success — 成功

Question

这是 question — 问题

注意！

这是 warning — 警告

Failure

这是 failure — 失败

Danger

这是 danger — 危险

Bug

这是 bug — Bug 记录

Example

这是 example — 示例

Quote

这是 quote — 引用

可折叠的提示框¶

点击展开查看详情

这里是隐藏的内容，用户点击才能看到。

里面可以放任何 Markdown，包括代码块、列表等。

默认展开的折叠框

加了 + 号，默认就是展开的，用户可以手动折叠。

内联提示框（侧边栏式）¶

侧边小框

这个提示框放在右边，正文会环绕它。适合放补充信息。

左边的

不加 end 就放在左边。

用 inline end 放在右边，用 inline 放在左边。如果屏幕不够宽，会自动撑满宽度。

无标题提示框¶

不想显示标题栏？给个空字符串就行。

内容标签页 (Content Tabs)¶

C 语言PythonRust纯文字

#include <stdio.h>

int main(void) {
    printf("Hello, World!\n");
    return 0;
}

def greet(name):
    print(f"Hello, {name}!")

if __name__ == "__main__":
    greet("World")

fn main() {
    println!("Hello, World!");
}

标签页里可以放任何内容
列表、图片、表格...
不只是代码块

注解注释 (Annotations)¶

正文中点击 (1) 小标记查看注释，不会打断阅读。

我是注解！可以包含 code、格式化文本、链接，甚至图片和表格。

也可以嵌套注解 (1) 哦～

:woman_raising_hand: 外层注解 (1)
1. 内层注解！嵌套完全没问题。

提示框里也能用注解：

带注解的提示框标题 (1)

提示框正文也可以有注解 (2)。

标题上的注解
正文里的注解

数据表格 (Data Tables)¶

方法	说明	状态
`GET`	:material-check: 获取资源	稳定
`PUT`	:material-check-all: 更新	稳定
`DELETE`	:material-close: 删除	谨慎使用
`PATCH`	:material-pencil: 部分更新	实验性

提示气泡 (Tooltips)¶

Hover me — 鼠标悬停查看

图片 (Images)¶

对齐¶

右对齐

图片可以左对齐 align=left 或右对齐 align=right，文字会环绕图片。在这段文字中，图片浮动在右侧，文本自然环绕。如果屏幕太窄，图片会自动撑满宽度，确保在手机上也能正常阅读。

明暗模式切换图片¶

亮色模式暗色模式

格式化 (Formatting)¶

文本高亮¶

这是高亮文本 (mark)
~~这是删除线 (strikethrough)~~

- ==这是高亮文本==
- ~~这是删除线~~

上下标¶

水：H₂O

- H~2~O

键盘按键¶

复制: Ctrl+C 粘贴: Ctrl+V 任务管理器: Ctrl+Shift+Esc

++ctrl+alt+del++

文档修订 (Critic Markup)¶

{~~原来的文字~>修改后的文字~~}
{高亮标记}

列表 (Lists)¶

定义列表¶

GET /api/users: 获取所有用户列表。返回 JSON 数组，支持分页参数 ?page=1&limit=20。
POST /api/users: 创建新用户。请求体须包含 name、email 字段。; 密码字段 password 会在服务端加盐哈希存储。

`GET /api/users`
:   获取所有用户列表。

`POST /api/users`
:   创建新用户。

任务列表（Checkbox）¶

脚注 (Footnotes)¶

Lorem ipsum dolor sit amet¹, consectetur adipiscing elit².

💻 代码块 (Code Blocks)¶

基本代码块 + 标题¶

hello.py

def greet(name: str) -> str:
    """返回问候语"""
    return f"Hello, {name}!"

if __name__ == "__main__":
    print(greet("World"))

行号 + 高亮特定行¶

def fibonacci(n):
    if n <= 1:         # 高亮这一行
        return n
    return fibonacci(n - 1) + fibonacci(n - 2)  # 高亮这一行

代码注释 (Annotation)¶

# (1)!
theme:
  name: material # (2)
  features:
    - navigation.tabs
    - content.code.copy

:man_raising_hand: 代码块里也可以有注释标记！点击 (1) 图标查看。
必须设置 name: material 才能使用 Material 主题。

这是第一个脚注的内容，可以是任意 Markdown 格式。 ↩
这是第二个脚注，支持多行内容。

第二段缩进四个空格即可。 ↩