Shiki Magic Move

Shiki Magic Move を使うと、コードの変更間で Keynote の Magic Move に似た細かいトランジションを実現できます。プレイグラウンドで動作を確認できます。

Slidev では、Magic Move をクリックシステムにバインドしています。構文は、各ステップを表す複数のコードブロックを ````md magic-move（バックティックは4つ）でラップすることで、1 つのコードブロックに変換され、クリックするたびに各ステップに変形します。

````md magic-move
```js
console.log(`Step ${1}`)
```
```js
console.log(`Step ${1 + 1}`)
```
```ts
console.log(`Step ${3}` as string)
```
````

とと組み合わせることも可能です。例えば:

````md magic-move {at:4, lines: true} // [!code hl]
```js {*|1|2-5} // [!code hl]
let count = 1
function add() {
  count++
}
```

コードブロックの間に非コードブロックがある場合は無視され、コメントなどを入れることができます

```js {*}{lines: false} // [!code hl]
let count = 1
const add = () => count += 1
```
````

Shiki Magic Move ​

Shiki Magic Move