GitHub 热门项目: shiki-magic-move

GitHub 项目：shiki-magic-move 仓库地址：https://github.com/shikijs/shiki-magic-move 星级：1511 | 作者：shikijs 项目描述：带有 Shiki 的流畅动画代码块 =================================================== 自述文件内容： # 式魔法移动 [![npm 版本][npm-version-src]][npm-version-href] [![npm 下载][npm-downloads-src]][npm-downloads-href] [![bundle][bundle-src]][bundle-href] [![JSDocs][jsdocs-src]][jsdocs-href] [![许可证][许可证-src]][许可证-href] > [!重要] > **`shiki-magic-move` 已重命名为 [`@shikijs/magic-move`](https://www.npmjs.com/package/@shikijs/magic-move)。** > > 从 `v4.2.0` 开始，这个包是 `@shikijs/magic-move` 的精简重新导出，并且不会在这里得到进一步的开发 - 所有未来的工作都发生在 [`shikijs/shiki`](https://github.com/shikijs/shiki/tree/main/packages/magic-move) monorepo 中。 > > **请迁移到 `@shikijs/magic-move`:** > > ```bash > npm 卸载 shiki-magic-move > npm install @shikijs/magic-move > ``` > > 然后更新每个导入路径，例如`shiki-magic-move/vue`→`@shikijs/magic-move/vue`。 API 表面是相同的，因此不需要更改其他代码。请参阅 [`@shikijs/magic-move` 文档](https://shiki.style/packages/magic-move) 了解最新文档。 使用 Shiki 实现流畅的动画代码块。 [在线演示](https://shiki-magic-move.netlify.app/)。 Shiki Magic Move 是一个用于动画代码块的低级库，并使用 [Shiki](https://shiki.style/) 作为语法突出显示。您通常希望将其与 [Slidev](https://sli.dev/guide/syntax#shiki-magic-move) 等高级集成一起使用。 该包的核心是一个与框架无关的核心和渲染器——还有 Vue、React、Solid 和 Svelte 的框架包装器。 每个框架包装器都提供以下组件： - `ShikiMagicMove` - 包装代码块的主要组件 - `ShikiMagicMovePrecompiled` - 编译标记的动画，不依赖于 Shiki - `ShikiMagicMoveRenderer` - 低级渲染器组件 `ShikiMagicMove` 组件要求您提供 Shiki 荧光笔实例，样式也是必需的，由包提供。每当“代码”更改时，组件都会以动画方式显示更改。 ## 安装 ````bash npm 我@shikijs/magic-move shiki ```` > 如果您仍在使用 `shiki-magic-move`，下面的相同示例可使用 `shiki-magic-move/*` 子路径导入 — 它们只是在底层委托给 `@shikijs/magic-move/*`。 ## 用法 ### 视觉 导入`@shikijs/magic-move/vue`，并将荧光笔实例传递给`ShikiMagicMove`组件。 ``vue <脚本设置> 从 '@shikijs/magic-move/vue' 导入 { ShikiMagicMove } 从 'shiki' 导入 { createHighlighter } 从 'vue' 导入 { ref } 导入'@shikijs/magic-move/style.css' const 荧光笔 = 等待 createHighlighter({ 主题：['nord'], 语言：['javascript', '打字稿'], }) const code = ref(`const hello = 'world'`) 函数动画（）{ code.value = `让 hi = '你好'` } <模板> <四季魔法移动 郎=“ts” 主题=“北” :highlighter="荧光笔" ：代码=“代码” :options="{ 持续时间: 800, 交错: 0.3, lineNumbers: true }" /> <按钮