The Pit of Knowledge

Appearance

VitePress Reference ​

A reference page for some of the default theme features of VitePress.

VitePress Guide ​

Markdown Extensions ​

Asset Handling ​

Frontmatter ​

Site Config ​

Custom Containers ​

Defaults ​

md
::: 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.
:::
::: 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.
:::

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.

Custom ​

md
::: danger STOP
Danger zone, do not proceed
:::

::: details Click me to view the code
```js
console.log('Hello, VitePress!')
```
:::
::: danger STOP
Danger zone, do not proceed
:::

::: details Click me to view the code
```js
console.log('Hello, VitePress!')
```
:::

STOP

Danger zone, do not proceed

Click me to view the code
js
console.log('Hello, VitePress!')
console.log('Hello, VitePress!')

Badge ​

Defaults ​

html
Title <Badge type="info" text="default" />
Title <Badge type="tip" text="^1.9.0" />
Title <Badge type="warning" text="beta" />
Title <Badge type="danger" text="caution" />
Title <Badge type="info" text="default" />
Title <Badge type="tip" text="^1.9.0" />
Title <Badge type="warning" text="beta" />
Title <Badge type="danger" text="caution" />

Title default Title ^1.9.0 Title beta Title caution

Custom Elements ​

html
Title <Badge type="info">custom element</Badge>
Title <Badge type="info">custom element</Badge>

Title custom element

Code Blocks ​

Focus In ​

(The coolest code block feature I've ever seen.)

TIP

Only one space is required between code and focus ([!code focus]). Two spaces are used here to prevent processing.

```js
export default {
  data () {
    return {
      msg: 'Focused!' // [!code  focus]
    }
  }
}
```
```js
export default {
  data () {
    return {
      msg: 'Focused!' // [!code  focus]
    }
  }
}
```
js
export default {
  data () {
    return {
      msg: 'Focused!' 
    }
  }
}
export default {
  data () {
    return {
      msg: 'Focused!' 
    }
  }
}

Other Features ​

Import Code Snippets ​

Code Groups ​

Markdown File Inclusion ​

Math Equations ​

Advanced Configuration ​