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

Code snippets from gnuplot-examples.

```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

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

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

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

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

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

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 line

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

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

Lists

Input

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

Output

1. a

2. b

3. c 1. d

4. 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!

!!! note
    Inline `$$` delimiters like `$$x=1+2$$` will render as inline math when written within a paragraph. For display/block math, place the `$$` delimiters on their own lines.

    $$f(x, y) = 2y$$

Alternatively, use fenced code blocks:

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

Output

When  , there are two solutions to     and they are

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!

Note

Inline $$ delimiters like $$x=1+2$$ will render as inline math when written within a paragraph. For display/block math, place the $$ delimiters on their own lines.

Alternatively, use fenced code blocks:

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

and now we can reference this as Eq. .

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

see Eq. .

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}$? Or simply typed as \eqref{eq:c} and \ref{eq:d}!

Also works using $$\ref{eq:c}$$ or without spaces: equation\eqref{eq:d}goes here!

Output

See ? And what about ? Or simply typed as and !

Also works using or without spaces: equationgoes here!

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.

NewCM Fonts

The NewCM fonts provide excellent support for mathematical typography. Here are some examples demonstrating various features.

Warning

This section demonstrates the typographical capabilities of the NewCM fonts for complex mathematical notation. While care has been taken to ensure accuracy, users should verify equations against authoritative sources before using them in academic or professional contexts. The equations are illustrative and may not reflect all conventions or edge cases.

Basic Mathematical Notation

Inline math works seamlessly: can be embedded directly in text.

Input

Display math for triple integrals:
```math
\oiiint_{\Omega} f(x,y,z) \, dx\,dy\,dz
```

Output

Display math for triple integrals:

General Relativity

Einstein's field equations describe how matter and energy curve spacetime. The metric tensor defines distances on the manifold .

Input Einstein 1915

```math
\begin{equation}
R_{\mu\nu} - \frac{1}{2}Rg_{\mu\nu} + \Lambda g_{\mu\nu} = \frac{8\pi G}{c^4}T_{\mu\nu} \label{eq:einstein}
\end{equation}
```

Output

Input

The stress-energy tensor $T_{\mu\nu}$ must satisfy the conservation law with covariant derivative:
```math
\begin{equation}
\nabla_\mu T^{\mu\nu} = 0 \implies \partial_\mu (\sqrt{-g}T^{\mu\nu}) + \Gamma^\nu_{\mu\lambda}\sqrt{-g}T^{\mu\lambda} = 0 \label{eq:conservation}
\end{equation}
```

Output

The stress-energy tensor must satisfy the conservation law with covariant derivative:

Quantum Electrodynamics

The QED Lagrangian combines the electromagnetic field tensor with the Dirac equation for fermions.

Input Feynman QED

```math
\begin{equation}
\mathcal{L} = -\frac{1}{4}F_{\mu\nu}F^{\mu\nu} + \bar{\psi}(i\hbar c\gamma^\mu D_\mu - mc^2)\psi \label{eq:qed-lagrangian}
\end{equation}
```

Output

Input

A typical Feynman amplitude for electron-photon vertex involves the coupling to the electromagnetic field:
```math
\begin{equation}
\mathscr{A}_{\text{vertex}} = -ie\bar{u}(p')\gamma^\mu u(p) A_\mu(q) \label{eq:feynman-amplitude}
\end{equation}
```

Output

A typical Feynman amplitude for electron-photon vertex involves the coupling to the electromagnetic field:

Gauge Theory and Lie Algebras

The Standard Model gauge group is a direct product of Lie groups with corresponding Lie algebra structure.

Input Standard Model

```math
\begin{equation}
G_{\text{SM}} = \text{SU}(3)_C \times \text{SU}(2)_L \times \text{U}(1)_Y \quad \text{with algebra } \mathfrak{g}_{\text{SM}} = \mathfrak{su}(3) \oplus \mathfrak{su}(2) \oplus \mathfrak{u}(1) \label{eq:gauge-group}
\end{equation}
```

Output

Differential Geometry

Stokes' theorem relates integrals over a manifold to integrals over its boundary.

Input Stokes' Theorem

For any differential form $\boldsymbol{\omega}$ on a surface $\Sigma$ in the tangent space $\mathscr{T}(\mathcal{M})$:
```math
\begin{equation}
\oint_{\partial \Sigma} \boldsymbol{\omega} = \iint_{\Sigma} d\boldsymbol{\omega} \quad \forall \, \Sigma \in \mathscr{T}(\mathcal{M}) \label{eq:stokes}
\end{equation}
```

Output

For any differential form on a surface in the tangent space :

Quantum Mechanics

The expectation value of the Hamiltonian operator in quantum mechanics can be expressed as a sum over energy eigenstates.

Input Expectation Values

```math
\begin{equation}
\langle \Psi | \hat{H} | \Psi \rangle = \sum_{n=0}^{\infty} E_n |\langle \phi_n | \Psi \rangle|^2 = \int_{\mathbb{R}^3} \Psi^*(x) \hat{H} \Psi(x) \, d^3x \label{eq:expectation}
\end{equation}
```

Output

Topology and Set Theory

Fiber bundles appear throughout modern physics. The famous Hopf fibration shows how the 3-sphere fibers over the 2-sphere.

Input Fiber Bundles & Cardinal Numbers

```math
\begin{equation}
\mathbb{S}^1 \hookrightarrow \mathbb{S}^3 \xrightarrow[\text{Hopf fibration}]{\pi} \mathbb{S}^2 \cong \mathbb{CP}^1 \label{eq:fiber-bundle}
\end{equation}
```

Output

Input

The cardinality of the power set of natural numbers equals the continuum:
```math
\begin{equation}
\wp(\aleph_0) \cong 2^{\aleph_0} = \mathfrak{c} \label{eq:cardinality}
\end{equation}
```

Output

The cardinality of the power set of natural numbers equals the continuum:

Comprehensive Example

Bringing together various mathematical styles and symbols in one expression.

Input

```math
\begin{align}
\mathcal{M} &: \text{Spacetime manifold} \label{eq:manifold} \\
\bigoplus_{i \in I} \mathcal{V}_i &\subseteq \prod_{j=1}^{\infty} \mathbb{K}_j \quad \text{(direct sum of vector spaces)} \label{eq:direct-sum} \\
\mathfrak{L}[\phi] &= \int_{\mathcal{M}} \mathscr{L}(\phi, \partial_\mu \phi) \sqrt{-g} \, d^4x \label{eq:action} \\
\boldsymbol{\nabla} \times \boldsymbol{B} &= \mu_0\left(\boldsymbol{J} + \varepsilon_0\frac{\partial \boldsymbol{E}}{\partial t}\right) \label{eq:ampere-maxwell} \\
\widehat{\mathbb{Q}}_p &\curvearrowright \mathfrak{gl}_n(\mathbb{C}) \rightrightarrows \text{Aut}(\mathcal{H}) \label{eq:group-action}
\end{align}
```

Output

This demonstrates the rich typographical capabilities of NewCM fonts for complex mathematical notation.

LaTeXStrings

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

an equation:

DataFrame

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

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.

More

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

---

1. This is Babushka's footnote! ↩︎