Material for MkDocs Components¶

This page provides a list of the most common components and features available in the Material for MkDocs theme, along with examples.

Theming and Customization¶

These components are configured in your mkdocs.yml file.

Color Schemes: Light and dark modes, with customizable primary and accent colors.
Typography: Customize fonts and font sizes.
Icons and Logo: Set a logo and favicon, and use icons from Material Design and FontAwesome.
Custom CSS and JavaScript: Add your own custom styling and scripts.
Theme Extension: Override and extend the theme's templates for advanced customization.

Admonitions are useful for highlighting specific information.

Example:

!!! note "This is a note"
    This is the content of the note.

!!! warning "This is a warning"
    This is the content of the warning.

You can create styled buttons in your content.

Example:

[This is a button](https://example.com){ .md-button }

Syntax highlighting for a variety of languages is supported.

Example:

```python
def hello_world():
    print("Hello, world!")
```

Group content into tabs.

Example:

=== "Tab 1"
    This is the content of tab 1.

=== "Tab 2"
    This is the content of tab 2.

Create tables using Markdown.

Example:

| Header 1 | Header 2 |
| -------- | -------- |
| Cell 1   | Cell 2   |
| Cell 3   | Cell 4   |

Embed diagrams using Mermaid.

Example:

```mermaid
graph TD
    A[Start] --> B{Is it?};
    B -- Yes --> C[OK];
    C --> D[End];
    B -- No --> E[Don't];
    E --> D[End];
```

Add footnotes to your content.

Example:

This is some text with a footnote.[^1]

[^1]: This is the footnote.

Embed icons and emojis in your content.

Example:

:smile:
:material-home:

For more detailed information and configuration options, please refer to the official Material for MkDocs documentation.