Skip to content
On this page

vitepress的一些常用语法(可以在写文档的时候参考)

Hidden Title

1. tip提示框

提示

andy加油.

TIP

This is a tip.

WARNING

This is a warning.

DANGER

This is a dangerous.

Details

This is a details block.

2. 通过:::demo使用示例.vue文件

3. emoji文字

🎉 💯

4. 高亮显示某一行

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

5. 直接在.md文件中写代码

123456789101112131415161718192021222324252627282930

{
  "title": "vitepress的一些常用语法(可以在写文档的时候参考)",
  "description": "",
  "frontmatter": {},
  "headers": [],
  "relativePath": "components/utils/grammar.md",
  "filePath": "components/utils/grammar.md",
  "lastUpdated": 1767842433000
}

6. 折叠代码

Details

7. 直接在md文档中引入文件

<<< ../../../packages/components/test/src/index.vue

vue
<script setup lang="ts">
defineOptions({
  name: 'OTest',
})
import { ref, getCurrentInstance } from 'vue'

const { proxy } = getCurrentInstance()
</script>

<template>
  <div>
    <div>packages/components/test/src/index.vue</div>
  </div>
</template>
<script setup lang="ts">
defineOptions({
  name: 'OTest',
})
import { ref, getCurrentInstance } from 'vue'

const { proxy } = getCurrentInstance()
</script>

<template>
  <div>
    <div>packages/components/test/src/index.vue</div>
  </div>
</template>

8. 代码组

sh
pnpm add oeos-components -S
pnpm add oeos-components -S
sh
yarn add oeos-components
yarn add oeos-components
sh
npm install oeos-components -S
npm install oeos-components -S

9. md中常用组件el-tag

推荐