VitePress 基础

代码高亮

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 {
  data() {
    return {
      msg: "Focused!", 
    };
  },
};

代码块中的颜色差异

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

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

自定义容器

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.

点我查看代码

console.log("Hello, VitePress!");

表格

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

GitHub 风格的警报

更新时间：2024 年

哈哈

强调用户在快速浏览文档时也不应忽略的重要信息。

TIP

有助于用户更顺利达成目标的建议性信息。

IMPORTANT

对用户达成目标至关重要的信息。

WARNING

因为可能存在风险，所以需要用户立即关注的关键内容。

CAUTION

行为可能带来的负面影响。

使用 vue 组件

<script setup>
import { ref } from 'vue'

const count = ref(0)
</script>

The count is: {{ count }}

<button :class="$style.button" @click="count++">Increment</button>

<style module>
.button {
  color: red;
  font-weight: bold;
}
</style>