shiki-magic-move

Shiki Magic Move is a low-level library for animating code blocks, and uses Shiki as the syntax highlighter. You usually want to use it with a high-level integration like Slidev.

open source
tailwindcss
shiki-magic-move

Introduction

Smoothly animated code blocks with Shiki. Online Demo.

Shiki Magic Move is a low-level library for animating code blocks, and uses Shiki as the syntax highlighter. You usually want to use it with a high-level integration like Slidev.

At the core of the shiki-magic-move package is a framework-agnostic core, and renderer — there are also framework wrappers for Vue, React, and Svelte.

Each of the framework wrappers provides the following components:

  • ShikiMagicMove - the main component to wrap the code block
  • ShikiMagicMovePrecompiled - animations for compiled tokens, without the dependency on Shiki
  • ShikiMagicMoveRenderer - the low-level renderer component

The ShikiMagicMove component requires you to provide a Shiki highlighter instance, and the styles are also required, and provided by shiki-magic-move. Whenever the code changes, the component will animate the changes.

Details

Website

github.com

Price

Free

Submitter

Date

2024/06/22