monacode

모나코드

모나코 편집자와 더 예쁘다.

모나코 에디터 (전력 대 코드) 및 더 예쁜 모듈을 브라우저로 직접 가져올 수있는 타당성을 탐색합니다. 구축 단계가없는 코드 편집 경험을 웹 애플리케이션에 가져 오기 쉽게 하나의 라인을 쉽게 가져 오기를 목표로합니다.

상자 밖에서 일반적으로 볼 수있는 모든 기능을 갖춘 선박 : 코드 힌트, 유형 추론, 미니 맵, 명령 팔레트, 멀티 쿠저 선택, 찾기 및 교체, 코드 폴딩 등과 같은 것들.

이러한 기능 외에도 Pretier가 통합되어 ⌘ + s 치면 코드가 형식화됩니다.

https://monacode.live에서 호스팅 된 버전을 확인하십시오

용법

모듈을 NPM 모듈로 설치하고 Bare Module Specifier를 사용하여 가져 오거나 UNBKG에서 직접 가져 오십시오.

 import monacode from 'https://unpkg.com/monacode/index.min.js' ; // 976Kb brotli

// Create a new editor and attach to the document body
const editor = monacode ( {
  container : document . body ,
  value : 'const add = (x, y) => x + y;' ,
} ) ;

// Listen for changes within the editor
editor . getModel ( ) . onDidChangeContent ( ( change ) => {
  const newValue = editor . getValue ( ) ;
  console . log ( newValue ) ;
} ) ;

iframe을 사용하여 편집기를 응용 프로그램에 포함시킬 수도 있습니다 (데모 참조).

 < iframe
  src =" https://monacode.live?theme=vs-light&value=console.log('hey') "
> </ iframe >

구성 옵션을 IFRAME로 URL 검색 매개 변수로 전달하여 URI가 값을 올바르게 인코딩해야합니다. 그러나 현재 중첩 구성 옵션을 전달할 수는 없습니다.

API

모듈은 구성 객체를 인수로 받아들이는 단일 기본 기능을 내보내고 있습니다. 제공된 구성은 기본 구성과 병합되어 있으며 Moanco 편집기를 구성하는 데 사용할 수있는 옵션의 하위 집합입니다. 알아야 할 유용한 값은 다음과 같습니다.

• container : DOM에 존재하는 HTML 요소 (또는 RECT/PREACT를 사용하는 경우 ref )
• value : 편집기 내에서 렌더링 할 초기 코드를 나타내는 문자열
• language : 편집자가 구문 하이라이트를 시도 해야하는 언어를 나타내는 문자열.
• fontSize : 픽셀 글꼴 크기 코드가 무엇을 렌더링 해야하는지 나타내는 숫자
• theme : 원하는 테마의 문자열 식별자 또는 테마 JSON 파일의 URL

기본 내보내기를 호출하면 기본 모나코 편집기의 인스턴스가 반환됩니다. API 문서를 읽음으로써 편집기와 상호 작용하는 방법에 대한 자세한 내용을 확인하십시오.

개발

이 프로젝트의 루트에서 다음 명령을 실행하면 servor 사용하여 Dev Server를 시작한 다음 적절한 LocalHost URL에서 편집기 및 브라우저를 엽니 다.

npm start

생산

이 프로젝트의 루트에서 다음 명령을 실행하면 esbuild 사용하여 소스를 단일 index.min.js 파일로 빌드합니다. 현재이 프로세스는 ~ 1 초가 걸리며 4.6MB의 출력 파일 (Brotli를 사용하면 1MB 미만으로 내려 가면)을 초래합니다.

npm run build

특허

MIT 라이센스에 따라 라이센스.