12 KiB
Material for MkDocs
https://squidfunk.github.io/mkdocs-material/
Installer Material
pip install --upgrade mkdocs-material
Installing Python-Markdown
pip install markdown
pip install git+https://github.com/Python-Markdown/markdown.git
pip install pymdown-extensions
pipx
pipx inject mkdocs mkdocs-material mkdocs-material-extensions mkdocs-minify-plugin mkdocs-git-revision-date-localized-plugin mkdocs-pdf-export-plugin fontawesome_markdown markdown pymdown-extensions
Abbreviations
https://squidfunk.github.io/mkdocs-material/reference/abbreviations/
markdown_extensions:
- abbr
- pymdownx.snippets
The HTML specification is maintained by the W3C.
*[HTML]: Hyper Text Markup Language *[W3C]: World Wide Web Consortium
Glossary
markdown_extensions:
- abbr
- pymdownx.snippets
The HTML specification is maintained by the W3C. --8<-- "includes/abbreviations.md"
Admonition
https://squidfunk.github.io/mkdocs-material/reference/admonitions/
markdown_extensions:
- admonition
- pymdownx.details
- pymdownx.superfences
Note:
!!! note
!!! note
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
??? note
??? note
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.
???+ note
???+ note
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.
Inline blocks
Aligné à droite:
!!! info inline end
!!! info inline end
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.
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.
Aligné à gauche:
!!! info inline
!!! info inline
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.
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.
Titre personnalisé:
!!! note "Phasellus posuere in sem ut cursus"
!!! note "Phasellus posuere in sem ut cursus"
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.
Sans titre:
!!! note ""
!!! note ""
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.
Supported types
info todo
!!! info "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.
abstract summary tldr
!!! abstract "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.
tip hint important
!!! tip "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.
success check done
!!! success "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.
question help faq
!!! question "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.
warning caution attention
!!! warning "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.
failure fail missing
!!! failure "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.
danger error
!!! danger "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.
bug
!!! bug "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.
example
!!! example "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.
quote cite
!!! quote "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.
Annotations
https://squidfunk.github.io/mkdocs-material/reference/annotations/
Buttons
https://squidfunk.github.io/mkdocs-material/reference/buttons/
Code blocks
https://squidfunk.github.io/mkdocs-material/reference/code-blocks/
markdown_extensions:
- pymdownx.highlight:
anchor_linenums: true
- pymdownx.inlinehilite
- pymdownx.snippets
- pymdownx.superfences
Add a title
<shortcode> title="<custom title>"
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]
Add line number
<shortcode> linenums="<start>"
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]
Highlighting specific lines
<shortcode> hl_lines="2 4"
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]
Highlighting inline code blocks
#!<sortcode>
The #!python range() function is used to generate a sequence of numbers.
Content tabs
https://squidfunk.github.io/mkdocs-material/reference/content-tabs/
Data tables
https://squidfunk.github.io/mkdocs-material/reference/data-tables/
markdown_extensions:
- tables
Aligner une colonne à gauche
| Method | Description |
| :---------- | :----------------------------------- |
| `GET` | :material-check: Fetch resource |
| `PUT` | :material-check-all: Update resource |
| `DELETE` | :material-close: Delete resource |
| Method | Description |
|---|---|
GET |
:material-check: Fetch resource |
PUT |
:material-check-all: Update resource |
DELETE |
:material-close: Delete resource |
Aligner une colonne au centre
| Method | Description |
| :---------: | :----------------------------------: |
| `GET` | :material-check: Fetch resource |
| `PUT` | :material-check-all: Update resource |
| `DELETE` | :material-close: Delete resource |
| Method | Description |
|---|---|
GET |
:material-check: Fetch resource |
PUT |
:material-check-all: Update resource |
DELETE |
:material-close: Delete resource |
Aligner une colonne à droite
| Method | Description |
| ----------: | -----------------------------------: |
| `GET` | :material-check: Fetch resource |
| `PUT` | :material-check-all: Update resource |
| `DELETE` | :material-close: Delete resource |
| Method | Description |
|---|---|
GET |
:material-check: Fetch resource |
PUT |
:material-check-all: Update resource |
DELETE |
:material-close: Delete resource |
Trier une colonne
extra_javascript:
- https://cdnjs.cloudflare.com/ajax/libs/tablesort/5.2.1/tablesort.min.js
- javascripts/tablesort.js
| Method | Description |
|---|---|
GET |
:material-check: Fetch resource |
PUT |
:material-check-all: Update resource |
DELETE |
:material-close: Delete resource |
Diagrams
https://squidfunk.github.io/mkdocs-material/reference/diagrams/
Footnotes
https://squidfunk.github.io/mkdocs-material/reference/footnotes/
markdown_extensions:
- footnotes
Adding footnote references
Lorem ipsum[^1] dolor sit amet, consectetur adipiscing elit.[^2]
Lorem ipsum1 dolor sit amet, consectetur adipiscing elit.2
Adding footnote content
[^1]: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
[^2]:
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.
Formatting
https://squidfunk.github.io/mkdocs-material/reference/formatting/
markdown_extensions:
- pymdownx.critic
- pymdownx.caret
- pymdownx.keys
- pymdownx.mark
- pymdownx.tilde
Highlighting changes
Text can be {--deleted--} and replacement text {++added++}. This can also be
combined into {~~one~>a single~~} operation. {==Highlighting==} is also
possible {>>and comments can be added inline<<}.
{==
Formatting can also be applied to blocks by putting the opening and closing
tags on separate lines and adding new lines between the tags and the content.
==}
Text can be {--deleted--} and replacement text {++added++}. This can also be
combined into {one>a single
{==
Formatting can also be applied to blocks by putting the opening and closing tags on separate lines and adding new lines between the tags and the content.
==}
Highlighting text
- ==This was marked==
- ^^This was inserted^^
- ~~This was deleted~~
- ==This was marked==
- ^^This was inserted^^
This was deleted
Sub- and superscripts
- H~2~0
- A^T^A
- H
20 - A^T^A
Keys
++ctrl+alt+del++
++cmd+alt+"Ü"++
++cmd++
++ctrl+alt+"My Special Key"++
++cmd+alt+"Ü"++
++cmd++