04-03-2022
This commit is contained in:
590
docs/MkDocs/mkdocs-material.md
Normal file
590
docs/MkDocs/mkdocs-material.md
Normal file
@@ -0,0 +1,590 @@
|
||||
|
||||
|
||||
# Material for MkDocs
|
||||
|
||||
https://squidfunk.github.io/mkdocs-material/
|
||||
|
||||
|
||||
|
||||
### Installer Material
|
||||
|
||||
```bash
|
||||
pip install --upgrade mkdocs-material
|
||||
```
|
||||
|
||||
|
||||
### Installing Python-Markdown
|
||||
|
||||
```bash
|
||||
pip install markdown
|
||||
pip install git+https://github.com/Python-Markdown/markdown.git
|
||||
```
|
||||
|
||||
```bash
|
||||
pip install pymdown-extensions
|
||||
```
|
||||
|
||||
|
||||
|
||||
### pipx
|
||||
|
||||
```bash
|
||||
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/
|
||||
|
||||
```yaml
|
||||
markdown_extensions:
|
||||
- abbr
|
||||
- pymdownx.snippets
|
||||
```
|
||||
|
||||
The HTML specification is maintained by the W3C.
|
||||
|
||||
*[HTML]: Hyper Text Markup Language
|
||||
*[W3C]: World Wide Web Consortium
|
||||
|
||||
|
||||
|
||||
### Glossary
|
||||
|
||||
```yaml
|
||||
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/
|
||||
|
||||
```yaml
|
||||
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/
|
||||
|
||||
```yaml
|
||||
markdown_extensions:
|
||||
- pymdownx.highlight:
|
||||
anchor_linenums: true
|
||||
- pymdownx.inlinehilite
|
||||
- pymdownx.snippets
|
||||
- pymdownx.superfences
|
||||
```
|
||||
|
||||
|
||||
|
||||
#### Add a title
|
||||
|
||||
```
|
||||
<shortcode> title="<custom title>"
|
||||
```
|
||||
|
||||
``` py 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>"
|
||||
```
|
||||
|
||||
``` py linenums="1"
|
||||
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"
|
||||
```
|
||||
|
||||
``` py 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/
|
||||
|
||||
```yam
|
||||
markdown_extensions:
|
||||
- tables
|
||||
```
|
||||
|
||||
#### Aligner une colonne à gauche
|
||||
|
||||
```markdown
|
||||
| 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
|
||||
|
||||
```markdown
|
||||
| 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
|
||||
|
||||
```markdown
|
||||
| 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
|
||||
|
||||
```yaml
|
||||
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/
|
||||
|
||||
```yaml
|
||||
markdown_extensions:
|
||||
- footnotes
|
||||
```
|
||||
|
||||
#### Adding footnote references
|
||||
|
||||
```
|
||||
Lorem ipsum[^1] dolor sit amet, consectetur adipiscing elit.[^2]
|
||||
```
|
||||
|
||||
Lorem ipsum[^1] dolor sit amet, consectetur adipiscing elit.[^2]
|
||||
|
||||
#### Adding footnote content
|
||||
|
||||
```
|
||||
[^1]: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
```
|
||||
|
||||
[^1]: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
|
||||
[Footnote 1](#fn: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.
|
||||
```
|
||||
|
||||
[^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](#fn:2)
|
||||
|
||||
|
||||
|
||||
### Formatting
|
||||
|
||||
https://squidfunk.github.io/mkdocs-material/reference/formatting/
|
||||
|
||||
```yaml
|
||||
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~~} 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~2~0
|
||||
- A^T^A
|
||||
|
||||
#### Keys
|
||||
|
||||
```
|
||||
++ctrl+alt+del++
|
||||
|
||||
++cmd+alt+"Ü"++
|
||||
|
||||
++cmd++
|
||||
```
|
||||
|
||||
++ctrl+alt+"My Special Key"++
|
||||
|
||||
++cmd+alt+"Ü"++
|
||||
|
||||
++cmd++
|
||||
|
||||
|
||||
|
||||
[suite...:material-arrow-right-top:](mkdocs-material-2.md)
|
||||
|
||||
###
|
||||
Reference in New Issue
Block a user