Vant-Pro

目录表

输入

[[toc]]

输出

Emoji 🎉

emoji字典

输入

:tada: :100:

输出

🎉 💯

徽标

输入

Title <Badge type="info" text="default" />

Title <Badge type="tip" text="^1.9.0" />

Title <Badge type="warning">beta</Badge>

Title <Badge type="danger">caution</Badge>

输出

Title default

Title ^1.9.0

Title beta

Title caution

自定义容器

输入

::: info
这是一个信息框。
:::

::: tip
这是一个提示。
:::

::: warning
这是一个警告。
:::

::: danger
这是一个危险警告。
:::

::: details
这是一个详细信息块。
:::

输出

INFO

这是一个信息框。

TIP

这是一个提示。

WARNING

这是一个警告。

DANGER

这是一个危险警告。

Details

这是一个详细信息块。

表格

输入

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

输出

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

代码高亮

方法1: {5-8}、{4,7,9}、{4,7-13,16,23-27,40}
方法2: // [!code highlight]

输入

```js{1-2,4}
export default {
  data () {
    return {}
  }
} // [!!code highlight]
```

输出

export default {
  data () {
    return {}
  }
}

代码聚焦

// [!code focus:<lines>]

:<lines> 聚焦的行数(选填)

输入

```js
export default {
    data() {} // [!!code focus]
}
```

输出

export default {
    data() {} 
}

代码修改

// [!code --] 或 // [!code ++]

输入

```js
export default {
    data() {
        return {
            msg1: "Removed", // [!!code --]
            msg2: "Added" // [!!code ++]
        }
    }
}
```

输出

export default {
    data() {
        return {
            msg1: "Removed", 
            msg2: "Added"
        }
    }
}

代码“错误”和“警告”

// [!code warning] 或 // [!code error]

输入

```js
export default {
    data() {
        return {
            msg1: "Error", // [!!code error]
            msg2: "Warning" // [!!code warning]
        }
    }
}
```

输出

export default {
    data() {
        return {
            msg1: "Error", 
            msg2: "Warning"
        }
    }
}

导入文件代码

@ 对应于 VitePress 配置的 srcDir 选项，默认 views

输入

<<< @/reference/component/index.vue{5-10}

输出

vue

<script setup lang="ts">
import { StarTwoTone } from "@ant-design/icons-vue"
import { theme, App, Space, Tag } from "ant-design-vue"
import { useData } from "vitepress"
import { reactive } from "vue"

import JsonViewer from "@/components/JsonViewer.vue"

/** HOOKS: 获取`vitepress`当前站点配置 */
const siteConfig = useData()
/** HOOKS: 获取`ant`当前主题 配置 */
const { token: antThemeConfig } = theme.useToken()

// #region snippet

/** REACTIVE: 数据 */
const data = reactive({
    /** `vitepress`当前站点配置 */
    siteConfig,
    /** `ant`当前主题配置 */
    antThemeConfig
})

// #endregion snippet
</script>

<template>
    <App>
        <Space style="width: 100%" direction="vertical">
            <Tag class="tag" :bordered="false" :color="data.antThemeConfig.colorPrimary">
                <template #icon>
                    <StarTwoTone :two-tone-color="data.antThemeConfig.colorPrimary" />
                </template>
                vitepress 站点配置
            </Tag>

            <JsonViewer :value="data.siteConfig" :expand-depth="1" />

            <Tag class="tag" :bordered="false" :color="data.antThemeConfig.colorPrimary">
                <template #icon>
                    <StarTwoTone :two-tone-color="data.antThemeConfig.colorPrimary" />
                </template>
                Ant 主题配置
            </Tag>

            <JsonViewer :value="data.antThemeConfig" />
        </Space>
    </App>
</template>

<style lang="scss" scoped>
.tag {
    padding: 2px 10px;
    font-size: 15px;
}
</style>

导入文件代码片段

@ 对应于 VitePress 配置的 srcDir 选项，默认 views

输入

<<< @/reference/component/index.vue#snippet

输出

vue


/** REACTIVE: 数据 */
const data = reactive({
    /** `vitepress`当前站点配置 */
    siteConfig,
    /** `ant`当前主题配置 */
    antThemeConfig
})

代码分组

输入

::: code-group

```js [config.js]
export default config
```

```ts [config.ts]
export default config
```

:::

输出

config.jsconfig.ts

export default config.js

export default config.ts

文件代码分组

@ 对应于 VitePress 配置的 srcDir 选项，默认 views

输入

::: code-group

<<< @/reference/component/index.vue{5-10}

<<< @/reference/component/index.vue#snippet

:::

输出

index.vueindex.vue

vue

<script setup lang="ts">
import { StarTwoTone } from "@ant-design/icons-vue"
import { theme, App, Space, Tag } from "ant-design-vue"
import { useData } from "vitepress"
import { reactive } from "vue"

import JsonViewer from "@/components/JsonViewer.vue"

/** HOOKS: 获取`vitepress`当前站点配置 */
const siteConfig = useData()
/** HOOKS: 获取`ant`当前主题 配置 */
const { token: antThemeConfig } = theme.useToken()

// #region snippet

/** REACTIVE: 数据 */
const data = reactive({
    /** `vitepress`当前站点配置 */
    siteConfig,
    /** `ant`当前主题配置 */
    antThemeConfig
})

// #endregion snippet
</script>

<template>
    <App>
        <Space style="width: 100%" direction="vertical">
            <Tag class="tag" :bordered="false" :color="data.antThemeConfig.colorPrimary">
                <template #icon>
                    <StarTwoTone :two-tone-color="data.antThemeConfig.colorPrimary" />
                </template>
                vitepress 站点配置
            </Tag>

            <JsonViewer :value="data.siteConfig" :expand-depth="1" />

            <Tag class="tag" :bordered="false" :color="data.antThemeConfig.colorPrimary">
                <template #icon>
                    <StarTwoTone :two-tone-color="data.antThemeConfig.colorPrimary" />
                </template>
                Ant 主题配置
            </Tag>

            <JsonViewer :value="data.antThemeConfig" />
        </Space>
    </App>
</template>

<style lang="scss" scoped>
.tag {
    padding: 2px 10px;
    font-size: 15px;
}
</style>

vue


/** REACTIVE: 数据 */
const data = reactive({
    /** `vitepress`当前站点配置 */
    siteConfig,
    /** `ant`当前主题配置 */
    antThemeConfig
})

内嵌 vue 文件

@ 对应于 VitePress 的 vite 配置的 resolve.alias 选项，默认 src

输入

vue

<script setup>
import TestComponent from "@/views/reference/component/index.vue"
import { toAssetsAbsoluteUrl } from "@/utils"
</script>

<TestComponent />

输出

vitepress 站点配置

Ant 主题配置

内嵌 markdown 文件

@ 对应于 VitePress 配置的 srcDir 选项，默认 views

{x,x} 内嵌几行至几行(选填)

输入

<!-- @include: @/index.md{x,x} -->

输出

layout: home

导航VitePress页面

输入

[首页](/)
[目录](/reference/component/#table-of-contents)

输出

首页目录

导航非VitePress页面

输入

vue

<a href="https://vitepress.dev/zh/" target="_self">vitepress</a>

输出

vitepress

使用assets目录资源

@ 对应于 VitePress 的 vite 配置的 resolve.alias 选项，默认 src

TIP

必须使用 @ 符号否则会报错

输入

vue

<img style="width: 150px" src="@/assets/image/bg.png" alt="" />

输出

使用public目录资源

TIP

推荐使用 src/utils/url 目录提供的 toAssetsAbsoluteUrl 方法拼接路径

如果 VITE_BASE_PATH 为空，可直接用 / 拼接，例如: /image/game.jpg

输入

vue

<img style="width: 150px" :src="toAssetsAbsoluteUrl(`/image/game.jpg`)" alt="" />

输出

查看文档获取完整的 Markdown 扩展列表。

目录表 ​

Emoji 🎉 ​

徽标 ​

自定义容器 ​

表格 ​

代码高亮 ​

代码聚焦 ​

代码修改 ​

代码“错误”和“警告” ​

导入文件代码 ​

导入文件代码片段 ​

代码分组 ​

文件代码分组 ​

内嵌 vue 文件 ​

内嵌 markdown 文件 ​

导航VitePress页面 ​

导航非VitePress页面 ​

使用assets目录资源 ​

使用public目录资源 ​

更多 ​

目录表

Emoji 🎉

徽标

自定义容器

表格

代码高亮

代码聚焦

代码修改

代码“错误”和“警告”

导入文件代码

导入文件代码片段

代码分组

文件代码分组

内嵌 vue 文件

内嵌 markdown 文件

导航VitePress页面

导航非VitePress页面

使用assets目录资源

使用public目录资源

更多