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.

Glossary¶

markdown_extensions:
  - abbr
  - pymdownx.snippets

The HTML specification is maintained by the W3C.

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

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

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"

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 ""

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

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

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

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

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

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

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

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

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

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

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

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.

markdown_extensions:
  - pymdownx.highlight:
      anchor_linenums: true
  - pymdownx.inlinehilite
  - pymdownx.snippets
  - pymdownx.superfences

Add a title¶

<shortcode> title="<custom title>"

bubble_sort.py

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 ipsum¹ dolor sit amet, consectetur adipiscing elit.²

Adding footnote content¶

[^1]: Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Footnote 1

[^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.

Footnote 2

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 onea 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 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.

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₂0
A^TA

Keys¶

++ctrl+alt+del++

++cmd+alt+"&Uuml;"++

++cmd++

Ctrl+Alt+My Special Key

Cmd+Alt+Ü

Cmd

suite...:material-arrow-right-top:

¶

Lorem ipsum dolor sit amet, consectetur adipiscing elit. ↩
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. ↩

Dernière mise à jour: March 4, 2022

Material for MkDocs¶

Installer Material¶

Installing Python-Markdown¶

pipx¶

Abbreviations¶

Glossary¶

Admonition¶

Note:¶

Collapsible blocks¶

Inline blocks¶

Aligné à droite:¶

Aligné à gauche:¶

Titre personnalisé:¶

Sans titre:¶

Supported types¶

info todo¶

Annotations¶

Buttons¶

Code blocks¶

Add a title¶

Add line number¶

Highlighting specific lines¶

Highlighting inline code blocks¶

Content tabs¶

Data tables¶

Aligner une colonne à gauche¶

Aligner une colonne au centre¶

Aligner une colonne à droite¶

Trier une colonne¶

Diagrams¶

Footnotes¶

Adding footnote references¶

Adding footnote content¶

Formatting¶

Highlighting changes¶

Highlighting text¶

Sub- and superscripts¶

Keys¶

¶

`info` `todo`¶