Appearance
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. 高亮显示某一行
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": 1780911625000
}6. 折叠代码
Details
7. 直接在md文档中引入文件
<<< ../../../../packages/components/test/src/index.vue
vue
<script setup lang="ts">
import { ref } from 'vue'
const cc = ref(123)
const isShow = ref(false)
</script>
<template>
<div>
<el-input v-model="cc" v-copy="cc"></el-input>
1233334455
<div></div>
<el-button type="primary" size="small">测试02</el-button>
<s-button theme="chenghua" size="small" type="primary"></s-button>
<!-- <s-table></s-table> -->
<s-empty description="暂无数据" width="48" height="48"></s-empty>
<el-dialog title="33"></el-dialog>
<s-dialog
v-model="isShow"
title2="12321"
theme="chenghua"
type="drawer"
confirm-text=""
:show-confirm="false"
></s-dialog>
<s-tag theme="chenghua">我不服</s-tag>
<s-flex justify="space-between"></s-flex>
<SItem label="label" value="value" src="https://img.yzcdn.cn/vant/logo.png"></SItem>
<hr />
<SItem label="label" value="value"></SItem>
<s-title title="插槽用法" tb="8"></s-title>
<s-item class="abc" label="label" value="value">
<template #img>
<img src="https://img.yzcdn.cn/vant/logo.png" />
</template>
<template #label>label</template>
<template #value>value</template>
</s-item>
<s-date-picker></s-date-picker>
<s-input v-model="cc" height="30" size="large" :clearable="false" theme="chenghua"></s-input>
<!-- <s-select multiple label="1" ></s-select> -->
</div>
</template><script setup lang="ts">
import { ref } from 'vue'
const cc = ref(123)
const isShow = ref(false)
</script>
<template>
<div>
<el-input v-model="cc" v-copy="cc"></el-input>
1233334455
<div></div>
<el-button type="primary" size="small">测试02</el-button>
<s-button theme="chenghua" size="small" type="primary"></s-button>
<!-- <s-table></s-table> -->
<s-empty description="暂无数据" width="48" height="48"></s-empty>
<el-dialog title="33"></el-dialog>
<s-dialog
v-model="isShow"
title2="12321"
theme="chenghua"
type="drawer"
confirm-text=""
:show-confirm="false"
></s-dialog>
<s-tag theme="chenghua">我不服</s-tag>
<s-flex justify="space-between"></s-flex>
<SItem label="label" value="value" src="https://img.yzcdn.cn/vant/logo.png"></SItem>
<hr />
<SItem label="label" value="value"></SItem>
<s-title title="插槽用法" tb="8"></s-title>
<s-item class="abc" label="label" value="value">
<template #img>
<img src="https://img.yzcdn.cn/vant/logo.png" />
</template>
<template #label>label</template>
<template #value>value</template>
</s-item>
<s-date-picker></s-date-picker>
<s-input v-model="cc" height="30" size="large" :clearable="false" theme="chenghua"></s-input>
<!-- <s-select multiple label="1" ></s-select> -->
</div>
</template>8. 代码组
sh
pnpm add sybz-components -Spnpm add sybz-components -Ssh
yarn add sybz-componentsyarn add sybz-componentssh
npm install sybz-components -Snpm install sybz-components -S9. md中常用组件el-tag
推荐10. md中进行跳转
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 | 提示 |