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
• 演示

插件系統

建築...

執照

麻省理工學院