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:

Input

```js{4}
export default {
  data () {
    return {
      msg: 'Highlighted!'
    }
  }
}
```

Output

export default {
  data () {
    return {
      msg: 'Highlighted!'
    }
  }
}

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.

Mermaid

graph LR
  a --> b

MathJax

$$
\begin{align}
\text{Let } \aleph_0 & = \omega \ \omega \\
\text{where } \omega & = \lambda x . x \ x
\end{align}
$$

Let $\aleph_0 = \omega \ \omega$ where $\omega = \lambda x . x \ x$.

$$\begin{array}{rl}\text{Let }{\mathrm{\aleph }}_0& =\omega \omega \\ \text{where }\omega & =\lambda x.xx\end{array}$$

Let ${\mathrm{\aleph }}_0=\omega \omega$ where $\omega =\lambda x.xx$.

Data & Vue

CSV 1

col1	col2
Item 1	20240806
Item 2	20240806

CSV 2

col1	col2	col3
Item 3	20240806	foo
Item 4	20240806	bar
Item 5	20240806	baz

More

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