mkdocs-material/docs/reference/lists.md

169 lines
5.5 KiB
Markdown
Raw Permalink Normal View History

---
2021-12-16 19:08:57 +03:00
icon: material/format-list-bulleted
---
# Lists
Material for MkDocs supports several flavors of lists that cater to different
use cases, including _unordered lists_ and _ordered lists_, which are supported
through standard Markdown, as well as _definition lists_ and _task lists_, which
are supported through extensions.
## Configuration
2021-10-10 13:19:14 +03:00
This configuration enables the use of definition lists and tasks lists, which
are both not part of the standard Markdown syntax. Add the following lines to
`mkdocs.yml`:
``` yaml
markdown_extensions:
- def_list
2021-10-10 13:19:14 +03:00
- pymdownx.tasklist:
custom_checkbox: true
```
2021-10-10 13:19:14 +03:00
See additional configuration options:
- [Definition Lists]
- [Tasklist]
2021-10-10 13:19:14 +03:00
[Definition Lists]: ../setup/extensions/python-markdown.md#definition-lists
[Tasklist]: ../setup/extensions/python-markdown-extensions.md#tasklist
## Usage
### Using unordered lists
2021-10-10 13:19:14 +03:00
Unordered lists can be written by prefixing a line with a `-`, `*` or `+` list
marker, all of which can be used interchangeably. Furthermore, all flavors
of lists can be nested inside each other:
``` markdown title="List, unordered"
2020-11-16 00:25:11 +03:00
- Nulla et rhoncus turpis. Mauris ultricies elementum leo. Duis efficitur
accumsan nibh eu mattis. Vivamus tempus velit eros, porttitor placerat nibh
lacinia sed. Aenean in finibus diam.
* Duis mollis est eget nibh volutpat, fermentum aliquet dui mollis.
* Nam vulputate tincidunt fringilla.
* Nullam dignissim ultrices urna non auctor.
```
<div class="result" markdown>
2020-11-16 00:25:11 +03:00
- Nulla et rhoncus turpis. Mauris ultricies elementum leo. Duis efficitur
accumsan nibh eu mattis. Vivamus tempus velit eros, porttitor placerat nibh
lacinia sed. Aenean in finibus diam.
* Duis mollis est eget nibh volutpat, fermentum aliquet dui mollis.
* Nam vulputate tincidunt fringilla.
* Nullam dignissim ultrices urna non auctor.
</div>
### Using ordered lists
2024-01-28 11:51:25 +03:00
Ordered lists must start with a number immediately followed by a dot. The
numbers do not need to be consecutive and can be all set to `1.`, as they will
be re-numbered when rendered:
``` markdown title="List, ordered"
2021-10-10 13:19:14 +03:00
1. Vivamus id mi enim. Integer id turpis sapien. Ut condimentum lobortis
sagittis. Aliquam purus tellus, faucibus eget urna at, iaculis venenatis
nulla. Vivamus a pharetra leo.
2021-10-10 13:19:14 +03:00
1. Vivamus venenatis porttitor tortor sit amet rutrum. Pellentesque aliquet
quam enim, eu volutpat urna rutrum a. Nam vehicula nunc mauris, a
ultricies libero efficitur sed.
2021-10-10 13:19:14 +03:00
2. Morbi eget dapibus felis. Vivamus venenatis porttitor tortor sit amet
rutrum. Pellentesque aliquet quam enim, eu volutpat urna rutrum a.
2021-10-10 13:19:14 +03:00
1. Mauris dictum mi lacus
2. Ut sit amet placerat ante
3. Suspendisse ac eros arcu
```
<div class="result" markdown>
2021-10-10 13:19:14 +03:00
1. Vivamus id mi enim. Integer id turpis sapien. Ut condimentum lobortis
sagittis. Aliquam purus tellus, faucibus eget urna at, iaculis venenatis
nulla. Vivamus a pharetra leo.
2021-10-10 13:19:14 +03:00
1. Vivamus venenatis porttitor tortor sit amet rutrum. Pellentesque aliquet
quam enim, eu volutpat urna rutrum a. Nam vehicula nunc mauris, a
ultricies libero efficitur sed.
2021-10-10 13:19:14 +03:00
2. Morbi eget dapibus felis. Vivamus venenatis porttitor tortor sit amet
rutrum. Pellentesque aliquet quam enim, eu volutpat urna rutrum a.
2021-10-10 13:19:14 +03:00
1. Mauris dictum mi lacus
2. Ut sit amet placerat ante
3. Suspendisse ac eros arcu
</div>
### Using definition lists
2021-10-10 13:19:14 +03:00
When [Definition Lists] is enabled, lists of arbitrary key-value pairs, e.g. the
parameters of functions or modules, can be enumerated with a simple syntax:
``` markdown title="Definition list"
`Lorem ipsum dolor sit amet`
2021-10-10 13:19:14 +03:00
: Sed sagittis eleifend rutrum. Donec vitae suscipit est. Nullam tempus
tellus non sem sollicitudin, quis rutrum leo facilisis.
`Cras arcu libero`
2021-10-10 13:19:14 +03:00
: Aliquam metus eros, pretium sed nulla venenatis, faucibus auctor ex. Proin
ut eros sed sapien ullamcorper consequat. Nunc ligula ante.
Duis mollis est eget nibh volutpat, fermentum aliquet dui mollis.
Nam vulputate tincidunt fringilla.
Nullam dignissim ultrices urna non auctor.
```
<div class="result" markdown>
`Lorem ipsum dolor sit amet`
2021-10-10 13:19:14 +03:00
: Sed sagittis eleifend rutrum. Donec vitae suscipit est. Nullam tempus
tellus non sem sollicitudin, quis rutrum leo facilisis.
`Cras arcu libero`
2021-10-10 13:19:14 +03:00
: Aliquam metus eros, pretium sed nulla venenatis, faucibus auctor ex. Proin
ut eros sed sapien ullamcorper consequat. Nunc ligula ante.
Duis mollis est eget nibh volutpat, fermentum aliquet dui mollis.
Nam vulputate tincidunt fringilla.
Nullam dignissim ultrices urna non auctor.
</div>
### Using task lists
2021-10-10 13:19:14 +03:00
When [Tasklist] is enabled, unordered list items can be prefixed with `[ ]` to
render an unchecked checkbox or `[x]` to render a checked checkbox, allowing
for the definition of task lists:
``` markdown title="Task list"
2020-11-16 00:25:11 +03:00
- [x] Lorem ipsum dolor sit amet, consectetur adipiscing elit
- [ ] Vestibulum convallis sit amet nisi a tincidunt
* [x] In hac habitasse platea dictumst
* [x] In scelerisque nibh non dolor mollis congue sed et metus
* [ ] Praesent sed risus massa
2020-11-16 00:25:11 +03:00
- [ ] Aenean pretium efficitur erat, donec pharetra, ligula non scelerisque
```
<div class="result" markdown>
2020-11-16 00:25:11 +03:00
- [x] Lorem ipsum dolor sit amet, consectetur adipiscing elit
- [ ] Vestibulum convallis sit amet nisi a tincidunt
* [x] In hac habitasse platea dictumst
* [x] In scelerisque nibh non dolor mollis congue sed et metus
* [ ] Praesent sed risus massa
2020-11-16 00:25:11 +03:00
- [ ] Aenean pretium efficitur erat, donec pharetra, ligula non scelerisque
</div>