MkDocs Material Feature Demo

This page demonstrates all the available features enabled in this MkDocs Material setup.

Typography

Headers

H1 Header

H2 Header

H3 Header

H4 Header

H5 Header

H6 Header

Text Formatting

This is bold text and this is italic text. You can also use bold italic.

This is inline code within a sentence.

~~Strikethrough text~~ is also supported.

Links

External link to Anthropic

Internal link to Setup

Lists

Unordered List

Item 1
Item 2
Nested item 2.1
Nested item 2.2
Item 3

Ordered List

First item
Second item
Nested item 2.1
Nested item 2.2
Third item

Task Lists (Interactive Checkboxes)

These checkboxes are interactive! Click them to check/uncheck. State is saved to browser localStorage.

Code Blocks

Inline Code

Use inline code for short snippets.

Code Block with Syntax Highlighting

package main

import "fmt"

func main() {
    fmt.Println("Hello, World!")
}

interface User {
    name: string;
    age: number;
}

const greet = (user: User): string => {
    return `Hello, ${user.name}!`;
};

# Shell commands
docker compose up -d
nvim ~/.config/nvim/init.lua

Tables

Feature	Status	Priority
Neovim	✅ Configured	High
Docker	✅ Installed	High
Claude Code	✅ Integrated	High
NoMachine	🚧 WIP	Medium

Table with Alignment

Left Aligned	Center Aligned	Right Aligned
Item 1	Item 2	Item 3
Data A	Data B	Data C

Admonitions

Admonitions provide visual callouts for important information.

Note

This is a note admonition. Use it for general information.

Info

This is an info admonition. Similar to note, but with a different icon.

Tip

This is a tip admonition. Use it for helpful suggestions.

Warning

This is a warning admonition. Use it to highlight potential issues.

Danger

This is a danger admonition. Use it for critical warnings.

Collapsible Admonition

This admonition starts collapsed. Click the title to expand it!

You can put any markdown content inside: - Lists - Bold text - code

Expanded by Default

This admonition starts expanded but can be collapsed.

Mermaid Diagrams

Flowchart

graph TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Action 1]
    B -->|No| D[Action 2]
    C --> E[End]
    D --> E

Sequence Diagram

sequenceDiagram
    User->>+API: Request
    API->>+Database: Query
    Database-->>-API: Data
    API-->>-User: Response

State Diagram

stateDiagram-v2
    [*] --> Idle
    Idle --> Processing: Start
    Processing --> Success: Complete
    Processing --> Failed: Error
    Success --> [*]
    Failed --> Idle: Retry

Gantt Chart

gantt
    title Project Timeline
    dateFormat YYYY-MM-DD
    section Phase 1
    Setup Environment    :done, 2025-10-01, 7d
    Install Tools        :done, 2025-10-08, 5d
    section Phase 2
    Development          :active, 2025-10-13, 14d
    Testing              :2025-10-27, 7d