shikitor

Shikitor（四季多）

描述

Web的简单且轻巧的代码编辑器。

| En-us | 中文|

如何使用

CDN

对于许多想体验该工具的用户，CDN是一个不错的选择。您可以将此工具直接引入您的项目并开始使用。您可能有不同的用法习惯。在这里，我为您提供了几种简单的方法来介绍此工具。以下是一些简单的示例链接，您可以单击以查看相应的文件。

• ESM

  ESM是一个不错的选择，它允许您使用导入语法在项目中介绍此工具。这也是Shiki的默认导出方法，使用相对方便。

• ESM +插件

  功能的可实力一直是我代码设计理念的重要组成部分。在这里，您可以看到如何介绍功能扩展插件。

• UMD

  如果您不想使用ESM，那么UMD可能是一个不错的选择。它允许您使用脚本标签在项目中介绍此工具。 （但实际上，对于Shiki来说，这可能不是一个很好的例子，我需要一些时间才能更好地反映UMD的优势）

node.js

对于一些想在编译过程中使用此工具的用户，通过软件包管理安装依赖关系，然后在代码中介绍此工具可能是一个更好的选择。

• 安装依赖项

npm install @shikitor/core
# If you are using yarn
yarn add @shikitor/core

• 在代码中引入

 import '@shikitor/core/index.css'

import { create } from '@shikitor/core'

const shikitor = create ( document . getElementById ( 'editor' ) , {
  value : 'console.log("Hello, Shikitor!")' ,
  language : 'javascript' ,
  theme : 'github-light'
} ) 

特征

键盘快捷键

Tab / Shift + Tab ：缩进 / OUTDENT

您可以使用Tab来缩进当前行或选定的行，并使用Shift + Tab进行OUTDENT。

• 插件： @shikitor/core/plugins/code-styler
• 演示

快速跳跃

• 插件： @shikitor/core/plugins/code-styler
• Cmd/Ctrl + ⬅️/➡️ ：跳到线开始/结束
  • 演示

鼠标相互作用

突出显示光标位置的线

• 插件：捆绑
• 演示

突出显示闭合支架

• 插件： @shikitor/core/plugins/bracket-matcher
• 演示

插件系统

建筑...

执照

麻省理工学院