Skip to content

Useage

Metadata⚓︎

Each page has configurable metadata, that can be definded at the beggining as flollows:

---
title: Useage
subtitle: Material for Mkdocs Insiders only
description: This page contains most of the markdown options offered by Material Insiders. 
status: new (I don't use those)
---

Admonitions⚓︎

Note

This is a simple note.

This is a note without title.

This is a note with a title and a body

This is the body of the note with a title and a body.

Notes can nest anything

Like other notes

Or code blocks
!!! note "Notes can nest anything"
    !!! example "Like other notes"
This is a collapsible note

Its body is hidden.

This is an un-collapsed collapsible note

Its body is visible by default.

This note is inline, at the end of the line

Note

Abstract

Info

Tip

Success

Question

Warning

Failure

Danger

Bug

Example

Quote

Annotations⚓︎

You can annotate text (1)

  1. Annotations can nest anything like code blocs or admonitions.

Phasellus posuere in sem ut cursus (1)

  1. Like here !

Buttons⚓︎

Primary button Peasant button

Code⚓︎

This is inline code

This is a code block
Full-option block
1
2
3
4
5
if (a == b)
{
    Tim = llama // (1)!
    // This is highlighted
}
  1. Place ! after the annotation to make the comment character disappear !

Content tabs⚓︎

This is some content

This is some other content

Content tabs can be liked. For example, Selecting "B" will select it for all content tabs.

You shouldn't see this if you selected "B"

You should see this if you selected "B".

You can nest everything inside tabs, and tabs can be nested inside everything.

Tables⚓︎

Simple Table
Sugar Bad
Water Good
Left-aligned Middle-aligned Right-aligned
Test Test Test

Diagrams⚓︎

Material allows some neat diagrams but I don't really use those.

Foornotes⚓︎

The footnote is at the foot of the page 1.

With Insiders they can be displayed as tooltips.

Formatting⚓︎

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.
  • This was marked (highlight)
  • This was inserted (underline)

  • This was deleted (strikethrough)

  • H2O

  • ATA

Ctrl+Alt+Del

Grids⚓︎

  • HTML for content and structure
  • JavaScript for interactivity
  • CSS for text running out of boxes
  • Internet Explorer ... huh?

  • Set up in 5 minutes

    Install mkdocs-material with pip and get up and running in minutes

    Getting started

  • It's just Markdown

    Focus on your content and generate a responsive and searchable static site

    Reference

  • Made to measure

    Change the colors, fonts, language, icons, logo and more with a few lines

    Customization

  • Open Source, MIT

    Material for MkDocs is licensed under MIT and available on [GitHub]

    License

HTML for content and structure

JavaScript for interactivity

CSS for text running out of boxes

Internet Explorer ... huh?

  • Sed sagittis eleifend rutrum
  • Donec vitae suscipit est
  • Nulla tempor lobortis orci
  1. Sed sagittis eleifend rutrum
  2. Donec vitae suscipit est
  3. Nulla tempor lobortis orci
Content tabs
=== "Unordered list"

    * Sed sagittis eleifend rutrum
    * Donec vitae suscipit est
    * Nulla tempor lobortis orci

=== "Ordered list"

    1. Sed sagittis eleifend rutrum
    2. Donec vitae suscipit est
    3. Nulla tempor lobortis orci

Emojis 😄⚓︎

Search emojis

Images⚓︎

Image

Image with alignment

Image with caption
Image caption

Image with lazy loading

Image title Image title

Lists⚓︎

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

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

    2. Morbi eget dapibus felis. Vivamus venenatis porttitor tortor sit amet rutrum. Pellentesque aliquet quam enim, eu volutpat urna rutrum a.

      1. Mauris dictum mi lacus
      2. Ut sit amet placerat ante
      3. 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

Tooltips⚓︎

Tooltips⚓︎

Hover me

For other objects, proceed as follows: 😄

Abbreviations⚓︎

The HTML specification is maintained by the W3C.

  1. Duh. ↩