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!'
    }
  }
}

Code groups

config.js

/**
 * @type {import('vitepress').UserConfig}
 */
const config = {
  // ...
}

export default config

config.ts

import type { UserConfig } from 'vitepress'

const config: UserConfig = {
  // ...
}

export default config

Code focus

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

Lists

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

a content

a content 2

Nested Tabs

a content

GitHub-flavored Alerts

See: https://vitepress.dev/guide/markdown#github-flavored-alerts

Critical content.

Tables

See: https://vitepress.dev/guide/markdown#github-style-tables

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

Equations

When $a\ne 0$, there are two solutions to $a{x}^2+bx+c=0$ and they are

$$x=\frac{-b\pm \sqrt{b^2-4ac}}{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!

Footnotes (citation-style)

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

More

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

---

1. This is Babushka's footnote! ↩︎