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
```
````

タイトルバー

v0.52.0 以降で利用可能

マジックムーブブロックにタイトルバーを追加するには、各ステップの開始フェンスでファイル名を指定します:

````md magic-move
```js [app.js]
console.log('Step 1')
```
```js [app.js]
console.log('Step 2')
```
````

タイトルバーには、ファイル名に基づいて自動的に一致するアイコンも表示されます（詳細は ✨ コードグループ を参照）。

アニメーションの継続時間

v0.52.0 以降で利用可能

マジックムーブのトランジションのアニメーション継続時間は、ヘッドマターでグローバルにカスタマイズできます:

---
magicMoveDuration: 500 # ミリ秒、デフォルトは 800
---

または各ブロックごとに duration オプションを渡して設定できます:

````md magic-move {duration:500}
```js
console.log('Step 1')
```
```js
console.log('Step 2')
```
````

コピーボタン

v0.52.0 以降で利用可能

マジックムーブのコードブロックは、ホバー時に表示されるコピーボタンをサポートしています。この動作は、ヘッドマターの magicMoveCopy オプションでグローバルに設定できます:

---
# オプション: true | false | 'always' | 'final'
magicMoveCopy: true     # すべてのステップでコピーボタンを表示 (デフォルト)
magicMoveCopy: false    # コピーボタンを無効化
magicMoveCopy: 'final'  # 最終ステップのみコピーボタンを表示
---

コピーボタンはグローバルな codeCopy 設定を尊重します。codeCopy が false の場合、マジックムーブのコピーボタンも無効になります。