Skip to content

MkDocs Feature Showcase

This page demonstrates the enhanced features available in our documentation portal.

Mermaid Diagrams

Create interactive diagrams for architecture, workflows, and more:

flowchart LR
    A[Start] --> B{Is it working?}
    B -->|Yes| C[Great!]
    B -->|No| D[Troubleshoot]
    D --> E[Check logs]
    E --> F[Fix issue]
    F --> B

Tooltips

Hover over the text to see the tooltip: Tooltip Text.

Admonitions

Note Title

This is a note admonition that stands out from the rest of the content.

Pro Tip

Here's a helpful tip for users.

Caution

Be careful when performing this action.

Collapsible Admonitions

Click to expand

This content is hidden by default but can be expanded by clicking.

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

Text Highlighting

You can highlight important text using the mark extension.

Keyboard Keys

Press Ctrl+Alt+Del to restart your computer.

Task Lists

  • This task is complete
  • This task is incomplete
  • Another incomplete task

Footnotes

Here's a sentence with a footnote reference1.

Tables with Formatting

Method Description Complexity
GET Retrieve data Simple
POST Submit data Moderate
DELETE Remove data Complex

Annotations

Here's a code block with annotations:

def hello_world():  # (1)
    print("Hello, world!")  # (2)
    return True  # (3)
  1. Function definition
  2. Print statement
  3. Return value

Interactive Features

Content Tabs

Content tabs allow you to organize platform-specific information in a compact way:

# Get system information
Get-ComputerInfo

# List all running services
Get-Service | Where-Object {$_.Status -eq "Running"}

# Get system information
uname -a
lscpu

# List all running services
systemctl list-units --type=service --state=running

# Get system information
system_profiler SPHardwareDataType

# List all running services
launchctl list

Tabbed Content with Icons

Windows-specific instructions here.

Linux-specific instructions here.

macOS-specific instructions here.

The following tabs are synchronized across the page. Clicking on a tab with the same label will select that tab in all tab blocks.

This is content for Tab 1.

When you click "Tab 2" below, this tab will also switch.

This is content for Tab 2.

Notice how all "Tab 2" instances activate together.

This is content for Tab 3.

Here's another set of tabs that will synchronize with the ones above:

Different content, but still Tab 1.

Clicking Tab 3 above will also select Tab 3 here.

Different content, but still Tab 2.

Different content, but still Tab 3.

This synchronization is enabled by the content.tabs.link feature.

Buttons

Get Started Learn More

Icons

Information Success Warning Error

HTML Details

Click to expand

This content is hidden until expanded.

def hidden_code():
    return "This code is hidden by default"

Smart Symbols

  • Copyright: (C)
  • Trademark: (TM)
  • Registered trademark: (R)
  • Plus-minus: +-

Code Highlighting with Line Focus

1
2
3
4
def highlight_example():
    # These lines are highlighted
    print("This line is highlighted")
    return "This line is not highlighted"

  1. This is the footnote content. ↩