monacode

モナコード

モナコの編集者ときれいな薄いESモジュールラッパー

Monaco-Editor（Cowers vs Code）ときれいなモジュールをブラウザに直接インポートする可能性を調査します。ビルドステップなしで、ネイティブのようなコード編集エクスペリエンスをWebアプリケーションに簡単に持ち込むことを目指しています。

通常、VSコードで見つかったすべての機能を備えた船は、コードのヒント、タイプの推論、ミニマップ、コマンドパレット、マルチカーサーの選択、検索と交換、コード折りたたみなどのものです。

これらの機能に加えて、きれいな機能が統合されているため、 ⌘ + sはコードをフォーマットします。

https://monacode.liveでホストバージョンをご覧ください

使用法

モジュールをNPMモジュールとしてインストールし、BAREモジュール仕様を使用してインポートするか、UNPKGから直接インポートします。

 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 >

構成オプションをURL検索パラメーターとしてiframeに渡し、URIに適切にエンコードするようにします。ただし、現在はネストされた構成オプションを渡すことはできません。

API

モジュールは、構成オブジェクトを引数として受け入れる単一のデフォルト関数をエクスポートします。付属の構成は、Moancoエディターを構成するために利用可能なオプションのサブセットであるデフォルト構成とマージされます。知っておくべきいくつかの有用な値は次のとおりです。

• container ：DOMに存在するHTML要素（または、React/PreActを使用している場合はref ）
• value ：エディター内でレンダリングされる初期コードを表す文字列
• language ：編集者がどの言語を試すべきかを表す文字列構文のハイライトとヒント
• fontSize ：どのピクセルフォントサイズコードがレンダリングするかを示す数字
• theme ：目的のテーマの文字列識別子またはテーマJSONファイルへのURL

デフォルトのエクスポートを呼び出すと、基礎となるモナコエディターのインスタンスが返されます。 APIドキュメントを読んで、エディターと対話する方法の詳細をご覧ください。

発達

このプロジェクトのrootから次のコマンドを実行すると、 servorを使用して開発サーバーを起動し、適切なLocalHost URLでエディターとブラウザを開きます。

npm start

生産

このプロジェクトのルートから次のコマンドを実行すると、 esbuildビルドソースを単一のindex.min.jsファイルに使用します。現在、このプロセスには〜1秒かかり、4.6MBの重量の出力ファイルが得られます（Brotliで1MB未満に移行します）。

npm run build

ライセンス

MITライセンスに基づいてライセンスされています。