Oeos-Components

Appearance

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/home.md",
  "filePath": "components/utils/grammar/home.md",
  "lastUpdated": 1771321748000
}

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 ​

推荐

10. md中进行跳转 ​

去tooltip组件

11. 在markdown中使用组件不报警告 ​

  1. 警告原因分析 你遇到的波浪线警告是由 markdownlint 规则引起的，具体是 MD033 规则触发的。

markdownlint MD033 规则说明 规则名称: MD033/no-inline-html 规则目的: 禁止在 markdown 文件中使用内联 HTML 标签 触发条件: 检测到任何 HTML/XML 风格的标签（包括 Vue 组件标签）

  1. 为什么会出现此警告 虽然 <o-warning> 是你的全局 Vue 组件，但在 markdown 解析器看来：

Vue 组件标签仍属于 HTML 风格的标签语法 markdownlint 规则默认不允许任何形式的内联 HTML 即使是自定义组件标签也会被识别为 HTML 标签

  1. 解决方案

方案一：禁用特定规则（推荐） 在文件顶部添加 markdownlint 配置：

方案二：配置项目级别 markdownlint 规则 修改 .markdownlint.json 或相应配置文件： { "no-inline-html": false }

12. 在markdown中使用o-tip ​

属性名说明类型默认值
title顶部titleboolean 提示