Mydoc

外观

字体 ​

斜体文本
粗体文本
粗斜体文本

删除线 ​

BAIDU.COM

下划线 ​

带下划线文本

列表 ​

  • 1
  • 2
  • 3

链接 ​

这是一个链接

图片 ​

alt 属性文本

视频 ​

音乐 ​

设置字体颜色 ​




表格 ​

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

表情符号 ​

🎉 💯

容器 ​

信息

This is an info box.

提示

This is a tip.

警告

This is a warning.

危险

This is a dangerous warning.

详细信息

This is a details block.

自定义容器 ​

STOP

Danger zone, do not proceed

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

语法高亮 ​

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

代码块行突出 ​

js
export default {
  data () {
    return {
      msg: 'Highlighted!'
    }
  }
}
export default {
  data () {
    return {
      msg: 'Highlighted!'
    }
  }
}
js
export default { // Highlighted
  data () {
    return {
      msg: `Highlighted!
      This line isn't highlighted,
      but this and the next 2 are.`,
      motd: 'VitePress is awesome',
      lorem: 'ipsum'
    }
  }
}
export default { // Highlighted
  data () {
    return {
      msg: `Highlighted!
      This line isn't highlighted,
      but this and the next 2 are.`,
      motd: 'VitePress is awesome',
      lorem: 'ipsum'
    }
  }
}
js
export default {
  data() {
    return {
      msg: 'Highlighted!' 
    }
  }
}
export default {
  data() {
    return {
      msg: 'Highlighted!' 
    }
  }
}
js
export default {
  data() {
    return {
      msg: 'Focused!' 
    }
  }
}
export default {
  data() {
    return {
      msg: 'Focused!' 
    }
  }
}

代码块色彩差异 ​

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

代码块错误和警告 ​

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

代码块行号 ​

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

代码组 ​

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

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

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

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

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

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

export default config

导入代码片段 ​

css
<<< @/code/cs.ts
<<< @/code/cs.ts{2} //行突出显示
<<< @/code/cs.ts
<<< @/code/cs.ts{2} //行突出显示
ts
// #region snippet
function foo() {
  // ..
}
// #endregion snippet

export default foo
// #region snippet
function foo() {
  // ..
}
// #endregion snippet

export default foo

徽章 ​

default^1.9.0betacautioncustom element

图片浅色与深色模式 ​

md
<!-- 浅色模式 -->

![](https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ-w7jYJD-PBaozaH5WdubTPnBdi-XcQ4N96w&usqp=CAU){.light-only}

<!-- 深色模式 -->

![](https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRCHxR2C_q8ugOMQzSmMovD3ni-z1QqTopSjg&usqp=CAU){.dark-only}
<!-- 浅色模式 -->

![](https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ-w7jYJD-PBaozaH5WdubTPnBdi-XcQ4N96w&usqp=CAU){.light-only}

<!-- 深色模式 -->

![](https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRCHxR2C_q8ugOMQzSmMovD3ni-z1QqTopSjg&usqp=CAU){.dark-only}
md
<!-- 深色模式 -->

![](https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRCHxR2C_q8ugOMQzSmMovD3ni-z1QqTopSjg&usqp=CAU#dark)

<!-- 浅色模式 -->

![](https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ-w7jYJD-PBaozaH5WdubTPnBdi-XcQ4N96w&usqp=CAU#light)
<!-- 深色模式 -->

![](https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRCHxR2C_q8ugOMQzSmMovD3ni-z1QqTopSjg&usqp=CAU#dark)

<!-- 浅色模式 -->

![](https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ-w7jYJD-PBaozaH5WdubTPnBdi-XcQ4N96w&usqp=CAU#light)

示例 ​