vitepress sandbox

Appearance

Options ​

hideEditor from @0.3.0 ​

default: false

markdown code
md
      
      ::: sandbox {hideEditor}
:::
    
<template>
  <h1>Hello {{ msg }}</h1>
</template>

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

autorun ​

default: true

set autorun=false，then you should click the run button in editor area.

markdown code
md
      
      ::: sandbox {autorun=false}
:::
<template>
<h1>Hello {{ msg }}</h1>
</template>

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

coderHeight from @0.3.0 ​

default: undefined

markdown code
md
      
      ::: sandbox {coderHeight=512}
```vue /src/App.vue
<template>
  <h3>The coder area height: {{ msg }}</h3>
</template>

<script setup>
import { ref } from 'vue';
const msg = ref('512px');
</script>
```
:::
    
<template>
  <h1>Hello {{ msg }}</h1>
</template>

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

previewHeight from @0.3.0 ​

default: undefined

markdown code
md
      
      ::: sandbox {previewHeight=512}
```vue /src/App.vue
<template>
  <h3>Preview Height: {{ msg }}</h3>
</template>

<script setup>
import { ref } from 'vue';
const msg = ref('512px');
</script>
```
:::
    
<template>
  <h1>Hello {{ msg }}</h1>
</template>

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

showNavigator ​

default: false

markdown code
md
      
      ::: sandbox {showNavigator}
:::
    
<template>
  <h1>Hello {{ msg }}</h1>
</template>

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

showLineNumbers ​

default: false

markdown code
md
      
      ::: sandbox {showLineNumbers}
:::
    
<template>
  <h1>Hello {{ msg }}</h1>
</template>

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

wrapContent ​

default: false

markdown code
md
      
      ::: sandbox {wrapContent}
:::
    
<template>
  <h1>Hello {{ msg }}</h1>
</template>

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

showRefreshButton ​

default: true

It will not take effect when enable showNavigator

markdown code
md
      
      ::: sandbox {showRefreshButton=false}
:::
    
<template>
  <h1>Hello {{ msg }}</h1>
</template>

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

showTabs ​

default: true

markdown code
md
      
      ::: sandbox {showTabs=false}
:::
    
<template>
  <h1>Hello {{ msg }}</h1>
</template>

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

closableTabs ​

show the close icon of tabs

default: false

markdown code
md
      
      ::: sandbox {template=vue3-ts closableTabs}
```js /src/person.ts
const name = 'Tom';
export { name };
```

```vue /src/App.vue
<script setup lang="ts">
import { ref } from 'vue';
import { name } from './person.ts';

const person = ref<string>(name);
</script>

<template>
  <h1>Hi, I am {{ person }}</h1>
</template>
```
:::
    
<template>
  <h1>Hello {{ msg }}</h1>
</template>

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

showConsole ​

show the console log panel.

default: false

markdown code
md
      
      ::: sandbox {showConsole}
:::
    
<template>
  <h1>Hello {{ msg }}</h1>
</template>

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

showConsoleButton ​

show the button which can toggle the console panel.

default: true

markdown code
md
      
      ::: sandbox {showConsoleButton=false}
:::
    
<template>
  <h1>Hello {{ msg }}</h1>
</template>

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

resizablePanels ​

enable resizable editor width

default: true

markdown code
md
      
      ::: sandbox {resizablePanels=false}
:::
    
<template>
  <h1>Hello {{ msg }}</h1>
</template>

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

readOnly ​

set all files readonly or not.

default: false

  • readOnly globally

all files are readOnly

markdown code
md
      
      ::: sandbox {template=vue3-ts readOnly}
```js /src/person.ts
const name = 'Tom';
export { name };
```

```vue /src/App.vue
<script setup lang="ts">
import { ref } from 'vue';
import { name } from './person.ts';

const person = ref<string>(name);
</script>

<template>
  <h1>Hi, I am {{ person }}</h1>
</template>
```
:::
    
<template>
  <h1>Hello {{ msg }}</h1>
</template>

<script setup lang="ts">
import { ref } from 'vue';
const msg = ref<string>('world');
</script>
Read-only
  • readOnly by file

set /src/App.vue with readOnly

markdown code
md
      
      ::: sandbox {template=vue3-ts}
```js /src/person.ts
const name = 'Tom';
export { name };
```

```vue /src/App.vue [readOnly]
<script setup lang="ts">
import { ref } from 'vue';
import { name } from './person.ts';

const person = ref<string>(name);
</script>

<template>
  <h1>Hi, I am {{ person }}</h1>
</template>
```
:::
    
<template>
  <h1>Hello {{ msg }}</h1>
</template>

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

showReadOnly ​

show readOnly label of file.

default: true

markdown code
md
      
      ::: sandbox {template=vue3-ts readOnly showReadOnly=false}
```js /src/person.ts
const name = 'Tom';
export { name };
```

```vue /src/App.vue
<script setup lang="ts">
import { ref } from 'vue';
import { name } from './person.ts';

const person = ref<string>(name);
</script>

<template>
  <h1>Hi, I am {{ person }}</h1>
</template>
```
:::
    
<template>
  <h1>Hello {{ msg }}</h1>
</template>

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

Released under the MIT License.

Copyright © 2022-present jerrywu001