monacode

莫納科德

摩納哥編輯和漂亮的ES模塊包裝紙

探索導入摩納哥編輯器（為代碼提供動力）和更漂亮的模塊的可行性；旨在使無需構建步驟的本地代碼編輯體驗帶到Web應用程序中，將類似的代碼編輯體驗帶入一行。

船舶具有通常在VS代碼中發現的所有功能的船舶：諸如代碼提示，類型推理，minimap，命令托盤，多核心選擇，選擇，查找和替換，代碼折疊等的內容。

除了這些功能外，還集成了Prettier，以便擊中⌘ + s將格式化代碼。

⚡️在https://monacode.live上查看託管版本

用法

將模塊作為NPM模塊安裝，並使用Bare Module Specifier導入它，或直接從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 >

將配置選項傳遞到IFRAME作為URL搜索參數中，確保URI正確編碼值。但是請注意，目前不可能傳遞嵌套配置選項。

API

該模塊導出一個默認函數，該函數接受配置對像作為參數。提供的配置將與默認配置合併，該配置本身是可用於配置Moanco編輯器的選項的子集。知道的一些有用的值包括：

• container ：DOM中存在的HTML元素（或使用React/preacct， ref ）
• value ：代表要在編輯器中渲染的初始代碼的字符串
• language ：代表編輯器應嘗試語法亮點的字符串，並提示
• fontSize ：一個數字，指示什麼像素字體大小代碼應在
• theme ：所需主題的字符串標識符或主題JSON文件的URL

調用默認導出返回基礎摩納哥編輯的實例。通過閱讀API文檔，以了解有關如何與編輯互動的更多信息。

發展

從該項目的根部運行以下命令使用servor來啟動開發服務器，然後在適當的Local主機URL上打開您的編輯器和瀏覽器。

npm start

生產

從該項目的根部運行以下命令使用esbuild將源構建到一個index.min.js文件。當前，此過程將〜1秒左右，並導致重量為4.6MB的輸出文件（使用Brotli降至小於1MB）。

npm run build

執照

根據MIT許可獲得許可。