vitepress sandbox

Appearance

Use snippets ​

setup ​

  • create a folder, for example: snippets
  • create your file snippets

Floders are:

snippets folder

basic ​

md
::: sandbox {entry=/main.js}
<<< @/snippets/App.vue{#active}

<<< @/snippets/main.js
:::

::: sandbox
<<< @/snippets/App.vue{prefix=/src/}

<<< @/snippets/main.js{prefix=/src/}
:::
::: sandbox {entry=/main.js}
<<< @/snippets/App.vue{#active}

<<< @/snippets/main.js
:::

::: sandbox
<<< @/snippets/App.vue{prefix=/src/}

<<< @/snippets/main.js{prefix=/src/}
:::

prefix default to /

<template>
<div>{{ hello }}</div>
</template>

<script setup>
import { ref } from 'vue';

const hello = ref('Hello World!');
</script>

<template>
  <h1>Hello {{ msg }}</h1>
</template>

<script setup>
import { ref } from 'vue';
const msg = ref('world');
</script>

active by file ​

For example, active the /src/main.js

md
::: sandbox
<<< @/snippets/App.vue{prefix=/src/}

<<< @/snippets/main.js{prefix=#active/src/}
:::
::: sandbox
<<< @/snippets/App.vue{prefix=/src/}

<<< @/snippets/main.js{prefix=#active/src/}
:::
import App from './App.vue';
import { createApp } from 'vue';
console.log('hello');

createApp(App).mount('#app');

readOnly by file ​

For example, active the /src/main.js

md
::: sandbox
<<< @/snippets/App.vue{prefix=#readOnly/src/}

<<< @/snippets/main.js{prefix=/src/}
:::
::: sandbox
<<< @/snippets/App.vue{prefix=#readOnly/src/}

<<< @/snippets/main.js{prefix=/src/}
:::
<template>
  <h1>Hello {{ msg }}</h1>
</template>

<script setup>
import { ref } from 'vue';
const msg = ref('world');
</script>
Read-only

active & readOnly by file ​

For example, active the /src/main.js

md
::: sandbox
<<< @/snippets/App.vue{prefix=/src/}

<<< @/snippets/main.js{prefix=#active#readOnly/src/}
:::
::: sandbox
<<< @/snippets/App.vue{prefix=/src/}

<<< @/snippets/main.js{prefix=#active#readOnly/src/}
:::
import App from './App.vue';
import { createApp } from 'vue';
console.log('hello');

createApp(App).mount('#app');
Read-only

hidde some file ​

md
::: sandbox {template=react}
<<< @/snippets/App.js{#hidden}

```js /Clock.js [active]
export default function Clock({ color, time }) {
  return (
    <h1 style={{ color: color }}>
      {time}
    </h1>
  );
}
```
:::
::: sandbox {template=react}
<<< @/snippets/App.js{#hidden}

```js /Clock.js [active]
export default function Clock({ color, time }) {
  return (
    <h1 style={{ color: color }}>
      {time}
    </h1>
  );
}
```
:::
export default function Clock({ color, time }) {
  return (
    <h1 style={{ color: color }}>
      {time}
    </h1>
  );
}

Released under the MIT License.

Copyright © 2022-present jerrywu001