Markdown Extension Examples

This page demonstrates some of the built-in markdown extensions provided by VitePress.

Syntax Highlighting

VitePress provides Syntax Highlighting powered by Shiki, with additional features like line-highlighting:

Line Highlight

Input

```julia
using Gnuplot
x = -2π:0.001:2π
@gp x sin.(x) "w l t 'sin' lw 2 lc '#56B4E9'" "set grid"
@gp :- xrange = (-2π - 0.3, 2π + 0.3) yrange = (-1.1,1.1)
@gp :- x cos.(x) "w l t 'cos' lw 2 lc rgb '#E69F00'" # ‎[!code highlight]
```

Output

julia

using Gnuplot
x = -2π:0.001:2π
@gp x sin.(x) "w l t 'sin' lw 2 lc '#56B4E9'" "set grid"
@gp :- xrange = (-2π - 0.3, 2π + 0.3) yrange = (-1.1,1.1)
@gp :- x cos.(x) "w l t 'cos' lw 2 lc rgb '#E69F00'"

Highlight multiple lines

Input

```julia
# ‎
# up to 3 in order to highlight the previous 2 lines
using Gnuplot
x = -2π:0.001:2π
@gp x sin.(x) "w l t 'sin' lw 2 lc '#56B4E9'" "set grid"
@gp :- xrange = (-2π - 0.3, 2π + 0.3) yrange = (-1.1,1.1)
@gp :- x cos.(x) "w l t 'cos' lw 2 lc rgb '#E69F00'" # ‎[!code highlight]
```

Output

julia

using Gnuplot
x = -2π:0.001:2π
@gp x sin.(x) "w l t 'sin' lw 2 lc '#56B4E9'" "set grid"
@gp :- xrange = (-2π - 0.3, 2π + 0.3) yrange = (-1.1,1.1)
@gp :- x cos.(x) "w l t 'cos' lw 2 lc rgb '#E69F00'"

Note the combination with [!code highlight].

Focus a line

Input

```julia
using Gnuplot
x = -2π:0.001:2π
@gp x sin.(x) "w l t 'sin' lw 2 lc '#56B4E9'" "set grid"
@gp :- xrange = (-2π - 0.3, 2π + 0.3) yrange = (-1.1,1.1)
@gp :- x cos.(x) "w l t 'cos' lw 2 lc rgb '#E69F00'" # ‎[!code focus]
```

Output

julia

using Gnuplot
x = -2π:0.001:2π
@gp x sin.(x) "w l t 'sin' lw 2 lc '#56B4E9'" "set grid"
@gp :- xrange = (-2π - 0.3, 2π + 0.3) yrange = (-1.1,1.1)
@gp :- x cos.(x) "w l t 'cos' lw 2 lc rgb '#E69F00'"

Focus multiple lines

Input

```julia
# ‎
using Gnuplot
x = -2π:0.001:2π
@gp x sin.(x) "w l t 'sin' lw 2 lc '#56B4E9'" "set grid"
@gp :- xrange = (-2π - 0.3, 2π + 0.3) yrange = (-1.1,1.1)
@gp :- x cos.(x) "w l t 'cos' lw 2 lc rgb '#E69F00'" # ‎[!code focus] # ‎[!code highlight]
```

Output

julia

using Gnuplot
x = -2π:0.001:2π
@gp x sin.(x) "w l t 'sin' lw 2 lc '#56B4E9'" "set grid"
@gp :- xrange = (-2π - 0.3, 2π + 0.3) yrange = (-1.1,1.1)
@gp :- x cos.(x) "w l t 'cos' lw 2 lc rgb '#E69F00'" # #

Note the combination with [!code focus] and [!code highlight].

Added and removed lines

Input

```julia
using Gnuplot
x = -2π:0.001:2π
@gp x sin.(x) "w l t 'sin' lw 2 lc '#56B4E9'" "set grid" # ‎ [!code --]
@gp :- xrange = (-2π - 0.3, 2π + 0.3) yrange = (-1.1,1.1)
@gp :- x cos.(x) "w l t 'cos' lw 2 lc rgb '#E69F00'" # ‎[!code ++] # ‎[!code focus]
```

Output

julia

using Gnuplot
x = -2π:0.001:2π
@gp x sin.(x) "w l t 'sin' lw 2 lc '#56B4E9'" "set grid"
@gp :- xrange = (-2π - 0.3, 2π + 0.3) yrange = (-1.1,1.1)
@gp :- x cos.(x) "w l t 'cos' lw 2 lc rgb '#E69F00'" # #

Note the combination with [!code focus].

Code error, code warning

Input

```julia
using Gnuplot
x = -2π:0.001:2π
@gp x sin.(x) "w l t 'sin' lw 2 lc '#56B4E9'" "set gridss" # ‎ [!code error]
@gp :- xrange = (-2π - 0.3, 2π + 0.3) yrange = (-1.1,1.1)
@gp :- x cos.(x) "w l t 'cos' lw 2 lc rgba '#E69F00'" # ‎[!code warning]
```

Output

julia

using Gnuplot
x = -2π:0.001:2π
@gp x sin.(x) "w l t 'sin' lw 2 lc '#56B4E9'" "set gridss"
@gp :- xrange = (-2π - 0.3, 2π + 0.3) yrange = (-1.1,1.1)
@gp :- x cos.(x) "w l t 'cos' lw 2 lc rgba '#E69F00'"

Code groups

Input

::: code-group

```julia [one line]
using Gnuplot
t = 0:0.001:1
@gp t sin.(10π*t) "w l tit 'sin' lc 'gray'"
```

```julia [two lines]
using Gnuplot
x = -2π:0.001:2π
@gp x sin.(x) "w l t 'sin' lw 2 lc '#56B4E9'" "set grid"
@gp :- xrange = (-2π - 0.3, 2π + 0.3) yrange = (-1.1,1.1)
@gp :- x cos.(x) "w l t 'cos' lw 2 lc rgb '#E69F00'"
```

:::

Output

one linetwo lines

julia

using Gnuplot
t = 0:0.001:1
@gp t sin.(10π*t) "w l tit 'sin' lc 'gray'"

julia

using Gnuplot
x = -2π:0.001:2π
@gp x sin.(x) "w l t 'sin' lw 2 lc '#56B4E9'" "set grid"
@gp :- xrange = (-2π - 0.3, 2π + 0.3) yrange = (-1.1,1.1)
@gp :- x cos.(x) "w l t 'cos' lw 2 lc rgb '#E69F00'"

Lists

Input

1. a
1. b
    1. c
        1. d
1. e

Output

a
b
c 1. d
e

Custom Containers

Input

::: info

This is an info box.

:::

::: tip

This is a tip.

:::

::: warning

This is a warning.

:::

::: danger

This is a dangerous warning.

:::

::: details

This is a details block.

:::

Output

INFO

This is an info box.

TIP

This is a tip.

WARNING

This is a warning.

DANGER

This is a dangerous warning.

Details

This is a details block.

Tabs

Input

:::tabs

== tab a

a content

== tab b

b content

:::

:::tabs

== tab a

a content 2

== tab b

b content 2

:::

Output

a content

a content 2

Nested Tabs

Input

::::tabs

=== first one

:::tabs

== tab a

a content

== tab b

b content

:::

=== second one

:::tabs

== tab c

c content 2

== tab d

d content 2

:::

::::

Output

a content

GitHub-flavored Alerts

See github-flavored-alerts

Input

> [!WARNING]
> Critical content.

Output

Critical content.

Tables

See github-style-tables

Input

| Tables        |      Are      |  Cool |
| ------------- | :-----------: | ----: |
| col 3 is      | right-aligned | \$1600 |
| col 2 is      |   centered    |   \$12 |
| zebra stripes |   are neat    |    \$1 |

Output

Tables	Are	Cool
col 3 is	right-aligned	$1600
col 2 is	centered	$12
zebra stripes	are neat	$1

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}$$

Don't type anything after the last double dollar sign, and make sure there are no spaces after the opening double dollar sign in the display math!

You can also use fenced code blocks with the `math` tag for equations!

```math
\nabla^2 \Phi = \rho
```

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}

Don't type anything after the last double dollar sign, and make sure there are no spaces after the opening double dollar sign in the display math!

You can also use fenced code blocks with the math tag for equations!

\nabla^{2} Φ = ρ

labels and `eqref`

You can label equations inside math environments and reference them later using \eqref{...} (or \ref{...} if you only want the equation number). This works for single equations as well as multi-line environments such as align.

Single equation

Input

This is a simple equation

```math
\begin{equation}
x=0 \label{eq:a}
\end{equation}
```
and now we can reference this as Eq. ``\eqref{eq:a}``.

Output

This is a simple equation

\begin{matrix} (1) & x = 0 \end{matrix}

and now we can reference this as Eq. $(1)$ .

`align` environment with a single label

Labels can also be used inside an align environment.

Input

This also works

```math
\begin{align}
\label{eq:b}
a = 1
\end{align}
```

see Eq. $\eqref{eq:b}$.

Output

This also works

\begin{array}{r} (2) & a = 1 \end{array}

see Eq. $(2)$ .

Multi-line align with labeled lines

Input

```math
\begin{align}
\nabla\cdot\mathbf{E}  &= 4 \pi \rho \label{eq:c} \\
\nabla\cdot\mathbf{B}  &= 2 \\
\nabla\times\mathbf{E} &= - \frac{1}{c} \frac{\partial\mathbf{B}}{\partial t} \label{eq:d} \\
\nabla\times\mathbf{B} &= - \frac{1}{c}
\left(4 \pi \mathbf{J} + \frac{\partial\mathbf{E}}{\partial t}\right)
\end{align}
```

see $\eqref{eq:c}$ ? and what about $\ref{eq:d}$?

Output

\begin{aligned} (3) & \nabla \cdot E & = 4 π ρ \\ (4) & \nabla \cdot B & = 2 \\ (5) & \nabla \times E & = - \frac{1}{c} \frac{\partial B}{\partial t} \\ (6) & \nabla \times B & = - \frac{1}{c} (4 π J + \frac{\partial E}{\partial t}) \end{aligned}

see $(3)$ ? and what about $5$ ?

TIP

Use \eqref{...} to automatically include parentheses around the equation number.
Use \ref{...} if you only need the raw number.
Labels must be unique within a document.
In multi-line environments, place \label{} on the specific line you want to reference.

LaTeXStrings

julia

using LaTeXStrings
L"an equation: $\alpha^2$"

an equation: $α^{2}$

DataFrame

julia

using DataFrames
DataFrame(A=1:3, B=5:7, fixed=1)

3×3 DataFrame

Row	A	B	fixed
	Int64	Int64	Int64
1	1	5	1
2	2	6	1
3	3	7	1

Latex Symbols $Λ_{θ}$ and $Z$

TIP

If you want latex symbols in headings better use Documenter's ID interface for proper rendering.

Input

## [Latex Symbols $\Lambda_\theta$ and $\bf Z$](@id latex_symbols_in_headings)

The previous heading is the output from this input. Also, note that the @id's name would show up in the @contents listing.

Footnotes (citation-style)

Input

Here is the link for the paper of Babushka[^1]

[^1]: This is Babushka's footnote!

Output

Here is the link for the paper of Babushka^[1]

Escaping characters

Input

< `less` and `greater` > than, and the backtick \`.

Output

< less and greater > than, and the backtick `.

And also, this <was> an <issue> before.

Let's see if this one works:

```
sshflags=`-i <keyfile>`
```

it does,

sshflags=`-i <keyfile>`

but within inline text it does not. Ideas for the escaping sequence?

This is the expected sequence by vitepress:

<code> sshflags= `` `-i <keyfile> ` `` </code>

Heading with a link and italic font

This was previously breaking due to special markdown characters in the slug.

Check out the documentation for the full list of markdown extensions.

This is Babushka's footnote! ↩︎

Trusted by

Markdown Extension Examples

Syntax Highlighting

Line Highlight

Highlight multiple lines

Focus a line

Focus multiple lines

Added and removed lines

Code error, code warning

Code groups

Lists

Custom Containers

Tabs

Nested Tabs

GitHub-flavored Alerts

Tables

Equations

labels and `eqref`

Single equation

`align` environment with a single label

Multi-line align with labeled lines

LaTeXStrings

DataFrame

Latex Symbols $Λ_{θ}$ and $Z$

Footnotes (citation-style)

Escaping characters

Heading with a link and italic font

More

Trusted by

Markdown Extension Examples ​

Syntax Highlighting ​

Line Highlight ​

Highlight multiple lines ​

Focus a line ​

Focus multiple lines ​

Added and removed lines ​

Code error, code warning ​

Code groups ​

Lists ​

Custom Containers ​

Tabs ​

Nested Tabs ​

GitHub-flavored Alerts ​

Tables ​

Equations ​

labels and eqref ​

Single equation ​

align environment with a single label ​

Multi-line align with labeled lines ​

LaTeXStrings ​

DataFrame ​

Latex Symbols Λθ and Z ​

Footnotes (citation-style) ​

Escaping characters ​

Heading with a link and italic font ​

More ​

Markdown Extension Examples

Syntax Highlighting

Line Highlight

Highlight multiple lines

Focus a line

Focus multiple lines

Added and removed lines

Code error, code warning

Code groups

Lists

Custom Containers

Tabs

Nested Tabs

GitHub-flavored Alerts

Tables

Equations

labels and `eqref`

Single equation

`align` environment with a single label

Multi-line align with labeled lines

LaTeXStrings

DataFrame

Latex Symbols $Λ_{θ}$ and $Z$

Footnotes (citation-style)

Escaping characters

Heading with a link and italic font

More