Tools

Guide

https://squidfunk.github.io/mkdocs-material/reference/

Math

Coding

1
2
3
4
5
6
7
8

h.A = A; //New Heap
h.size = A.lenght;
Build_Max_Heap(h); //make a heap from an array
for( i = h.A.length-1; i > 1 ; i--) {
  exchange_slots(A,0,i);
  h.size = h.size – 1;
  Max-heapify(h,0); //make node i the highest priority of the sub tree
}

if __name__ == "__main__":
    just_fix_windows_console() #it’s safe to call this function on non-Windows platforms
    CoreLogic()

Content Tabs

#include <stdio.h>

int main(void) {
  printf("Oguri Cap!\n");
  return 0;
}

#include <iostream>

int main(void) {
  std::cout << "Maruzensky!" << std::endl;
  return 0;
}

Admonitions

Annotations

A golden chest on the horizon, everyone amazed. (1)
{ .annotate }

1. This look shiny!

title: "Example" # (1)!

Buttons

Button + Emoji

Button

Data tables

Diagrams

Flowcharts

graph LR
  A[Start] --> B{Error?};
  B -->|Yes| C[Hmm...];
  C --> D[Debug];
  D --> B;
  B ---->|No| E[Yay!];

Sequence Diagrams

sequenceDiagram
  autonumber
  Alice->>John: Hello John, how are you?
  loop Healthcheck
      John->>John: Fight against hypochondria
  end
  Note right of John: Rational thoughts!
  John-->>Alice: Great!
  John->>Bob: How about you?
  Bob-->>John: Jolly good!

State Diagrams

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 Diagrams

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 Diagrams

erDiagram
  CUSTOMER ||--o{ ORDER : places
  ORDER ||--|{ LINE-ITEM : contains
  LINE-ITEM {
    string name
    int pricePerUnit
  }
  CUSTOMER }|..|{ DELIVERY-ADDRESS : uses

Extras

Pie charts, Gantt Charts, User Journeys, Git Graphs and Requirement Diagrams

ELK layouts

Footnotes

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.

Highlighting text

• This was marked (highlight)
• This was inserted (underline)
• This was deleted (strikethrough)

Sub- and superscripts

• H₂O
• A^TA

keyboard keys

Ctrl+Alt+Del

Grids

Card Grids

Card grid, complex example (Hide the bars)

Block syntax

Generic Grids

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

Icons, Emojis

Colors

Animations

Images

• Lazy loading
• Alignment
• Captions
• Light and dark mode

Lists

• Unordered lists can be written by prefixing a line with a -, * or + list marker, all of which can be used interchangeably.
• Ordered lists must start with a number immediately followed by a dot. The numbers do not need to be consecutive and can be all set to 1.

• When Definition Lists is enabled, lists of arbitrary key-value pairs

  Lorem ipsum dolor sit amet

  Sed sagittis eleifend rutrum. Donec vitae suscipit est. Nullam tempus tellus non sem sollicitudin, quis rutrum leo facilisis.

• When Tasklist is enabled, unordered list items can be prefixed with [ ] to render an unchecked checkbox or [x] to render a checked checkbox

• 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

[Hover me](https://github.com/ "I'm a tooltip!") # idk https://example.com

[Hover me][example]

  [example]: https://github.com/ "I'm a tooltip!" # idk https://example.com

:material-information-outline:{ title="Important information" }

The HTML specification is maintained by the W3C.

[HTML]: Hyper Text Markup Language
[W3C]: World Wide Web Consortium