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

Hidden Title

说明

该页面用于记录项目文档编写时常用的 VitePress 语法片段和示例。

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. 高亮显示某一行

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": 1784182149000
}

6. 折叠代码

Details

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

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

vue

<script setup lang="ts">
import { ref, getCurrentInstance } from 'vue'
import { useStyleProps } from '@/hooks/useStyleProps'
const { proxy } = getCurrentInstance()
const { style } = useStyleProps()
</script>

<template>
  <div :style="style">
    <div>packages/components/test/src/index.vue</div>
  </div>
</template>

<script setup lang="ts">
import { ref, getCurrentInstance } from 'vue'
import { useStyleProps } from '@/hooks/useStyleProps'
const { proxy } = getCurrentInstance()
const { style } = useStyleProps()
</script>

<template>
  <div :style="style">
    <div>packages/components/test/src/index.vue</div>
  </div>
</template>

8. 代码组

pnpmbunnpmyarn

pnpm add sybz-components -S

pnpm add sybz-components -S

bun add sybz-components

bun add sybz-components

npm install sybz-components -S

npm install sybz-components -S

yarn add sybz-components

yarn add sybz-components

9. md中常用组件`el-tag`

10. md中进行跳转

去tooltip组件

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

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

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

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

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

解决方案

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

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

12. 在markdown中使用s-tip

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

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

Hidden Title ​

说明 ​

1. tip提示框 ​

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

3. emoji文字 ​

4. 高亮显示某一行 ​

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

6. 折叠代码 ​

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

8. 代码组 ​

9. md中常用组件el-tag ​

10. md中进行跳转 ​

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

12. 在markdown中使用s-tip ​