Skip to content

Examples

Image

VRTASS Logo Examples are shamelessly taken from Here, There, and Everywhere, including from: https://github.com/james-willett/material-mkdocs-youtube-2024/, https://squidfunk.github.io/mkdocs-material/.

Admonitions

Note

note

More Admonitions

abstract, bug, danger, example, failure, info, note, question, quote, success, tip, warning.

Collapsible Callout of Emojis

✈ ðŸ‘― ðŸ’Ē ⚓ 😠 ðŸ˜ē ðŸĶ‡ 😊 ðŸĶī ðŸŦ 👏ðŸŧ ðŸ˜Ē ðŸ˜ĩ 😞 😑 ðŸĪŪ ðŸ˜Ļ ðŸ‡ŪðŸ‡Đ ðŸ˜ģ ðŸī 😀 😁 😍 😇 😂 😗 😚 😘 😙 😆 😷 😐 ðŸĨ· ⛔ ðŸ˜ķ ðŸĨģ 😔 ðŸ˜Ą ☚ ðŸĪĢ ðŸĶ• ðŸ˜ą ðŸ˜ī 😊 🙂 😄 😏 ðŸĪ§ ⭐ ☊ 😛 😝 😜 😎 🙃 ðŸ˜Đ 😋 ðŸĪŠ

Code Blocks

Line Numbers

add_numbers.py
1
2
3
4
5
6
7
# Function to add two numbers
def add_two_numbers(num1, num2):
    return num1 + num2

# Example usage
result = add_two_numbers(5, 3)
print('The sum is:', result)

Line Numbers and HighLight

add_numbers.py
1
2
3
4
5
6
7
# Function to add two numbers
def add_two_numbers(num1, num2):
    return num1 + num2

# Example usage
result = add_two_numbers(5, 3)
print('The sum is:', result)

No Line Numbers

add_numbers.py
# Function to add two numbers
def add_two_numbers(num1, num2):
    return num1 + num2

# Example usage
result = add_two_numbers(5, 3)
print('The sum is:', result)

Code Blocks in Content Tabs

#!/bin/bash
echo "Hello World"
hello.c
#include <stdio.h>

void main(void) {
    printf("Hello MkDocs!\n");
}

function main() {
    console.log("Hello world!");
}

main();

def main():
    print("Hello world!")

if __name__ == "__main__":
    main()

Custom Variable

This is a custom variable from mkdocs.yml.

Block Quote Border

Gressu si fontibus Phrygios audire iussa tremensque regis. quaesitae innixa, rebus portenditur, adhuc alii reges quam facto illud iuvenci. Fuerim nobiliumque, mota fratrum: dives raptamque fuga inmensum movent nece faciemque non.

List

  • Level 1
    • Level 2
      • Level 3
        • Level 4

Diagrams

Flow Chart

graph LR
  A[Start] --> B{Failure?};
  B -->|Yes| C[Investigate...];
  C --> D[Debug];
  D --> B;
  B ---->|No| E[Success!];

Sequence Diagram

sequenceDiagram
  autonumber
  Server->>Terminal: Send request
  loop Health
      Terminal->>Terminal: Check for health
  end
  Note right of Terminal: System online
  Terminal-->>Server: Everything is OK
  Terminal->>Database: Request customer data
  Database-->>Terminal: Customer data

State Diagram

stateDiagram-v2
  state fork_state <<fork>>
    [*] --> fork_state
    fork_state --> State2
    fork_state --> State3

    state join_state <<join>>
    State2 --> join_state
    State3 --> join_state
    join_state --> State4
    State4 --> [*]

Class Diagram

classDiagram
  Person <|-- Student
  Person <|-- Professor
  Person : +String name
  Person : +String phoneNumber
  Person : +String emailAddress
  Person: +purchaseParkingPass()
  Address "1" <-- "0..1" Person:lives at
  class Student{
    +int studentNumber
    +int averageMark
    +isEligibleToEnrol()
    +getSeminarsTaken()
  }
  class Professor{
    +int salary
  }
  class Address{
    +String street
    +String city
    +String state
    +int postalCode
    +String country
    -validate()
    +outputAsLabel()  
  }

Entity-Relationship Diagram

erDiagram
  CUSTOMER ||--o{ ORDER : places
  ORDER ||--|{ LINE-ITEM : contains
  LINE-ITEM {
    string name
    int pricePerUnit
  }
  CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
REVISION: Thu 05 Dec 2024 21:00 

REVISION: Thu 05 Dec 2024 21:00
REVISION: Thu 05 Dec 2024 17:00
REVISION: Tue 03 Dec 2024 23:00
REVISION: Tue 03 Dec 2024 18:00
REVISION: Tue 03 Dec 2024 11:00
STARTING: Tue 03 Dec 2024 09:00