MkDocs Material 组件展示¶
本页面演示了 Material for MkDocs 部分自带组件的实际效果。 每个示例下方都附有对应的 Markdown 源码，方便复制使用。
提示框 (Admonitions)¶
基本类型¶
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 语言"
```c
#include <stdio.h>
int main(void) {
printf("Hello, World!\n");
return 0;
}
```
=== "Python"
```python
def greet(name):
print(f"Hello, {name}!")
if __name__ == "__main__":
greet("World")
```
=== "纯文字"
- 标签页里可以放任何内容
- 列表、图片、表格...
- 不只是代码块
注解注释 (Annotations)¶
正文中点击 (1) 小标记查看注释，不会打断阅读。
- 我是注解！可以包含
code、格式化文本、链接，甚至图片和表格。
也可以嵌套注解 (1) 哦～
-
外层注解 (1)- 内层注解！嵌套完全没问题。
提示框里也能用注解：
带注解的提示框标题 (1)
提示框正文也可以有注解 (2)。
- 标题上的注解
- 正文里的注解
数据表格 (Data Tables)¶
| 方法 | 说明 | 状态 |
|---|---|---|
GET |
获取资源 | 稳定 |
PUT |
更新 | 稳定 |
DELETE |
删除 | 谨慎使用 |
PATCH |
部分更新 | 实验性 |
| 方法 | 说明 | 状态 |
| :------- | :----------------------- | :------: |
| `GET` | :material-check: 获取资源 | 稳定 |
| `PUT` | :material-check-all: 更新 | 稳定 |
| `DELETE` | :material-close: 删除 | 谨慎使用 |
| `PATCH` | :material-pencil: 部分更新 | 实验性 |
提示气泡 (Tooltips)¶
按钮 (Buttons)¶
普通按钮¶
主按钮（实心）¶
图标按钮¶
图片 (Images)¶
对齐¶
图片可以左对齐 align=left 或右对齐 align=right，文字会环绕图片。在这段文字中，图片浮动在右侧，文本自然环绕。如果屏幕太窄，图片会自动撑满宽度，确保在手机上也能正常阅读。
明暗模式切换图片¶
{ width="400" }
{ width="400" }
图标与 Emoji (Icons & Emojis)¶
Emoji¶
图标¶
:fontawesome-brands-youtube: :fontawesome-brands-github:
:material-cellphone-information: :material-micro-sd:
卡片网格 (Grids)¶
<div class="grid cards" markdown>
- :material-cellphone-information: __玩机入门__
---
从零开始了解 Switch 破解。
[:octicons-arrow-right-24: 开始阅读](#)
- :material-tools: __使用指北__
---
各种自制工具的使用教程。
[:octicons-arrow-right-24: 浏览工具](#)
</div>
格式化 (Formatting)¶
文本高亮¶
- 这是高亮文本 (mark)
这是删除线 (strikethrough)
上下标¶
- 水：H2O
键盘按键¶
复制: Ctrl+C 粘贴: Ctrl+V 任务管理器: Ctrl+Shift+Esc
文档修订 (Critic Markup)¶
- {
原来的文字~>修改后的文字} - {高亮标记}
列表 (Lists)¶
定义列表¶
GET /api/users- 获取所有用户列表。返回 JSON 数组，支持分页参数
?page=1&limit=20。 POST /api/users- 创建新用户。请求体须包含
name、email字段。 - 密码字段
password会在服务端加盐哈希存储。
任务列表（Checkbox）¶
-
已完成：搭建项目框架 -
已完成：配置主题 - 待办：撰写文档
- 待办：部署上线
- CI/CD 配置
- 域名解析
- SSL 证书
脚注 (Footnotes)¶
Lorem ipsum dolor sit amet1, consectetur adipiscing elit2.
Lorem ipsum dolor sit amet[^1], consectetur adipiscing elit[^2].
[^1]: 这是第一个脚注的内容，可以是任意 Markdown 格式。
[^2]: 这是第二个脚注，支持多行内容。
第二段缩进四个空格即可。
图表 (Mermaid Diagrams)¶
流程图¶
flowchart LR
A[开始] --> B{是否破解?};
B -->|是| C[注入 payload];
B -->|否| D[正常启动];
C --> E[进入大气层];
D --> F[HOS 原版系统];```mermaid
flowchart LR
A[开始] --> B{是否破解?};
B -->|是| C[注入 payload];
B -->|否| D[正常启动];
C --> E[进入大气层];
D --> F[HOS 原版系统];
```
时序图¶
sequenceDiagram
autonumber
User->>Switch: 注入 payload
Switch->>Bootloader: 加载 Hekate
Bootloader->>Atmosphère: 启动大气层
Atmosphère-->>User: 进入自制系统```mermaid
sequenceDiagram
autonumber
User->>Switch: 注入 payload
Switch->>Bootloader: 加载 Hekate
Bootloader->>Atmosphère: 启动大气层
Atmosphère-->>User: 进入自制系统
```
状态图¶
stateDiagram-v2
[*] --> RCM模式
RCM模式 --> 注入payload
注入payload --> 大气层系统
大气层系统 --> [*]数学公式 (Math)¶
行内公式¶
行内公式 \(\int_0^\infty e^{-x^2} dx = \frac{\sqrt{\pi}}{2}\) 直接嵌入正文中。
块级公式¶
KaTeX 替代方案
本页面使用 MathJax 渲染公式。如果追求更快的加载速度，可以替换为 KaTeX。
代码块 (Code Blocks)¶
基本代码块 + 标题¶
def greet(name: str) -> str:
"""返回问候语"""
return f"Hello, {name}!"
if __name__ == "__main__":
print(greet("World"))
```python title="hello.py"
def greet(name: str) -> str:
"""返回问候语"""
return f"Hello, {name}!"
if __name__ == "__main__":
print(greet("World"))
```
行内代码高亮¶
使用 range() 语法可以在正文中高亮行内代码，比如 print("Hello, World!")。
行号 + 高亮特定行¶
```python linenums="1" hl_lines="2 4"
def fibonacci(n):
if n <= 1:
return n
return fibonacci(n - 1) + fibonacci(n - 2)
```
代码注释 (Annotation)¶
- 代码块里也可以有注释标记！点击
(1)图标查看。 - 必须设置
name: material才能使用 Material 主题。