Authoring content in Markdown

Note

This page is intended to demonstrate how Markdown content is rendered on this site. For an interactive demonstration of the syntax and rendering behavior, see the markdown-it demo.

Introduction

Markdown is a lightweight markup language that is popular among programmers for its simplicity and readability. Since its introduction in 2004, Markdown has evolved into several specifications and dialects. Today, CommonMark and its extension, GitHub Flavored Markdown (GFM), are the most widely used.

This site is built with VitePress, which uses markdown-it as its Markdown renderer. markdown-it follows the CommonMark specification while providing additional syntax extensions and sugar (URL autolinking, typographer).

Basic syntax

Emphasis

Input:

**This is bold text**

_This is italic text_

~~Strikethrough~~

Output:

This is bold text

This is italic text

~~Strikethrough~~

Blockquotes

Input:

> "To be, or not to be, that is the question." - William Shakespeare

> Blockquotes can also be nested...
>
> > ...by using additional greater-than signs right next to each other...
> >
> > > ...or with spaces between arrows.

Output:

"To be, or not to be, that is the question." - William Shakespeare

Blockquotes can also be nested...
...by using additional greater-than signs right next to each other...
...or with spaces between arrows.

Lists

Input:

- Create a list by starting a line with `+`, `-`, or `*`
- Sub-lists are made by indenting 2 spaces:
  - Marker character change forces new list start:
    - Ac tristique libero volutpat at
    - Facilisis in pretium nisl aliquet
    - Nulla volutpat aliquam velit
- Very easy!

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem at massa

Output:

Create a list by starting a line with +, -, or *
Sub-lists are made by indenting 2 spaces:
- Marker character change forces new list start:
  - Ac tristique libero volutpat at
  - Facilisis in pretium nisl aliquet
  - Nulla volutpat aliquam velit
Very easy!

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa

Tables

Input:

| Option | Description                                                               |
| ------ | ------------------------------------------------------------------------- |
| data   | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default.    |
| ext    | extension to be used for dest files.                                      |

Output:

Option	Description
data	path to data files to supply the data that will be passed into templates.
engine	engine to be used for processing templates. Handlebars is the default.
ext	extension to be used for dest files.

Tip

Online markdown table generator

Links

Input:

[Authoring content in Markdown](./authoring-content-in-markdown)

[Google](https://google.com)

Output:

Authoring content in Markdown (internal)

Google

Images

Input:

![Alt text](./assets/example.png)

Output:

Alt text

Plugins

Sub & Sup

Input:

- 19^th^
- H~2~O

Output:

19^th
H₂O

Mark

Input:

==Marked text==

Output:

Marked text

GitHub-flavored alerts

Input:

> [!NOTE]
> Highlights information that users should take into account, even when skimming.

> [!TIP]
> Optional information to help a user be more successful.

> [!IMPORTANT]
> Crucial information necessary for users to succeed.

> [!WARNING]
> Critical content demanding immediate user attention due to potential risks.

> [!CAUTION]
> Negative potential consequences of an action.

Output:

Note

Highlights information that users should take into account, even when skimming.

Tip

Optional information to help a user be more successful.

Important

Crucial information necessary for users to succeed.

Warning

Critical content demanding immediate user attention due to potential risks.

Caution

Negative potential consequences of an action.

Math equations

Input:

When $a \ne 0$, there are two solutions to $(ax^2 + bx + c = 0)$ and they are

$$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$

**Maxwell's equations:**

| equation                                                                                                                                                                  | description                                                                            |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- |
| $\nabla \cdot \vec{\mathbf{B}}  = 0$                                                                                                                                      | divergence of $\vec{\mathbf{B}}$ is zero                                               |
| $\nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t}  = \vec{\mathbf{0}}$                                                          | curl of $\vec{\mathbf{E}}$ is proportional to the rate of change of $\vec{\mathbf{B}}$ |
| $\nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} = \frac{4\pi}{c}\vec{\mathbf{j}}    \nabla \cdot \vec{\mathbf{E}} = 4 \pi \rho$ | _wha?_                                                                                 |

Output:

When $a \neq 0$ , there are two solutions to $(a x^{2} + b x + c = 0)$ and they are

x = \frac{- b \pm \sqrt{b^{2} - 4 a c}}{2 a}

Maxwell's equations:

equation	description
$\nabla \cdot \vec{B} = 0$	divergence of $\vec{B}$ is zero
$\nabla \times \vec{E} + \frac{1}{c} \frac{\partial \vec{B}}{\partial t} = \vec{0}$	curl of $\vec{E}$ is proportional to the rate of change of $\vec{B}$
$\nabla \times \vec{B} - \frac{1}{c} \frac{\partial \vec{E}}{\partial t} = \frac{4 π}{c} \vec{j} \nabla \cdot \vec{E} = 4 π ρ$	wha?

Footnotes

Input:

Footnote 1 link[^first].

Footnote 2 link[^second].

Inline footnote^[Text of inline footnote] definition.

Duplicated footnote reference[^second].

[^first]: Footnote **can have markup**

    and multiple paragraphs.

[^second]: Footnote text.

Output:

Footnote 1 link^[1].

Footnote 2 link^[2].

Inline footnote^[3] definition.

Duplicated footnote reference^[2:1].

Abbreviations

Input:

This is HTML abbreviation example.

It converts "HTML", but keep intact partial entries like "xxxHTMLyyy" and so on.

*[HTML]: Hyper Text Markup Language

Output:

This is HTML abbreviation example.

It converts "HTML", but keep intact partial entries like "xxxHTMLyyy" and so on.

Footnote can have markup
and multiple paragraphs. ↩︎
Footnote text. ↩︎ ↩︎
Text of inline footnote ↩︎

Authoring content in Markdown

Introduction ​

Basic syntax ​

Emphasis ​

Blockquotes ​

Lists ​

Tables ​

Links ​

Images ​

Plugins ​

Sub & Sup ​

Mark ​

GitHub-flavored alerts ​

Math equations ​

Footnotes ​

Abbreviations ​

Introduction

Basic syntax

Emphasis

Blockquotes

Lists

Tables

Links

Images

Plugins

Sub & Sup

Mark

GitHub-flavored alerts

Math equations

Footnotes

Abbreviations