Cheatsheet

In this page you will get a quick overview about the most used syntax.

Metadata

File metadata is writen in YAMLat the beginning of every document.

Default (optional) metadata

---
title: My Document
summary: A brief description of my document.
authors:
    - tschinz
date: 2018-07-10
some_url: https://example.com
tags:
    - tag 1
    - tag 2
---

Hide navigation sidebar and / or table of contents

---
hide:
- navigation
- toc
---

Disable macros

```yml
---
render_macros: false
---

Titles

# H1 Title
## H2 Title
### H3 Title
#### H4 Title
##### H5 Title
###### H6 Title

Horizontal Rule

---

H2 Title

H3 Title

H4 Title

H5 Title

H6 Titles

Horizontal Rule

---

Markup

_italic_ *italic*

__bold__ **bold**

^^underline^^

~~strike through~~

==highlight==

`inline code`

==*you* **can** ^^combine^^ `them`==

> blockquote

newline is <br>

---

[//]: # (This may be the most platform independent comment)

<!-- Comment -->
<!--
Multi
Line
Comment
-->

italic italic

bold bold

underline

strike through

highlight

inline code

you can combine them

blockquote

newline is

Links

External Links

Simple link [rust](https://www.rust-lang.org/)
Link with custom title [rust](https://www.rust-lang.org/ "Rust Lang Webpage")
Mail link with emoji [:bug:](mailto:nonofyourbusiness.com)
Link of pdf [Rust Book](https://www.scs.stanford.edu/~zyedidia/docs/rust/rust_book.pdf)

Simple link rust
Link with custom title rust
Mail link with emoji
Link of pdf Rust Book

External Shortlinks

in the mkdocs.yml file there are multiple extras defined:

base_url: https://spl.hevs.io/spl-docs
base_repo: https://gitlab.hevs.ch/SPL/spl-documentation
base_repo_file: https://gitlab.hevs.ch/SPL/spl-documentation/-/blob/master
base_repo_folder: https://gitlab.hevs.ch/SPL/spl-documentation/-/tree/master
spl_git: https://gitlab.hevs.ch/SPL
spl_youtube: https://www.youtube.com/@smartprocesslab2860
spl_webpage: https://spl.hevs.io
spl_docs: https://spl.hevs.io/spl-docs
constellium_docs: https://spl.hevs.io/constellium-docs
hevs_lib_python: https://spl.hevs.io/hevslib-python

This helps to link quickly to the spl webpage or my spl youtube.

- link to [spl docs repo](https://gitlab.hevs.ch/SPL/spl-docs)

- link to folder [_extra](https://gitlab.hevs.ch/SPL/spl-docs/-/blob/master/src/_extra) from spl-docs repo

- link to file [extra.css](https://gitlab.hevs.ch/SPL/spl-docs/-/blob/master/src/_extra/css/extra.css) from spl-docs repo

• link to spl docs repo

• link to folder _extra from spl-docs repo

• link to file extra.css from spl-docs repo

Internal Links

All internal links are relative.

[mkdocs index](index.md)
[mkdocs index](./index.md)
[writing index](../index.md)
[writing index](./../index.md)
[cheatsheets title](./cheatsheet.md#links)

mkdocs index
mkdocs index
writing index
writing index
cheatsheets title

You can also link a pdf file directly

[Guide to Typst](../../typst/docs/guide-to-typst.pdf)

Link Settings

[open in new tab](index.md){.new-tab}
[open in new tab](index.md){:target="_blank"}
Link to pdf download [Rust Book](https://www.scs.stanford.edu/~zyedidia/docs/rust/rust_book.pdf){:download}
Link to pdf download with custom name [Rust Book](https://www.scs.stanford.edu/~zyedidia/docs/rust/rust_book.pdf){:download="Rust-Book.pdf"}

open in new tab
open in new tab
Link to pdf download Rust Book
Link to pdf download with custom name Rust Book

Images

Supported file types are .svg .png .jpg .webp

![](img/magic-wand.svg){width="50px"}
![](img/magic-wand.png){width="50px"}
![](img/magic-wand.jpg){width="50px"}
![](img/magic-wand.webp){width="50px"}

Align + Caption

![](img/magic-wand.svg){align=left width="100px"}
![](img/magic-wand.svg){align=right width="100px"}
![Caption text](img/magic-wand.svg){.center width="100px"}

Side-by-Side Images

![](img/magic-wand.svg){align=left width="45%"}
![](img/magic-wand.svg){align=right width="45%"}
<br><br><br><br><br><br><br><br><br><br><br><br><br>

Official Caption

Image caption

Inline Images

This is ![](img/magic-wand.svg){width="15px"} an inline image.

This is an inline image.

Emoji

Using twemoji and the shortcodes can be looked up at emojipedia.

:handshake:
:crab:
:earth_africa:
:rocket:
:bulb:
:star:

Fontawesome

All image from Fontawesome are possible

:fontawesome-regular-face-laugh-wink:
:fontawesome-brands-rust:
:fontawesome-solid-arrow-right:
:fontawesome-solid-arrow-left:
:fontawesome-solid-arrow-up:
:fontawesome-solid-arrow-down:
:fontawesome-solid-arrow-rotate-right:
:fontawesome-solid-arrow-rotate-left:

Lists

Unordered

- minus item
* asterix item
    - subitem 1
    - subitem 2
+ plus item

• minus item
• asterix item
  • subitem 1
  • subitem 2
• plus item

Ordered

1. item 1
2. item 2
    1. item 2.1
    2. item 2.2
    3. item 2.3
        1. item 2.3.1
        2. item 2.3.2
        3. item 2.3.3
4. item 3

1. item 1
2. item 2
   1. item 2.1
   2. item 2.2
   3. item 2.3
      1. item 2.3.1
      2. item 2.3.2
      3. item 2.3.3
3. item 3

Tasks

- [x] Task 1
    - [ ] Task 1.1
    - [ ] Task 1.2
    - [X] Task 1.3
- [ ] Task 2
- [ ] Task 3

• Task 1
  • Task 1.1
  • Task 1.2
  • Task 1.3
• Task 2
• Task 3

Buttons

[Send :fontawesome-solid-paper-plane:](cheatsheet.md#buttons){ .md-button }

[Send :fontawesome-solid-paper-plane:](#){ .md-button .md-button--primary }

Send

Send

Math

Block math

\[ \operatorname{ker} f=\{g\in G:f(g)=e_{H}\}{\mbox{.}} \]

Inline math is with \(\operatorname{ker} f=\{g\in G:f(g)=e_{H}\}{\mbox{.}}\)

Tables

Method	Description
GET	Fetch resource
PUT	Update resource
DELETE	Delete resource

Method	Description
GET	Fetch resource
PUT	Update resource
DELETE	Delete resource

Method	Description
GET	Fetch resource
PUT	Update resource
DELETE	Delete resource

Method	Description
GET	Fetch resource
PUT	Update resource
DELETE	Delete resource

Tables	Are	Cool
left-aligned	centered	left-aligned
bold

Code

```rust
fn main() {
    let message = "Hello, Rust!";
    println!("{}", message);
}
`` `

fn main() {
    let message = "Hello, Rust!";
    println!("{}", message);
}

```rust title="hello-world.rs"
fn main() {
    let message = "Hello, Rust!";
    println!("{}", message);
}
`` `

hello-world.rs

fn main() {
    let message = "Hello, Rust!";
    println!("{}", message);
}

```rust linenums="1"
fn main() {
    let message = "Hello, Rust!";
    println!("{}", message);
}
`` `

fn main() {
    let message = "Hello, Rust!";
    println!("{}", message);
}

If a code block contains jinja style macros such as { {...} } or # there can be a Macro Rendering Error. On way to solve it is the disable macros for the whole page by adding the following statement in the front matter:

---
render_macros: false
---

Boxes (Admonitions)

Settings

!!! note
    Notebox

Note

Notebox

!!! note "This is a custom title"
    Custom title notebox

This is a custom title

Custom title notebox

!!! note ""
    No title notebox

No title notebox

??? note
    By default collabeed, collapsible notebox

Note

By default collabeed, collapsible notebox

???+ note
    By default open, collapsible notebox

Note

By default open, collapsible notebox

Type of Boxes

!!! note
    Notebox

Note

Notebox

!!! info
    Infobox

Info

Infobox

!!! abstract
    Abstractbox

Abstract

Abstractbox

!!! tip
    Tipbox

Tip

Tipbox

!!! success
    Successbox

Success

Successbox

!!! question
    Questionbox

Question

Questionbox

!!! warning
    Warningbox

Warning

Warningbox

!!! failure
    Failurebox

Failure

Failurebox

!!! danger
    Dangerbox

Danger

Dangerbox

!!! bug
    Bugbox

Bug

Bugbox

!!! example
    Examplebox

Example

Examplebox

!!! quote
    Qutobox

Quote

Qutobox

Grids

<div class="grid cards" markdown>
- :fontawesome-brands-html5: __HTML__ for content and structure
- :fontawesome-brands-js: __JavaScript__ for interactivity
- :fontawesome-brands-css3: __CSS__ for text running out of boxes
- :fontawesome-brands-internet-explorer: __Internet Explorer__ ... huh?
</div>

• HTML for content and structure
• JavaScript for interactivity
• CSS for text running out of boxes
• Internet Explorer ... huh?

<div class="grid cards" markdown>
-   :material-clock-fast:{ .lg .middle } __Set up in 5 minutes__

    ---

    Install [`mkdocs-material`](#) with [`pip`](#) and get up
    and running in minutes
    [:octicons-arrow-right-24: Getting started](#)

-   :fontawesome-brands-markdown:{ .lg .middle } __It's just Markdown__

    ---

    Focus on your content and generate a responsive and searchable static site
    [:octicons-arrow-right-24: Reference](#)

-   :material-format-font:{ .lg .middle } __Made to measure__

    ---

    Change the colors, fonts, language, icons, logo and more with a few lines
    [:octicons-arrow-right-24: Customization](#)

-   :material-scale-balance:{ .lg .middle } __Open Source, MIT__

    ---

    Material for MkDocs is licensed under MIT and available on [GitHub]
    [:octicons-arrow-right-24: License](#)
</div>

• Set up in 5 minutes

  ---

  Install mkdocs-material with pip and get up and running in minutes Getting started

• It's just Markdown

  ---

  Focus on your content and generate a responsive and searchable static site Reference

• Made to measure

  ---

  Change the colors, fonts, language, icons, logo and more with a few lines Customization

• Open Source, MIT

  ---

  Material for MkDocs is licensed under MIT and available on [GitHub] License

Diagrams

Mermaid

Flowchart

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

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

Sequence Diagram

```mermaid
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!
 ```

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

```mermaid
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 --> [*]
 ```

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

```mermaid
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()
  }
 ```

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-Realationship Diagram

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

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

Wavedrom

For more information see:

• Wavedrom JSON Wiki
• Wavedrom Tutorial

Timing Diagrams

{ signal: [{ name: 'Alfa', wave: '01.zx=ud.23.45' }] }

{ "signal": [
  { "name": "pclk", "wave": 'p.......' },
  { "name": "Pclk", "wave": 'P.......' },
  { "name": "nclk", "wave": 'n.......' },
  { "name": "Nclk", "wave": 'N.......' },
  {},
  { "name": 'clk0', "wave": 'phnlPHNL' },
  { "name": 'clk1', "wave": 'xhlhLHl.' },
  { "name": 'clk2', "wave": 'hpHplnLn' },
  { "name": 'clk3', "wave": 'nhNhplPl' },
  { "name": 'clk4', "wave": 'xlh.L.Hx' },
]}

Register

you can describe register mapping with the same syntax:

{"reg":[
  {"bits": 8, "name": "things"},
  {"bits": 2, "name": "stuff" },
  {"bits": 6},
 ],
 "config": { "bits":16,"lanes":1 }
 }

PlantUML

This documentation makes use of the plantuml-markdown plugin and the PlantUML Webpage.

For a small Cheatsheet for PlantUML see https://ogom.github.io/draw_uml/plantuml/

title PlantUml Demo
left to right direction
skinparam packageStyle rectangle
actor customer
actor clerk
rectangle checkout {
  customer -- (checkout)
  (checkout) .> (payment) : include
  (help) .> (checkout) : extends
  (checkout) -- clerk
}

class Foo1 {
  You can use
  several lines
  ..
  as you want
  and group
  ==
  things together.
  __
  You can have as many groups
  as you want
  --
  End of class
}

class User {
  .. Simple Getter ..
  + getName()
  + getAddress()
  .. Some setter ..
  + setName()
  __ private data __
  int age
  -- encrypted --
  String password
}

class Foo1 {

:   You can use several lines .. as you want and group == things
    together. \_\_ You can have as many groups as you want \--End of
    class

}

class User {

:   -   getName()

    \+ getAddress() .. Some setter .. + setName() \_\_ private data \_\_
    int age \-- encrypted \--String password

}

@startuml
title Authentication Sequence
    Alice->Bob: Authentication Request
    note right of Bob: Bob thinks about it
    Bob->Alice: Authentication Response
@enduml

Alice -\> Bob: Authentication Request Bob \--\> Alice: Authentication
Response

Alice -\> Bob: Another authentication Request Alice \<\-- Bob: Another
authentication Response

actor actor agent agent artifact artifact boundary boundary card card
cloud cloud component component control control database database entity
entity file file folder folder frame frame interface interface node node
package package queue queue stack stack rectangle rectangle storage
storage usecase usecase