Code

Code is highlighted once, at build time, with Shiki — the browser never loads a highlighter or a grammar.

Fences with steps

```ts {1|3-5|all} [example.ts]
const answer = 42;

function ask(question: string) {
  return `${question}? ${answer}`;
}
```

The meta after the language does three things:

Meta	Meaning
{1|3-5|all}	highlight steps: line 1, then lines 3–5, then everything — one click each
[example.ts]	a title bar
{lines:true}	line numbers for this block (deck-wide: lineNumbers: true)

Magic move

A magic-move block holds one fence per step; each click morphs the code from one step to the next, tokens sliding to their new places (Slidev’s magic move, powered by shiki-magic-move):

````md magic-move
```ts
const total = items.length;
```

```ts
const total = items.filter((i) => i.done).length;
```

```ts
const done = items.filter((i) => i.done);
const total = done.length;
```
````

The steps are tokenised at build time. magicMoveDuration (milliseconds, default 800) sets the speed.

Themes

The Vite plugin’s options choose the Shiki themes; the defaults suit the neutral theme, and a deck’s theme CSS can override the colours.

deck({ entry: "deck.mdx" /* , shiki themes */ });