-
Marko Rintamäki authoredMarko Rintamäki authored
title: Feature showcase
There are a lot on neat features in mkdocs. Here is a small showcase of the features.
For full list please see the Material for MkDocs documentation.
Zoomable images
Zoom images using LightGallery.
=== "Example"
=== "Code"
markdown 
UML with superfences
This uses the mermaid syntax. See documentation from: https://mermaid-js.github.io/mermaid/#/
=== "Example"
mermaid sequenceDiagram participant Alice participant Bob Alice->>John: Hello John, how are you? loop Healthcheck John->>John: Fight against hypochondria end Note right of John: Rational thoughts <br/>prevail! John-->>Alice: Great! John->>Bob: How about you? Bob-->>John: Jolly good!
=== "Code"
mermaid
sequenceDiagram
participant Alice
participant Bob
Alice->>John: Hello John, how are you?
loop Healthcheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts
prevail!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
Admonitions
Supproted types note, seealso, abstract, summary, tldr, info, todo, tip, hint, important, success, check, done, question, help, faq, warning, caution, attention, failure, fail, missing, danger, error, bug, example, quote, cite
Normal
=== "Example"
!!! note "Note title"
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
massa, nec semper lorem quam in massa.
=== "Code"
markdown !!! note "Note title" Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor massa, nec semper lorem quam in massa.
Collapsible blocks
=== "Example"
??? warning "Warning title"
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
massa, nec semper lorem quam in massa.
=== "Code"
markdown ??? warning "Warning title" Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor massa, nec semper lorem quam in massa.
Collapsible blocks (open by default)
Adding a +
after ???
will render the block as open on page load:
=== "Example" ???+ warning "Warning title" Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor massa, nec semper lorem quam in massa.
=== "Code"
markdown ???+ warning "Warning title" Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor massa, nec semper lorem quam in massa.
Tasklists
=== "Example"
- [X] item 1
* [X] item A
* [ ] item B
more text
+ [x] item a
+ [ ] item b
+ [x] item c
* [X] item C
- [ ] item 2
- [ ] item 3
=== "Code"
- [X] item 1 * [X] item A * [ ] item B more text + [x] item a + [ ] item b + [x] item c * [X] item C - [ ] item 2 - [ ] item 3