Skip to content

Example Markdown

This page shows some example markdown code

Cheat sheet

https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet

External link example

[LINK TEXT <i class="fa fa-external-link"></i>](LINK-URL){target="\_blank"}
LINK TEXT

Images

Image Example

Inline-style: 
![alt text](http://via.placeholder.com/100x100 "Title Text 1")

Reference-style: 
![alt text][logo]

[logo]: http://via.placeholder.com/100x100 "Title Text 2"
Inline-style: alt text

Reference-style: alt text

Image with size constraint, e.g. 50% width

  ![ALT TEXT GOES HERE](http://via.placeholder.com/600x100){style="width:50%"}

ALT TEXT GOES HERE

Clickable image with figure text

  [![ALT TEXT GOES HERE](http://via.placeholder.com/600x100){style="width:50%"}](http://via.placeholder.com/600x100)
  <p style="text-align: center;">**Figure N:** Centered figure text.</p>

ALT TEXT GOES HERE

Figure N: Centered figure text.

Admonition

https://squidfunk.github.io/mkdocs-material/extensions/admonition/

!!! note
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod.
!!! abstract
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod.
!!! question
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod.
!!! tip
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod.
!!! example
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod.
!!! success
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod.
!!! info
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod.
!!! warning
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod.
!!! danger
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod.

Note

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod.

Abstract

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod.

Question

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod.

Tip

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod.

Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod.

Success

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod.

Info

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod.

Warning

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod.

Danger

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod.

PyMdown

https://squidfunk.github.io/mkdocs-material/extensions/pymdown/

Arithmatex

Show LaTeX style math.

Arithmatex Example

$$
\frac{n!}{k!(n-k)!} = \binom{n}{k}
$$

Lorem ipsum dolor sit amet: $p(x|y) = \frac{p(y|x)p(x)}{p(y)}$
\frac{n!}{k!(n-k)!} = \binom{n}{k}

Lorem ipsum dolor sit amet: p(x|y) = \frac{p(y|x)p(x)}{p(y)}

Mark

Mark Example

Used to ==highlight== text.
Used to highlight text.

Tasklist

Tasklist Example

* [x] Lorem ipsum dolor sit amet, consectetur adipiscing elit
* [ ] Vestibulum convallis sit amet nisi a tincidunt
    * [x] Sed egestas felis quis elit dapibus, ac aliquet turpis mattis
    * [ ] Praesent sed risus massa
* [ ] Nulla vel eros venenatis, imperdiet enim id, faucibus nisi
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit
  • Vestibulum convallis sit amet nisi a tincidunt
    • Sed egestas felis quis elit dapibus, ac aliquet turpis mattis
    • Praesent sed risus massa
  • Nulla vel eros venenatis, imperdiet enim id, faucibus nisi

ProgressBar

Progress Bar Example

[=0% "0%"]
[=5% "5%"]
[=25% "25%"]
[=45% "45%"]
[=65% "65%"]
[=85% "85%"]
[=100% "100%"]

0%

5%

25%

45%

65%

85%

100%

Font Awesome

fa-lg fa-2x fa-3x fa-4x fa-5x