VitePress

Appearance

VitePress Markdown 扩展说明 ​

Frontmatter ​

GitHub-Style Tables ​

输入

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

输出

TablesAreCool
col 3 isright-aligned$1600
col 2 iscentered$12
zebra stripesare neat$1

Emoji ​

输入

:tada: :100:

输出

🎉 💯

Table of Contents ​

输入

[[toc]]

输出

Custom Containers ​

Default Title ​

输入

::: 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 Title ​

输入

::: 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!')

raw ​

输入

::: details

- Install required deps with your preferred package manager:

  ```sh
  $ npm install -D postcss postcss-prefix-selector
  ```

- Create a file named `docs/.postcssrc.cjs` and add this to it:

  ```js
  module.exports = {
    plugins: {
      'postcss-prefix-selector': {
        prefix: ':not(:where(.vp-raw *))',
        includeFiles: [/vp-doc\.css/],
        transform(prefix, _selector) {
          const [selector, pseudo = ''] = _selector.split(/(:\S*)$/)
          return selector + prefix + pseudo
        }
      }
    }
  }
  ```

:::

输出

Details

  • Install required deps with your preferred package manager:

    sh
    $ npm install -D postcss postcss-prefix-selector

  • Create a file named docs/.postcssrc.cjs and add this to it:

    js
    module.exports = {
  plugins: {
    'postcss-prefix-selector': {
      prefix: ':not(:where(.vp-raw *))',
      includeFiles: [/vp-doc\.css/],
      transform(prefix, _selector) {
        const [selector, pseudo = ''] = _selector.split(/(:\S*)$/)
        return selector + prefix + pseudo
      }
    }
  }
}

Syntax Highlighting in Code Blocks ​

输入

```js
export default {
  name: 'MyComponent',
  // ...
}
```
```html
<ul>
  <li v-for="todo in todos" :key="todo.id">
    {{ todo.text }}
  </li>
</ul>
```

输出

js
export default {
  name: 'MyComponent',
  // ...
}
html
<ul>
  <li v-for="todo in todos" :key="todo.id">
    {{ todo.text }}
  </li>
</ul>

Line Highlighting in Code Blocks ​

输入

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

输出

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

Focus in Code Blocks ​

输入

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

输出

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

Colored Diffs in Code Blocks ​

输入

```js
export default {
  data () {
    return {
      msg: 'Removed'
      msg: 'Added'
    }
  }
}
```

输出

js
export default {
  data () {
    return {
      msg: 'Removed'
      msg: 'Added'
    }
  }
}

Errors and Warnings in Code Blocks ​

输入

```js
export default {
  data () {
    return {
      msg: 'Error',
      msg: 'Warning'
    }
  }
}
```

输出

js
export default {
  data () {
    return {
      msg: 'Error', 
      msg: 'Warning'
    }
  }
}

Line Numbers ​

输入

```ts {1}
// line-numbers is disabled by default
const line2 = 'This is line 2'
const line3 = 'This is line 3'
```

```ts:line-numbers {1}
// line-numbers is enabled
const line2 = 'This is line 2'
const line3 = 'This is line 3'
```

输出

ts
// line-numbers is disabled by default
const line2 = 'This is line 2'
const line3 = 'This is line 3'
ts
// line-numbers is enabled
const line2 = 'This is line 2'
const line3 = 'This is line 3'

Import Code Snippets ​

You can import code snippets from existing files via following syntax:

md
<<< @/filepath

It also supports line highlighting:

md
<<< @/filepath{highlightLines}

Input

md
<<< @/frontend/markdown/snippets/snippet.js{2}

Code file

js
export default function () {
  // ..
}

Code Groups ​

输入

::: code-group

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

export default config
```

```ts [config.ts]
import type { UserConfig } from 'vitepress'

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

export default config
```

:::

输出

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

export default config
ts
import type { UserConfig } from 'vitepress'

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

export default config

Markdown File Inclusion ​

输入

输出

Advanced Configuration ​

输入

输出