Content tabs Material

Syntax

Form	Syntax	Usage
Onglet	`=== "Title"`	Alternative content.
Icon	`=== ":material-code-tags: Syntax"`	Icon in the label.
Code	Indented fence under a tab	Snippet per language.
Lists	Lists indentees	Content variants.
Imbrication	Tabs inside tabs	Support based on indentation.

Code blocks

SyntaxResult

~~~ py linenums="1"
print("Hello world")
~~~

~~~ js linenums="1"
console.log("Hello world");
~~~

print("Hello world")

console.log("Hello world");

Lists

SyntaxResult

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

Unordered listOrdered list

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

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

Mixed content

SyntaxResult

=== ":material-file-document-outline: Preview"

    The panel can contain text, a list, and a code block.

    * API
    * CLI
    * Interface web

    ``` yaml title="mkdocs.yml"
    theme:
      name: material
    ```

=== ":material-information-outline: Notes"

    Another panel can stay purely editorial.

    > Content tabs reuse the same `=== "Label"` syntax.

PreviewNotes

The panel can contain text, a list, and a code block.

API
CLI
Interface web

mkdocs.yml

theme:
  name: material

Another panel can stay purely editorial.

Content tabs reuse the same === "Label" syntax.