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

🎉 💯

Custom Containers

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

STOP

Danger zone, do not proceed

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

GitHub-flavored Alerts

NOTE

Highlights information that users should take into account, even when skimming.

TIP

Optional information to help a user be more successful.

IMPORTANT

Crucial information necessary for users to succeed.

WARNING

Critical content demanding immediate user attention due to potential risks.

CAUTION

Negative potential consequences of an action.

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>

Line Highlighting in Code Blocks

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

Focus in Code Blocks

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

Colored Diffs in Code Blocks

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

Errors and Warnings in Code Blocks

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

Line Numbers

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'
ts
// line-numbers is enabled and start from 2
const line3 = 'This is line 3'
const line4 = 'This is line 4'

Code Groups

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

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

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

export default config
Help Ukraine to stop russian aggression