Shiki Magic Move 中的魔力
<script setup\>
import { ref, computed } from 'vue'
const count \= ref(1)
const double \= computed(() \=> count.value \* 2)
{{ count }} \= {{ doubled / 2 }}
{{ count }} \= {{ doubled / 2 }}
\> \> [Magic Move is a feature for transition in Keynote](https://support.apple.com/guide/keynote/add-transitions-tanff5ae749e/mac), or it’s called [Morph Transition in PowerPoint](https://support.microsoft.com/en-us/office/use-the-morph-transition-in-powerpoint-8dd1c7b2-b935-44f5-a74c-741d8d9244ea), and it automatically animates the transitions for objects between slides. It is quite impressive, very intuitive and effortless to use, and can be applied to various types of objects. Like you can paste a highlighted code block, or make another in a second slide, Magic Move will do the transition as granular to the tokens level for you. The only annoying part of this process is that Keynote does not support code highlighting - so you need to highlight the code somewhere and paste them manually **every single time**. This is one of the reasons I made [Slidev](https://sli.dev/) - to have first-class tooling for developers to make presentations easier. While moving to web technologies with Slidev opens up almost infinite possibilities, on the other hand, it also makes some nice cool features in Keynote and PowerPoint harder to achieve (you need to write quite some extra code) - for example, the Magic Move. Browsers’ new [View Transitions API](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API) makes morphing between elements a lot easier, only that it requires some manual work to assign keys to make the pairs. While it’s rather ok to do for a few big elements, doing such manually for every single token in a code block is basically unacceptable. Roughly a year ago, [Eduardo @posva](https://github.com/posva) and I came up with the idea of using Shiki combined with Vue’s [`开通本站会员，查看完整译文。