使用示例

Vue 组件

::: demo 这是一个预览 `Vue` 组件简介的示例

/demo-preview/counter.vue

:::

这是一个预览 Vue 组件简介的示例

Count: 0

counter.vue

<script lang="ts" setup>
import { ref } from 'vue'

const count = ref(0)
const increment = () => count.value++
</script>

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button :class="$style.modalButton" @click="increment">
      Increment
    </button>
  </div>
</template>

<style module>
.modalButton {
  padding: 4px 8px;
  border-radius: 4px;
  border-color: var(--vp-button-alt-border);
  color: var(--vp-button-alt-text);
  background-color: var(--vp-button-alt-bg);
}
</style>

隐藏源代码

TypeScript 组件

::: demo 这是一个预览 `TypeScript` 组件的示例

/demo-preview/counter.tsx

:::

这是一个预览 TypeScript 组件的示例

Count：0

counter.tsx

import { defineComponent, ref } from 'vue'
import './counter.css'

export default defineComponent({
  setup() {
    const counter = ref(0)
    return () => (
      <div>
        <p>
          Count：
          {counter.value}
        </p>
        <button class="modal-button" onClick={() => counter.value++}>Increment</button>
      </div>
    )
  },
})

隐藏源代码

兼容非 SSR 组件

::: demo 使用 `teleport` 传递组件内容的示例 {ClientOnly}

/demo-preview/non-ssr.vue

:::

使用 teleport 传递组件内容的示例

non-ssr.vue

<script setup lang="ts">
const showModal = ref(false)
</script>

<template>
  <button class="modal-button" @click="showModal = true">
    Show Modal
  </button>

  <Teleport to="body">
    <Transition name="modal">
      <div v-show="showModal" class="modal-mask">
        <div class="modal-container">
          <p>Hello from the modal!</p>
          <div class="model-footer">
            <button class="modal-button" @click="showModal = false">
              Close
            </button>
          </div>
        </div>
      </div>
    </Transition>
  </Teleport>
</template>

<style scoped>
.modal-mask {
  position: fixed;
  z-index: 200;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s ease;
}

.modal-container {
  width: 300px;
  margin: auto;
  padding: 20px 30px;
  background-color: var(--vp-c-bg);
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
  transition: all 0.3s ease;
}

.model-footer {
  margin-top: 8px;
  text-align: right;
}

.modal-button {
  padding: 4px 8px;
  border-radius: 4px;
  border-color: var(--vp-button-alt-border);
  color: var(--vp-button-alt-text);
  background-color: var(--vp-button-alt-bg);
}

.modal-button:hover {
  border-color: var(--vp-button-alt-hover-border);
  color: var(--vp-button-alt-hover-text);
  background-color: var(--vp-button-alt-hover-bg);
}

.modal-enter-from,
.modal-leave-to {
  opacity: 0;
}

.modal-enter-from .modal-container,
.modal-leave-to .modal-container {
  transform: scale(1.1);
}
</style>

隐藏源代码

提示

当打包不支持 SSR 的组件时，需要在容器中添加 {ClientOnly} 选项，确保组件在客户端渲染。

本插件使用官方 ClientOnly 组件与 defineClientComponent 辅助函数。

详情请查看 VitePress 官方文档。

行高亮

• 配置语法参考 VitePress 官方文档：在代码块中实现行高亮

::: demo 这是一个行高亮的示例

<!-- 带行高亮 -->

/demo-preview/counter.vue {1,4,10-13}

:::

这是一个行高亮的示例

Count: 0

counter.vue

<script lang="ts" setup>
import { ref } from 'vue'

const count = ref(0)
const increment = () => count.value++
</script>

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button :class="$style.modalButton" @click="increment">
      Increment
    </button>
  </div>
</template>

<style module>
.modalButton {
  padding: 4px 8px;
  border-radius: 4px;
  border-color: var(--vp-button-alt-border);
  color: var(--vp-button-alt-text);
  background-color: var(--vp-button-alt-bg);
}
</style>

隐藏源代码

行号

• 配置语法参考 VitePress 官方文档：在代码块中显示行号

::: demo 这是一个行号的示例

<!-- 带行高亮与带行号 -->

/demo-preview/counter.vue {1,4,10-13 vue:line-numbers=2 }

:::

这是一个行号的示例

Count: 0

counter.vue

<script lang="ts" setup>
import { ref } from 'vue'

const count = ref(0)
const increment = () => count.value++
</script>

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button :class="$style.modalButton" @click="increment">
      Increment
    </button>
  </div>
</template>

<style module>
.modalButton {
  padding: 4px 8px;
  border-radius: 4px;
  border-color: var(--vp-button-alt-border);
  color: var(--vp-button-alt-text);
  background-color: var(--vp-button-alt-bg);
}
</style>

隐藏源代码

注意

行号使用时需添加语言，例如 {vue:line-numbers}

代码组

• 配置语法参考 VitePress 官方文档：代码组
• {code-group} 选项或文件路径数量大于 1 时，渲染代码组

::: demo 这是一个代码组的示例,`{code-group}` 非必传 {code-group ClientOnly}

<!-- 行号 ,自定义源语言-->

/demo-preview/non-ssr.vue { vue 1,4}

<!-- 文件名默认用作标题,也可以自定义标题 -->

/demo-preview/counter.vue {1,4,10-13 vue:line-numbers=2 } [counter.vue]

<!-- 支持 Twoslash（类型悬停显示） -->

/demo-preview/twoslash.ts { ts:line-numbers twoslash} [twoslash.ts]

:::

这是一个代码组的示例，{code-group} 非必传

non-ssr.vue

<script setup lang="ts">
const showModal = ref(false)
</script>

<template>
  <button class="modal-button" @click="showModal = true">
    Show Modal
  </button>

  <Teleport to="body">
    <Transition name="modal">
      <div v-show="showModal" class="modal-mask">
        <div class="modal-container">
          <p>Hello from the modal!</p>
          <div class="model-footer">
            <button class="modal-button" @click="showModal = false">
              Close
            </button>
          </div>
        </div>
      </div>
    </Transition>
  </Teleport>
</template>

<style scoped>
.modal-mask {
  position: fixed;
  z-index: 200;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s ease;
}

.modal-container {
  width: 300px;
  margin: auto;
  padding: 20px 30px;
  background-color: var(--vp-c-bg);
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
  transition: all 0.3s ease;
}

.model-footer {
  margin-top: 8px;
  text-align: right;
}

.modal-button {
  padding: 4px 8px;
  border-radius: 4px;
  border-color: var(--vp-button-alt-border);
  color: var(--vp-button-alt-text);
  background-color: var(--vp-button-alt-bg);
}

.modal-button:hover {
  border-color: var(--vp-button-alt-hover-border);
  color: var(--vp-button-alt-hover-text);
  background-color: var(--vp-button-alt-hover-bg);
}

.modal-enter-from,
.modal-leave-to {
  opacity: 0;
}

.modal-enter-from .modal-container,
.modal-leave-to .modal-container {
  transform: scale(1.1);
}
</style>

counter.vue

<script lang="ts" setup>
import { ref } from 'vue'

const count = ref(0)
const increment = () => count.value++
</script>

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button :class="$style.modalButton" @click="increment">
      Increment
    </button>
  </div>
</template>

<style module>
.modalButton {
  padding: 4px 8px;
  border-radius: 4px;
  border-color: var(--vp-button-alt-border);
  color: var(--vp-button-alt-text);
  background-color: var(--vp-button-alt-bg);
}
</style>

twoslash.ts

import type { EnhanceAppContext } from 'vitepress'
import TwoslashFloatingVue from '@shikijs/vitepress-twoslash/client'
import '@shikijs/vitepress-twoslash/style.css'

export default {
  enhanceApp({ app }: EnhanceAppContext) {
    app.use(TwoslashFloatingVue)
  },
}

隐藏源代码

注意

仅渲染第一个代码块的组件。