MkDocs

python -m venv venv
source venv/bin/activate
pip --version

pip install mkdocs-material

mkdocs new .
mkdocs serve

Plugins

pip install mkdocs-minify-plugin
pip install mkdocs-glightbox

Emojis

• Icons, Emojis

References

• Create Code Documentation With MkDocs Material Theme
• squidfunk/mkdocs-material

Examples

Admonitions

Annotations

Lorem ipsum dolor sit amet, (1) consectetur adipiscing elit.

1. I'm an annotation! I can contain code, formatted text, images, ... basically anything that can be expressed in Markdown.

Buttons

Subscribe to our newsletter Send

Code blocks

# Code block content

1
2
3
4
5

def bubble_sort(items):
    for i in range(len(items)):
        for j in range(len(items) - 1 - i):
            if items[j] > items[j + 1]:
                items[j], items[j + 1] = items[j + 1], items[j]

Customization

• Additional CSS in docs/stylesheets/extra.css to tweak a specific type of string.
• Additional JavaScript in docs/javascripts/tablesort.js to make data tables sortable.
• Pygments styles
• Pygments languages

Content tabs

echo "Hello bash 1!"

Write-Host "Hello PowerShell 1!"

echo "Hello bash 2!"

Write-Host "Hello PowerShell 2!"

Data tables

Diagrams

Example-1:

graph TD
    A[Hard] -->|Text| B(Round)
    B --> C{Decision}
    C -->|One| D[Result 1]
    C -->|Two| E[Result 2]

Example-2:

graph LR
  A[Start] --> B{Error?};
  B -->|Yes| C[Hmm...];
  C --> D[Debug];
  D --> B;
  B ---->|No| E[Yay!];

Grids

Icons and Emojis

• Material for MkDocs / References / Icons, Emojis

Images

Lists

• item 1
• item B more text
  • item a
  • item b
• item 2

Tooltips