A port of shiki-magic-move for Expressive Code.

Examples

Installation

npm install ec-magic-move
# pnpm install ec-magic-move
# bun install ec-magic-move
# yarn add ec-magic-move

Usage

Add the plugin to your Expressive Code configuration:

import { defineConfig } from 'astro/config';
import { pluginMagicMove } from 'ec-magic-move';
export default defineConfig({
  integrations: [
    starlight({
      expressiveCode: {
        plugins: [pluginMagicMove()],
      },
    }),
  ],
});

In the individual code blocks, add the following two line ranges (defined by a start and an end):

• magic-move-before
• magic-move-after

```ts magic-move-before={1-12} magic-move-after={13-26}

Configuration

The plugin accepts an optional configuration object:

pluginMagicMove({
 duration: 800, // the duration of the animation in milliseconds
 stagger: 3, // the stagger between the individual tokens, also in milliseconds
 lineNumbers: true, // whether or not to show line numbers
 autoanimate: false, // whether or not to autoanimate the code block
 theme: 'catppuccin-mocha', // the theme of the shiki highlighter
 buttonPosition: 'bottom-right', // the position of the play button
})

Options

• duration: the duration of the animation in milliseconds (default: 800)
• stagger: the stagger between the individual tokens, also in milliseconds (default: 3)
• lineNumbers: whether or not to show line numbers (default: true)
• autoanimate: whether or not to autoanimate the codeblock (default: false)
• theme: the theme of the shiki highlighter (default: catppuccin-mocha, possible values: all shiki themes)
• buttonPosition: the position of the play button (default: bottom-right, other possible values: bottom-left, top-right, top-left)

Per-Block Customization

You can override settings for individual code blocks using meta attributes:

```js magic-move-duration="400"
// Animation takes 400ms

```js magic-move-stagger="5"
// Animation has a stagger of 5ms

```ts magic-move-line-numbers="false"
// No line numbers on this block

Available Meta Attributes

• magic-move-duration="value": Override the animation duration for this block
• magic-move-stagger="value": Override the animation stagger for this block
• magic-move-line-numbers="boolean": Decide per block whether or not to show the line numbers
• autoanimate="boolean": Decide per block whether or not it should be autoanimated