Webdevelop.PRO

🎉 💯

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.

STOP

Danger zone, do not proceed

Click me to view the code

console.log('Hello, VitePress!')

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.

export default {
  name: 'MyComponent',
  // ...
}

html

<ul>
  <li v-for="todo in todos" :key="todo.id">
    {{ todo.text }}
  </li>
</ul>

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

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

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

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

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

// line-numbers is enabled
const line2 = 'This is line 2'
const line3 = 'This is line 3'

// line-numbers is enabled and start from 2
const line3 = 'This is line 3'
const line4 = 'This is line 4'

config.jsconfig.ts

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

export default config

import type { UserConfig } from 'vitepress'

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

export default config