Shiki Magic Move 使用教程

Shiki Magic Move 使用教程

shiki-magic-move Smoothly animated code blocks with Shiki 项目地址: https://gitcode.com/gh_mirrors/sh/shiki-magic-move

项目介绍

Shiki Magic Move 是一个用于动画化代码块的低级库，它使用 Shiki 作为语法高亮器。该项目的主要目的是提供一种平滑的动画效果，使得代码块在发生变化时能够以动画的形式展示，从而提升用户体验。Shiki Magic Move 的核心是一个框架无关的库，同时也提供了 Vue、React 和 Svelte 的框架封装，方便开发者在这些框架中使用。

项目快速启动

安装

首先，你需要安装 Shiki Magic Move 和 Shiki：

npm install shiki-magic-move shiki

使用示例

以下是一个简单的 Vue 示例，展示如何使用 Shiki Magic Move：

<script setup>
import { ShikiMagicMove } from 'shiki-magic-move/vue'
import { getHighlighter } from 'shiki'
import { ref } from 'vue'
import 'shiki-magic-move/dist/style.css'

const highlighter = await getHighlighter({
  themes: ['nord'],
  langs: ['javascript', 'typescript']
})

const code = ref(`const hello = 'world'`)

function animate() {
  code.value = `let hi = 'hello'`
}
</script>

<template>
  <ShikiMagicMove
    lang="ts"
    theme="nord"
    :highlighter="highlighter"
    :code="code"
    :options="{ duration: 800, stagger: 0.3, lineNumbers: true }"
  />
  <button @click="animate">Animate</button>
</template>

应用案例和最佳实践

应用案例

Shiki Magic Move 可以用于各种需要代码展示的场景，例如：

• 技术博客：在博客中展示代码示例时，使用 Shiki Magic Move 可以让代码的变化更加生动。
• 在线教程：在编写在线教程时，通过动画展示代码的变化过程，可以帮助学习者更好地理解代码的演变。
• 代码演示：在技术分享或演示中，使用 Shiki Magic Move 可以让代码的变化更加引人注目。

最佳实践

• 优化动画效果：根据实际需求调整 duration 和 stagger 参数，以达到最佳的动画效果。
• 选择合适的主题：Shiki 支持多种主题，选择一个适合你项目的主题可以提升代码的可读性。
• 结合其他工具：可以将 Shiki Magic Move 与其他代码高亮工具结合使用，以实现更丰富的功能。

典型生态项目

Shiki Magic Move 作为一个低级库，通常与其他工具和框架结合使用，以下是一些典型的生态项目：

• Slidev：一个基于 Vue 3 的演示文稿工具，可以与 Shiki Magic Move 结合使用，创建动态的代码演示。
• VuePress：一个基于 Vue 的静态站点生成器，可以集成 Shiki Magic Move 来增强代码展示效果。
• MDX：一个允许在 Markdown 中使用 JSX 的工具，可以与 Shiki Magic Move 结合使用，创建动态的文档和教程。

通过这些生态项目的结合，Shiki Magic Move 可以发挥更大的作用，帮助开发者创建更加生动和互动的代码展示环境。

shiki-magic-move Smoothly animated code blocks with Shiki 项目地址: https://gitcode.com/gh_mirrors/sh/shiki-magic-move