Welcome to MkDocs¶
For full documentation visit material for mkdocs
Commands¶
mkdocs new [dir-name]- Create a new project.mkdocs serve- Start the live-reloading docs server.mkdocs build- Build the documentation site.mkdocs -h- Print help message and exit.
Project layout¶
mkdocs.yml # The configuration file.
docs/
index.md # The documentation homepage.
... # Other markdown pages, images and other files.
Color¶
0.2.0 · Default: indigo
The primary color is used for the header, the sidebar, text links and several
other components. In order to change the primary color, set the following value
in mkdocs.yml to a valid color name:
Click on a tile to change the primary color:
mbuh1¶
The HTML specification is maintained by the W3C.
theme:
palette: # (1)!
- scheme: default
toggle:
icon: material/toggle-switch-off-outline # (2)!
name: Switch to dark mode
- scheme: slate # (3)!
toggle:
icon: material/toggle-switch
name: Switch to light mode
-
Note that the
theme.palettesetting is now defined as a list. -
Enter a few keywords to find the perfect icon using our [icon search] and click on the shortcode to copy it to your clipboard:
-
With 2 (color schemes) x 21 (primary colors) x 17 (accent color) = 714 combinations, it's impossible to ensure that all configurations provide a good user experience (e.g. yellow on light background). Make sure that the color combination of your choosing provides enough contrast and tweak CSS variables where necessary.
The following properties must be set for each toggle:
icon-
Default: none · Required – This property must point to a valid icon path referencing any icon bundled with the theme, or the build will not succeed. Some popular combinations:
- + –
material/toggle-switch-off-outline+material/toggle-switch - + –
material/weather-sunny+material/weather-night - + –
material/eye-outline+material/eye - + –
material/lightbulb-outline+material/lightbulb - + –
material/brightness-4+material/brightness-7
- + –
name-
Default: none · Required – This property is used as the toggle's
titleattribute and should be set to a discernable name to improve accessibility. It will appear on mouse hover.
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.
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.
Let's say you're YouTube, and want to set the primary color to your brand's palette. Just add:
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.
Phasellus posuere in sem ut cursus (1)
Lorem ipsum dolor sit amet, (2) consectetur adipiscing elit. Nulla et euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor massa, nec semper lorem quam in massa.
I'm an annotation!
I'm an annotation as well!
note | abstract, summary, tldr | info, todo | tip, hint, important | success, check, done | question, help, faq | warning, caution, attention | failure, fail, missing | danger, error | bug | example | quote, cite
Lorem ipsum dolor sit amet, (1) consectetur adipiscing elit.
{ .annotate }
1. :man_raising_hand: I'm an annotation! I can contain `code`, __formatted
text__, images, ... basically anything that can be expressed in Markdown.
Lorem ipsum dolor sit amet, (1) consectetur adipiscing elit.
- I'm an annotation! I can contain
code, formatted text, images, ... basically anything that can be written in Markdow.
Lorem ipsum dolor sit amet, (1) consectetur adipiscing elit.
-
I'm an annotation! (1)
- I'm an annotation as well!
Lorem ipsum dolor sit amet, (1) consectetur adipiscing elit.
- I'm an annotation!
Phasellus posuere in sem ut cursus (1)
- I'm an annotation as well!
Lorem ipsum dolor sit amet, (1) consectetur adipiscing elit.
- I'm an annotation!
- I'm a code annotation! I can contain
code, formatted text, images, ... basically anything that can be written in Markdown.
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]
- Tes
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
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
| Method | Description |
|---|---|
GET |
Fetch resource |
PUT |
Update resource |
DELETE |
Delete resource |
graph LR
A[Start] --> B{Error?};
B -->|Yes| C[Hmm...];
C --> D[Debug];
D --> B;
B ---->|No| E[Yay!];sequenceDiagram
Alice->>John: Hello John, how are you?
loop Healthcheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!stateDiagram-v2
state fork_state <<fork>>
[*] --> fork_state
fork_state --> State2
fork_state --> State3
state join_state <<join>>
State2 --> join_state
State3 --> join_state
join_state --> State4
State4 --> [*]classDiagram
Person <|-- Student
Person <|-- Professor
Person : +String name
Person : +String phoneNumber
Person : +String emailAddress
Person: +purchaseParkingPass()
Address "1" <-- "0..1" Person:lives at
class Student{
+int studentNumber
+int averageMark
+isEligibleToEnrol()
+getSeminarsTaken()
}
class Professor{
+int salary
}
class Address{
+String street
+String city
+String state
+int postalCode
+String country
-validate()
+outputAsLabel()
}erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
CUSTOMER }|..|{ DELIVERY-ADDRESS : usesLorem ipsum1 dolor sit amet, consectetur adipiscing elit.2
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.
- H20
- ATA
Ctrl+Alt+Del
-
Nulla et rhoncus turpis. Mauris ultricies elementum leo. Duis efficitur accumsan nibh eu mattis. Vivamus tempus velit eros, porttitor placerat nibh lacinia sed. Aenean in finibus diam.
-
Duis mollis est eget nibh volutpat, fermentum aliquet dui mollis.
- Nam vulputate tincidunt fringilla.
-
Nullam dignissim ultrices urna non auctor.
-
Vivamus id mi enim. Integer id turpis sapien. Ut condimentum lobortis sagittis. Aliquam purus tellus, faucibus eget urna at, iaculis venenatis nulla. Vivamus a pharetra leo.
-
Vivamus venenatis porttitor tortor sit amet rutrum. Pellentesque aliquet quam enim, eu volutpat urna rutrum a. Nam vehicula nunc mauris, a ultricies libero efficitur sed.
-
Morbi eget dapibus felis. Vivamus venenatis porttitor tortor sit amet rutrum. Pellentesque aliquet quam enim, eu volutpat urna rutrum a.
- Mauris dictum mi lacus
- Ut sit amet placerat ante
- Suspendisse ac eros arcu
-
Lorem ipsum dolor sit amet-
Sed sagittis eleifend rutrum. Donec vitae suscipit est. Nullam tempus tellus non sem sollicitudin, quis rutrum leo facilisis.
Cras arcu libero-
Aliquam metus eros, pretium sed nulla venenatis, faucibus auctor ex. Proin ut eros sed sapien ullamcorper consequat. Nunc ligula ante.
Duis mollis est eget nibh volutpat, fermentum aliquet dui mollis. Nam vulputate tincidunt fringilla. Nullam dignissim ultrices urna non auctor.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit
- Vestibulum convallis sit amet nisi a tincidunt
- In hac habitasse platea dictumst
- In scelerisque nibh non dolor mollis congue sed et metus
- Praesent sed risus massa
- Aenean pretium efficitur erat, donec pharetra, ligula non scelerisque
Search¶
Tip: Enter some keywords to find icons and emojis and click on the shortcode to copy it to your clipboard.