Markdown examples¶

some useful markdown style examples

Inline styles¶

• *italic* or _italic_ -> italic
• **bold** or __italic__ -> bold
• ***bold-italic*** -> bold-italic
• Superscript: A^T^A -> A^TA
• Subscript: H~2~O -> H₂O
• Code: use apostrophe -> inline code
• Keys keys table: ++ctrl+alt+del+shift++ -> Ctrl+Alt+Del+Shift
• left mouse click <mouse class="left"></mouse> ->
• right mouse click <mouse class="right"></mouse> ->
• --- -> horizontal line across the page
• URL links: [linktext](https://link)
• Icon with a tooltip
  :material-information-outline:{.red-color title="Important information" }
• Demo
  <div class="h3-like">Demonstration</div>
• Section
  <div class="h4-like">Section</div>

Text with icons:

• standard icons as :octicons-gear-16:, icon search
• in color as as :octicons-gear-16:{.orange-color}
• as :fontawesome-brands-youtube:{.red-color}
• inline without separate css declaration:
  <span style="color: #00AA00">:material-arrow-down-circle:</span>

Admonitions, boxes¶

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

!!! info "The first parameter"

    The first parameter defines the type:

??? success "The second parameter"

    The second parameter defines the icon:

???+ warning "Collapsible in the expanded view"

    Use `???+` to make it expanded

!!! info inline "Inline Admonitions before the text"
    Admonition text 1 

!!! info inline end "Inline Admonitions after the text"
    Admonition text 2

??? note "note"
note: octicons/tag-16

??? abstract "abstract"
abstract: octicons/checklist-16

??? info "info"
* info: octicons/info-16

??? tip "tip"
* tip: octicons/squirrel-16

??? success "success"
* success: octicons/check-16

??? question "question"
* question: octicons/question-16

??? warning "warning"
* warning: octicons/alert-16

??? failure "failure"
* failure: octicons/x-circle-16

??? danger "danger"
* danger: octicons/zap-16

??? bug "bug"
* bug: octicons/bug-16

??? example "example"
* example: octicons/beaker-16

??? quote "quote"
* quote: octicons/quote-16

Annotations¶

Add annotations (1), and one the link (2).

1. I'm an annotation!
   the icon is defined in mkdocs.yml in
   annotation: material/chevron-right-circle
2. https://squidfunk.github.io/mkdocs-material/reference/annotations/

Add annotations (1) some other text (2).
{.annotate }

1. :man_raising_hand: I'm an annotation!
2. [https://squidfunk.github.io/mkdocs-material/reference/annotations/](https://squidfunk.github.io/mkdocs-material/reference/annotations/)

Footnotes¶

Footnote A¹ and Footnote B ²

Footnote A[^3] and Footnote B [^4]
[^3]:
    Footnote A
[^4]:
    Footnote B

Headers¶

# Header 1 - Title 
## Header 2 
### Header 3 
<div class="h3-like">Demonstration</div> 
#### Header 4 
<div class="h4-like">Section</div> 
##### Header 5 
###### Header 6

Grid cards¶

Two columns example¶

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

Images¶

Skip light box, i.e. do not zoom/zoom out, requires manual: false
![Image title](assets/DeepLearning_3DAug_settings_preview_settings.jpg){.off-glb } continue text after image

Inline image as ![Settings button](assets/settings.png){.inline-image}

![Image title](assets/DeepLearning_Evaluation2.jpg){.on-glb align=left width="300"}
Glithbox configuration settings (press here).

![Image title](assets/DataLayersToFinalImage.jpg){.on-glb width="300" }
/// caption
Image caption
///

JavaScript example¶

Toggle over the following text to see a hover tooltip: Save
<span data-help="This saves your work" data-help-title="Save Button">**Save**</span>

Lists¶

`Definition 1`

:   Paragraph 1.    

- [x] Lorem ipsum dolor sit amet, consectetur adipiscing elit
- [ ] Vestibulum convallis sit amet nisi a tincidunt
    * [x] In hac habitasse platea dictumst
    * [x] In scelerisque nibh non dolor mollis congue sed et metus
    * [ ] Praesent sed risus massa
- [ ] Aenean pretium efficitur erat, donec pharetra, ligula non scelerisque

Tabs and code block¶

=== "Tab 1"

    tab 1 text

=== "Tab 2"

    tab 2 text

1
2
3
4
5
6

function foo(par1)
% my function text
for i = 1:5
    disp(i);
    fprintf('%d/5', i);
end

Tables¶

| Method      | Description                          |
| :---------- | :----------------------------------- |
| `GET`       | :material-check:     Fetch resource  |
| `PUT`       | :material-check-all: Update resource |
| `DELETE`    | :material-close:     Delete resource |

| Method      | Description                          |
| :---------: | :----------------------------------: |
| `GET`       | :material-check:     Fetch resource  |
| `PUT`       | :material-check-all: Update resource |
| `DELETE`    | :material-close:     Delete resource |

| Method      | Description                          |
| ----------: | -----------------------------------: |
| `GET`       | :material-check:     Fetch resource  |
| `PUT`       | :material-check-all: Update resource |
| `DELETE`    | :material-close:     Delete resource |

Tooltips¶

• Link with tooltip, inline syntax: hover me
  [hover me](index.md "hit to return back to index.html")
• Icon with a tooltip
  :material-information-outline:{ title="Important information" }
• Icon with a tooltip
  :material-information-outline:{.red-color title="Important information" }

Widgets¶

Button: <span class="widget widget-button">Button</span>
Button text

Tab: <span class="widget widget-tab">Tab</span>
Tab text
The two greyed stubs peeking out on the right are drawn by the style itself - they are the next, unselected tabs of the strip, stacked behind like pages in a book, so a single span reads as a tab. Name only the tab you mean:
Input tiles Tile settings Registration

Edit box: <span class="widget widget-edit">Editbox</span>
Edit box text

Dropdown: <span class="widget widget-dropdown">Dropdown</span>
Dropdown item

Checkbox checked: <span class="widget widget-checkbox">Checkbox</span>
Checkbox

Checkbox unchecked: <span class="widget widget-checkbox widget-checkbox-unchecked">Unchecked</span>
Unchecked checkbox

Radio: <span class="widget widget-radio">Radio</span>
Radio