Using Shiki Magic Move to animate code blocks.

🔴 Patreon: https://www.patreon.com/joyofcode
 𝕏 Twitter: https://twitter.com/joyofcodedev
💬 Discord: https://discord.com/invite/k6ZpwAKwwZ
🔥 Uses:  https://www.joyofcode.xyz/uses

🔗 Animated Code Blocks Using Shiki: https://joyofcode.xyz/animated-code-blocks-using-shiki
🔗 Shiki Magic Move: https://shiki-magic-move.netlify.app/
🔗 The Magic In Shiki Magic Move: https://antfu.me/posts/shiki-magic-move
🔗 Playlist: https://youtube.com/playlist?list=PLA9WiRZ-IS_y2-ZbmGRKNaeEULXKK_WJE&si=lKlYv11pQUGJjNzN

🔖 Timestamps

0:00 Intro
2:27 Project Setup
6:11 Creating The Shiki Highlighter
8:35 Shiki Magic Move Component
16:52 Shiki Magic Move Renderer Component
24:00 Shiki Magic Move Options
24:48 Outro

#joyofcode #sveltekit #svelte

Joy of Code

Learn how to create animated code blocks using Shiki and the flip animation technique with Svelte. Shiki offers syntax highlighting that matches Visual Studio Code, supporting multiple themes and languages. The guide briefly covers converting Vue or React components to Svelte, showing how to implement smooth, animated transitions with code blocks using Shiki's Magic Move. Key topics include handling props, using derived state, and employing the flip animation for dynamic changes.

Animated Code Blocks Using Shiki Magic Move