MkDocs Material - Markdown 扩展语法
引言¶
Markdown 本身的语法比较简单，如果想要实现复杂一些、好看的样式，通常比较困难。
Mkdocs Material 提供了一些好用、好看的效果，语法也简单的 Markdown 扩展。
Markdown 扩展¶
以下是 Mkdocs Material 中的一些 Markdown 扩展，经过老王测试，语法简单，有明显效果，并且效果还不错的扩展
Admonition 信息块¶
我在左侧
警告也可以被呈现为内联块（例如，对于侧边栏），
使用inline + end修饰符将其放置在右侧，
或仅使用inline修饰符将其放置在左侧
我在右侧
警告也可以被呈现为内联块（例如，对于侧边栏），
使用inline + end修饰符将其放置在右侧，
或仅使用inline修饰符将其放置在左侧
这是一个注意信息
警告内容缩进即可，Tab 或 4 个空格
换行用：<br />
支持的类型：note / abstract / info / tip / success / question / warning / failure / danger / bug / example / quote
我是一个可折叠信息块
警告内容缩进即可，Tab 或 4 个空格
换行用：<br />
支持的类型：note / abstract / info / tip / success / question / warning / failure / danger / bug / example / quote
我是可折叠但是默认展开的信息块
警告内容缩进即可，Tab 或 4 个空格
换行用：<br />
支持的类型：note / abstract / info / tip / success / question / warning / failure / danger / bug / example / quote
更多用法详见官方文档：Admonitions - Material for MkDocs
Attribute Lists 属性列表¶
允许使用特殊语法将HTML属性和CSS类添加到几乎每个Markdown内联和块级元素。比如：
- 我是一个按钮
- 网格，如下
- HTML for content and structure
- JavaScript for interactivity
- CSS for text running out of boxes
- Internet Explorer ... huh?
Task List 任务列表¶
- Lorem ipsum dolor sit amet, consectetur adipiscing elit
- Vestibulum convallis sit amet nisi a tincidunt
- In hac habitasse platea dictumst
- In scelerisque nibh non dolor mollis congue sed et metus
- Praesent sed risus massa
- Aenean pretium efficitur erat, donec pharetra, ligula non scelerisque
Footnote 脚注¶
The HTML1 specification is maintained by the W3C2
Table 表格¶
| Method | Description |
|---|---|
GET |
Fetch resource |
PUT |
Update resource |
DELETE |
Delete resource |
SuperFences 代码块¶
1 2 | |
The range() function is used to generate a sequence of numbers.
图标¶
下载图标包：Bootstrap Icons，解压到/overrides/icons/bootstrap目录下，目录结构如下：
├─ overrides/
│ └─ .icons/
│ └─ bootstrap/
│ └─ *.svg
└─ mkdocs.yml
然后，将以配置添加到mkdocs.yml：
markdown_extensions:
- pymdownx.emoji:
emoji_index: !!python/name:material.extensions.emoji.twemoji
emoji_generator: !!python/name:material.extensions.emoji.to_svg
options:
custom_icons:
- overrides/.icons
现在，就可以愉快的使用图标了。比如：
图标可以在官方文档提供的 图标搜索 中搜索使用。