| 1 | --- |
| 2 | depends: |
| 3 | - guide/syntax#code-block |
| 4 | - guide/animations |
| 5 | relates: |
| 6 | - Shiki Magic Move: https://github.com/shikijs/shiki-magic-move |
| 7 | since: v0.48.0 |
| 8 | tags: [codeblock, animation] |
| 9 | description: | |
| 10 | Enable granular transition between code changes, similar to Keynote's Magic Move. |
| 11 | --- |
| 12 | |
| 13 | # Shiki Magic Move |
| 14 | |
| 15 | [Shiki Magic Move](https://github.com/shikijs/shiki-magic-move) enables you to have a granular transition between code changes, similar to Keynote's Magic Move. You can check [the playground](https://shiki-magic-move.netlify.app/) to see how it works. |
| 16 | |
| 17 | <video src="https://github.com/slidevjs/slidev/assets/11247099/79927794-27ba-4342-9911-9996cec889d6" controls rounded shadow w-full></video> |
| 18 | |
| 19 | In Slidev, we bind the magic-move to the [clicks system](/guide/animations#click-animation). The syntax is to wrap multiple code blocks representing each step with <code>````md magic-move</code> (mind it's **4** backticks), this will be transformed into one code block, that morphs to each step as you click. |
| 20 | |
| 21 | `````md |
| 22 | ````md magic-move |
| 23 | ```js |
| 24 | console.log(`Step ${1}`) |
| 25 | ``` |
| 26 | ```js |
| 27 | console.log(`Step ${1 + 1}`) |
| 28 | ``` |
| 29 | ```ts |
| 30 | console.log(`Step ${3}` as string) |
| 31 | ``` |
| 32 | ```` |
| 33 | ````` |
| 34 | |
| 35 | It's also possible to mix Magic Move with <LinkInline link="features/line-highlighting" /> and <LinkInline link="features/code-block-line-numbers" />, for example: |
| 36 | |
| 37 | `````md |
| 38 | ````md magic-move {at:4, lines: true} // [!code hl] |
| 39 | ```js {*|1|2-5} // [!code hl] |
| 40 | let count = 1 |
| 41 | function add() { |
| 42 | count++ |
| 43 | } |
| 44 | ``` |
| 45 | |
| 46 | Non-code blocks in between as ignored, you can put some comments. |
| 47 | |
| 48 | ```js {*}{lines: false} // [!code hl] |
| 49 | let count = 1 |
| 50 | const add = () => count += 1 |
| 51 | ``` |
| 52 | ```` |
| 53 | ````` |
| 54 | |
| 55 | ## Title Bar {#title-bar} |
| 56 | |
| 57 | > Available since v0.52.0 |
| 58 | |
| 59 | You can add a title bar to magic move blocks by specifying a filename in the opening fence of each step: |
| 60 | |
| 61 | `````md |
| 62 | ````md magic-move [app.js] |
| 63 | ```js |
| 64 | console.log('Step 1') |
| 65 | ``` |
| 66 | ```js |
| 67 | console.log('Step 2') |
| 68 | ``` |
| 69 | ```` |
| 70 | ````` |
| 71 | |
| 72 | The title bar will also display an automatically matched icon based on the filename (see <LinkInline link="features/code-groups#title-icon-matching" />). |
| 73 | |
| 74 | ## Animation Duration {#duration} |
| 75 | |
| 76 | > Available since v0.52.0 |
| 77 | |
| 78 | You can customize the animation duration for magic move transitions globally via the headmatter: |
| 79 | |
| 80 | ```yaml |
| 81 | --- |
| 82 | magicMoveDuration: 500 # duration in milliseconds, default is 800 |
| 83 | --- |
| 84 | ``` |
| 85 | |
| 86 | Or per-block by passing the `duration` option: |
| 87 | |
| 88 | `````md |
| 89 | ````md magic-move {duration:500} |
| 90 | ```js |
| 91 | console.log('Step 1') |
| 92 | ``` |
| 93 | ```js |
| 94 | console.log('Step 2') |
| 95 | ``` |
| 96 | ```` |
| 97 | ````` |
| 98 | |
| 99 | ## Copy Button {#copy-button} |
| 100 | |
| 101 | > Available since v0.52.0 |
| 102 | |
| 103 | Magic move code blocks support a copy button that appears on hover. Configure this behavior globally with the `magicMoveCopy` headmatter option: |
| 104 | |
| 105 | <!-- eslint-skip --> |
| 106 | |
| 107 | ```yaml |
| 108 | --- |
| 109 | # Options: true | false | 'always' | 'final' |
| 110 | magicMoveCopy: true # show copy button on all steps (default) |
| 111 | magicMoveCopy: false # disable copy button |
| 112 | magicMoveCopy: 'final' # only show copy button on the final step |
| 113 | --- |
| 114 | ``` |
| 115 | |
| 116 | The copy button respects the global `codeCopy` setting. If `codeCopy` is `false`, the magic move copy button will also be disabled. |
| 117 |