Skip to content

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 -> ATA
  • Subscript: H~2~O -> H2O
  • 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
  • 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/

The first parameter

The first parameter defines the type:

  • !!! - fixed box
  • ??? - collapsible box
  • ???+ - collapsible box in the expanded view
!!! info "The first parameter"

    The first parameter defines the type:
The second parameter

The second parameter defines the icon:

  • note: octicons/tag-16
  • abstract: octicons/checklist-16
  • info: octicons/info-16
  • tip: octicons/squirrel-16
  • success: octicons/check-16
  • question: octicons/question-16
  • warning: octicons/alert-16
  • failure: octicons/x-circle-16
  • danger: octicons/zap-16
  • bug: octicons/bug-16
  • example: octicons/beaker-16
  • quote: octicons/quote-16****
??? success "The second parameter"

    The second parameter defines the icon:
Collapsible in the expanded view

Use ???+ to make it expanded

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

    Use `???+` to make it expanded

Inline Admonitions before the text

Admonition text 1

Here is my main text 

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


Inline Admonitions after the text

Admonition text 2

!!! info inline end "Inline Admonitions after the text"
    Admonition text 2
Here is my main text

Annotations

Add annotations

, and one the link .

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

1. :man_raising_hand: I'm an annotation!<br>

Footnotes

Footnote A1 and Footnote B 2

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

  • Set up extra subtitle text

    Include in mkdocs.yaml: 

    markdown_extensions:
    - md_in_html
    Link to docs

  • Open Source, MIT

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

Two columns example

  • Sed sagittis eleifend rutrum
  • Donec vitae suscipit est
  • Nulla tempor lobortis orci
  1. Sed sagittis eleifend rutrum
  2. Donec vitae suscipit est
  3. Nulla tempor lobortis orci
Note!
=== "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
![Image title](assets/DeepLearning_3DAug_settings_preview_settings.jpg){.off-glb } continue text after image

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

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

Stop after image style

Use <div class="clear-float"></div> to break the floating pattern and start drawing text after the previous image

Image with caption Image title

Image caption

![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

  • Item 1 -> * Item 1
  • Item 2 -> * Item 2
  • Item 3 -> * Item 3
  1. Item 1 -> 1. Item 1
  2. Item 2 -> 3. Item 2
  3. Item 3 -> 3. Item 3
`Definition 1`

:   Paragraph 1.
Definition 1

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

Definition 1

Paragraph 2.

Paragraph 2.

- [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
  • 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

Tabs and code block

For code blocks use apostrophe x3 times to mark start and end 

=== "Tab 1"

    tab 1 text

=== "Tab 2"

    tab 2 text

An example of a code block for MATLAB; use apostrophe x3
```matlab title="Example of the code block" linenums="1" hl_lines="4-5"

Example of the code block
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 Fetch resource
PUT Update resource
DELETE Delete resource 
| Method      | Description                          |
| :---------- | :----------------------------------- |
| `GET`       | :material-check:     Fetch resource  |
| `PUT`       | :material-check-all: Update resource |
| `DELETE`    | :material-close:     Delete resource |
Method Description
GET Fetch resource
PUT Update resource
DELETE Delete resource 
| Method      | Description                          |
| :---------: | :----------------------------------: |
| `GET`       | :material-check:     Fetch resource  |
| `PUT`       | :material-check-all: Update resource |
| `DELETE`    | :material-close:     Delete resource |
Method Description
GET Fetch resource
PUT Update resource
DELETE 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" }

Widgets

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

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

  1. Footnote A ↩

  2. Footnote B ↩