Skip to content
Snippets Groups Projects
Code owners
Assign users and groups as approvers for specific file changes. Learn more.
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" !This is image subtitle === "Code" markdown ![!This is image subtitle](images/example_image.jpg)

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