shikitor

시키터 (四季多)

설명

웹의 간단하고 가벼운 코드 편집기.

| en-us | 中文 |

사용 방법

cdn

도구를 경험하고자하는 많은 사용자들에게 CDN은 좋은 선택입니다. 이 도구를 프로젝트에 직접 소개하고 사용을 시작할 수 있습니다. 사용 습관이 다를 수 있습니다. 여기 에이 도구를 소개하는 몇 가지 간단한 방법을 제공합니다. 다음은 간단한 예제 링크입니다. 해당 파일을 보려면 클릭 할 수 있습니다.

• ESM

  ESM은 좋은 선택입니다. 가져 오기 구문을 사용하여 프로젝트 에이 도구를 도입 할 수 있습니다. 이것은 또한 Shiki의 기본 수출 방법으로, 사용하기에 비교적 편리합니다.

• ESM + 플러그인

  기능의 플러그 가능성은 항상 내 코드 디자인 철학의 매우 중요한 부분이었습니다. 여기에서 기능 확장 플러그인을 소개하는 방법을 볼 수 있습니다.

• 음

  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 : 들여 쓰기 / 구식

Tab 사용하여 현재 선 또는 선택된 선을 들여 보내고 Shift + Tab 사용하여 Outdent로 사용할 수 있습니다.

• 플러그인 : @shikitor/core/plugins/code-styler
• 데모

빠른 점프

• 플러그인 : @shikitor/core/plugins/code-styler
• Cmd/Ctrl + ⬅️/➡️ : 라인 시작/종료로 점프합니다
  • 데모

마우스 상호 작용

커서 위치를 강조 표시하십시오

• 플러그인 : 번들
• 데모

닫는 괄호를 강조 표시하십시오

• 플러그인 : @shikitor/core/plugins/bracket-matcher
• 데모

플러그인 시스템

건물...

특허

MIT