5.8 KiB
hide
| hide | |
|---|---|
|
Examples page
Admonitions
!!! note "Phasellus posuere in sem ut cursus"
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
massa, nec semper lorem quam in massa.
Annotations
Lorem ipsum dolor sit amet, (1) consectetur adipiscing elit. { .annotate }
- :man_raising_hand: I'm an annotation! I can contain
code, formatted text, images, ... basically anything that can be expressed in Markdown.
!!! note annotate "Phasellus posuere in sem ut cursus (1)"
Lorem ipsum dolor sit amet, (2) consectetur adipiscing elit. Nulla et
euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo
purus auctor massa, nec semper lorem quam in massa.
- :man_raising_hand: I'm an annotation!
- :woman_raising_hand: I'm an annotation as well!
Buttons
Subscribe to our newsletter{ .md-button .md-button--primary } Send :fontawesome-solid-paper-plane:{ .md-button }
Code blocks
def bubble_sort(items):
for i in range(len(items)):
for j in range(len(items) - 1 - i):
if items[j] > items[j + 1]:
items[j], items[j + 1] = items[j + 1], items[j]
theme:
features:
- content.code.annotate # (1)
- :man_raising_hand: I'm a code annotation! I can contain
code, formatted text, images, ... basically anything that can be written in Markdown.
def bubble_sort(items):
for i in range(len(items)):
for j in range(len(items) - 1 - i):
if items[j] > items[j + 1]:
items[j], items[j + 1] = items[j + 1], items[j]
def bubble_sort(items):
for i in range(len(items)):
for j in range(len(items) - 1 - i):
if items[j] > items[j + 1]:
items[j], items[j + 1] = items[j + 1], items[j]
When InlineHilite is enabled, syntax highlighting can be applied to inline code blocks by prefixing them with a shebang, i.e. #!, directly followed by the corresponding language shortcode.
The #!python range() function is used to generate a sequence of numbers.
Content tabs
=== "C"
``` c
#include <stdio.h>
int main(void) {
printf("Hello world!\n");
return 0;
}
```
=== "C++"
``` c++
#include <iostream>
int main(void) {
std::cout << "Hello world!" << std::endl;
return 0;
}
```
=== "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
!!! example
=== "Unordered List"
``` markdown
* Sed sagittis eleifend rutrum
* Donec vitae suscipit est
* Nulla tempor lobortis orci
```
=== "Ordered List"
``` markdown
1. Sed sagittis eleifend rutrum
2. Donec vitae suscipit est
3. Nulla tempor lobortis orci
```
Data tables
| Method | Description |
|---|---|
GET |
:material-check: Fetch resource |
PUT |
:material-check-all: Update resource |
DELETE |
:material-close: Delete resource |
Diagrams
Flow chart
graph LR
A[Start] --> B{Error?};
B -->|Yes| C[Hmm...];
C --> D[Debug];
D --> B;
B ---->|No| E[Yay!];
Sequence diagram
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 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
Footnotes
Text with footnote references
Lorem ipsum1 dolor sit amet, consectetur adipiscing elit.2
Formatting
Highlighting changes
Text can be {--deleted--} and replacement text {++added++}. This can also be
combined into {one>a single
{==
Formatting can also be applied to blocks by putting the opening and closing tags on separate lines and adding new lines between the tags and the content.
==}
Highlighting text
- ==This was marked (highlight)==
- ^^This was inserted (underline)^^
This was deleted (strikethrough)
Sub- and superscripts
- H
2O - A^T^A
Adding keyboard keys
++ctrl+alt+del++