VitePress Features

VitePress comes packed with many powerful features out of the box.

Custom Containers

You can use custom containers to highlight important information.

INFO

This is an info box.

TIP

This is a tip. Pro tip: VitePress is fast!

WARNING

This is a warning. Be careful.

DANGER

This is a danger zone. Proceed with caution.

Click me to view details

This is a hidden content that is revealed when you click the summary. Useful for long code blocks or optional information.

Test

This is a note.

Vue Components in Markdown

Since VitePress is a Vue-powered SSG, you can use Vue components directly in your Markdown files!

Code Groups

You can group code blocks together.

yaml

npm install vitepress

pnpm

pnpm add vitepress

yarn

yarn add vitepress

Syntax Highlighting

VitePress uses Shiki for syntax highlighting, which supports many languages and themes.

// Highlight lines 1 and 4
import { defineConfig } from 'vitepress'
export default defineConfig({
  title: 'My Site'
})