threlte logo
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}>
```
App.svelte
<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.

example.mdx
<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.mdx
<Example path="core/use-frame" />

renders as:

Hide the code:

example.mdx
<Example
  path="core/use-frame"
  hideCode
/>

Hide the preview:

example.mdx
<Example
  path="core/use-frame"
  hidePreview
/>

Expand the code section by default:

example.mdx
<Example
  path="core/use-frame"
  expandCode
/>

Show a specific file by default:

example.mdx
<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.mdx
<Example
  path="core/use-frame"

/>