Plugins

docutools will install 3rd party plugins for mkdocs, ready for use right away.

See pyproject.toml , for the packages we depend on.

Size

Those plugins increase the initial download time of documentation, if enabled in mkdocs.yml. Users which stay on your documentation page, having the libs cached at subsequent visits.

Which

• We have pretty much all of these:
  https://squidfunk.github.io/mkdocs-material/reference/abbreviations/.

• And a few of these:
  https://facelessuser.github.io/pymdown-extensions/extensions/superfences/

• Plus some standard markdown extensions, e.g. tables.

• And also our own ones, described in this documentation.

See the mkdocs.yml file to get an overview.

Below a few important extensions - but check the above pages for details on usage:

Admonitions

A hint

this is an admonition.

!!! hint "A hint"
    this is an admonition.

Inline Admonitions

Admonitions can also be rendered as inline blocks (i.e. for sidebars), placing them to the right using the inline + end modifiers, or to the left using only the inline modifier:

inline end inline

Info

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.

The content block we put the admon next to (can be anything, incl. an admonition)

Use inline end to align to the right (left for rtl languages).

Info

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.

The content block we put the admon next to

Use inline to align to the left (right for rtl languages).

Important: admonitions that use the inline modifiers must be declared prior to the content block you want to place them beside. If there's insufficient space to render the admonition next to the block, the admonition will stretch to the full width of the viewport, e.g. on mobile viewports.

Supported types

See https://squidfunk.github.io/mkdocs-material/reference/admonitions/

Developer Tip

See also the md-replace feature, for custom admonitions like this one.

Critic

• This was marked
• This was inserted
• This was deleted

- ==This was marked==
- ^^This was inserted^^
- ~~This was deleted~~

See https://squidfunk.github.io/mkdocs-material/reference/formatting/

Details

Open styled details

Nested details!

And more content again.

???+ note "Open styled details"

    ??? danger "Nested details!"
        And more content again.

Footnotes

Footnotes¹ have a label² and the footnote's content.

Footnotes[^1] have a label[^@#$%] and the footnote's content.

and elsewhere:

[^1]: This is a footnote content.
[^@#$%]: A footnote on the label: "@#$%".

Icons and Emojis

See here for an emoji search box.

• – .icons/material/account-circle.svg
• :fontawesome-regular-laugh-wink: – .icons/fontawesome/regular/laugh-wink.svg
• :octicons-octoface-24: – .icons/octicons/octoface-24.svg
• – Twitter, colorized, using style attr

:fontawesome-brands-linux:
:smile:

- :material-account-circle: – `.icons/material/account-circle.svg`
- :fontawesome-regular-laugh-wink: – `.icons/fontawesome/regular/laugh-wink.svg`
- :octicons-octoface-24: – `.icons/octicons/octoface-24.svg`
- :fontawesome-brands-twitter:{: style="color: #1da1f2" } – Twitter, colorized, using style attr

Keyboard Symbols

This ++ctrl+alt+delete++ is rendered: Ctrl+Alt+Del

Snippets

Allow to embed complex other content into your markdown.

In your mkdocs.yml you can then supply custom base paths, containing e.g. your own abbreviations, libraries or whatever you require on certain pages.

This is a demo. The actual link is provided by an import of a text file (e.g. here docs/links.txt ), loaded via a snippet.

This is [a demo][demo]. 

And elsewhere, e.g. at the bottom embed the links:

--8<--  
links.txt
--8<--  

Note that you can provide, in mkdocs.yml , custom locations for such snippets, i.e. within project.

Style Attributes / Images

Source

![](img/linux.png){: style="height:200px" align=right loading=lazy .zoom }

for the zoom you need the snippet:

Tables

Table header click to sort:

Method	Description
GET	Fetch resource
PUT	Update resource
DELETE	Delete resource

| Method      | Description                          |
| ----------- | ------------------------------------ |
| `GET`       | :material-check:     Fetch resource  |
| `PUT`       | :material-check-all: Update resource |
| `DELETE`    | :material-close:     Delete resource |

Tabs

First TabSecond TabSource

header

First Nested TabSecond Nested Tab

markdown content of first nested tab

markdown content of second nested tab

markdown content of second tab

=== "First Tab"
    
    header

    === "First Nested Tab"

        markdown content of first nested tab
        

    === "Second Nested  Tab"

        markdown content of second nested tab
        

    

=== "Second Tab"

    markdown content of second tab
    

Tasklists

Task List

• item 1
  • item A
  • item B more text
    • item a

Task List

- [X] item 1
    * [X] item A
    * [ ] item B
        more text
        + [x] item a
        + [ ] item b

See https://squidfunk.github.io/mkdocs-material/reference/icons-emojis/ about styling.

Md in HTML

Works even within markdown, i.e. within tabs:

SourceSource

A Markdown paragraph within html setting the background color to purple.

• A list item.
• A second list item.

# and some fenced code within the html
foo = "bar"

    <div markdown="block" style="background-color: purple">

    A *Markdown* paragraph within html setting the background color to purple.

    * A list item.
    * A second list item.

    ```python
    # and some fenced code within the html
    foo = "bar"
    ```

    </div>

---

1. This is a footnote content. ↩

2. A footnote on the label: "@#$%". ↩