Documentation
Writing Documentation
Code Blocks
Code blocks are written in .mdx files using the three-backtick syntax. The language is added after the first set of backticks.
```svelte
<T.Mesh position={5} />
```
renders as:
<T.Mesh position=\{5\} />
Highlighting Lines
You can highlight lines by adding an attribute to the code block.
Highlight a single line
```svelte {2}
<T.Mesh position={5}>
<T.Mesh position={10}>
<T.Mesh position={20}>
```
<T.Mesh position={5}>
<T.Mesh position={10}>
<T.Mesh position={20}>
Highlight multiple lines
```svelte {2,3}
<T.Mesh position={5}>
<T.Mesh position={10}>
<T.Mesh position={20}>
```
<T.Mesh position={5}>
<T.Mesh position={10}>
<T.Mesh position={20}>
Highlight a range
```svelte {1-3}
<T.Mesh position={5}>
<T.Mesh position={10}>
<T.Mesh position={20}>
```
<T.Mesh position={5}>
<T.Mesh position={10}>
<T.Mesh position={20}>
Highlight as added, removed or modified line
```svelte {1}+ {2}- {3}m
<T.Mesh position={5}>
<T.Mesh position={10}>
<T.Mesh position={20}>
```
<T.Mesh position={5}>
<T.Mesh position={10}>
<T.Mesh position={20}>
Add a title
```svelte title=“App.svelte”
<T.Mesh position={5}>
<T.Mesh position={10}>
<T.Mesh position={20}>
```
<T.Mesh position={5}>
<T.Mesh position={10}>
<T.Mesh position={20}>
Add custom css classes
```svelte class=“glow-blue/50”
<T.Mesh position={5}>
<T.Mesh position={10}>
<T.Mesh position={20}>
```
<T.Mesh position={5}>
<T.Mesh position={10}>
<T.Mesh position={20}>
Auto-imported components
These components can be used in .mdx files without importing them.
<Tip>
A tip component.
<Tip color="orange">orange</Tip>
Available styles:
color="orange
color="blue">
color="dark">
color="green"
type="info"
type="warning"
type="danger"
type="experimental"
type="note"
type="tip"
Tip with Title
title="Tip with Title"
Glowing Tips
Add glow to tips by adding the glow
attribute.
color="orange"
glow
<Example>
The component <Example>
renders an example that is defined in the src/examples
folder.
<Example path="core/use-frame" />
renders as:
Hide the code:
<Example
path="core/use-frame"
hideCode
/>
Hide the preview:
<Example
path="core/use-frame"
hidePreview
/>
Expand the code section by default:
<Example
path="core/use-frame"
expandCode
/>
Show a specific file by default:
<Example
path="core/use-frame"
showFile="directory/file.ts"
/>
Embed the example preview as an , which helps when third party UI libraries are used that overlay the whole page like Theatre.js Studio:
<Example
path="core/use-frame"
/>